web表格制作

使用webstorm制作网页文件的时候，难免会遇到制作表格的情况，而且关键的布局方式一般都是使用表格完成的。

工具/原料

电脑webstorm

方法/步骤

1、制作表格我们需要使用标签table在html中输入table标签，然后设置行和列，，tr代表行,td代表列，然后在行和列中输入相关的内容。

2、预览网页我们发现，网页显示格式看起来不像是表格，因为没有框线，这时候我们需要给table标签设置边框，border，如图所示，在table标签中，定义border的值，这样再预览网页我们就可以看到表格样式。

3、图中的表格表头和文本内容显示格式一致，我们可以使用th标签代替td标签作为表格的表头，系统自动将表头内部的文本内容加粗居中显示，这样表头格式就被着重定义出来。

4、可以使用caption标签给表格添加标题，caption是table标签的子标签需要写在table标签内部，将需要定义的标题文本输入到caption中。

5、两行数值一样的话可以设置为rowspan值，如图所示，两行数据一致，直接设置rowspan值为2，下一行的这个数值就不必单独定义了，如果是三行数值一致，那么可以直接设置为3。

6、将多列相同数据一起显示可以使用colspan来进行设置，如图所示，第三列所有的内容都全部显示一致，我们可以设置像表格中的合并效果然后一起显示，这样就不必每一列都输入内容。

制作1px边框表格的几种方法 有过网页制作经验的朋友一定知道：一般来讲，把表格的边框定义为1px时，即border=1，而实际上是2px。而我们在很多时候需要那种真正的边框为1px的表格，下面就介绍几种方法。 一、用嵌套表格 用两个表格嵌套，外层的表格的长与宽比里层的多出2px，并设置对齐属性为水平居中、垂直居中，然后把外层表格的背景设为你需要的边框颜色，里层表格背景设为与网页背景相同，这样就实现我们的愿望了，实例如下： ----------------------------------------------------------------- <table cellspacing="0" cellpadding="0" bgcolor="#000000" width="32" height="32" border="0"<tr<td align="center" <table cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="30" height="30" border="0"<tr<td　</td</tr</td</tr</table----------------------------------------------------------------- 二、设置亮、暗边框颜色 表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性，把表格边框(border)设为1px，亮边框(bordercolorlight)设为背景色，暗边框(bordercolordark)设为你需要的实际边框颜色就可以了，实列如下： ----------------------------------------------------------------- <table border="1" cellpadding="0" cellspacing="0" width="32" height="32" bordercolorlight="#000000" bordercolordark="#FFFFFF"<tr<td　</td</tr</table----------------------------------------------------------------- 三、用CSS定义（一） （推荐使用）代码为：style="border-collapse: collapse"实例如下：----------------------------------------------------------------- <table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse" bordercolor="#000000" cellpadding="0"<tr<td　</td</tr</table----------------------------------------------------------------- 如果你用过Frontpage xp，你会发现，在Frontpage xp中定义的表格默认的设置就是用CSS定义过了的。 四、用CSS定义（二）代码为：style="border: 1px solid #000000;"实例如下：----------------------------------------------------------------- <table cellspacing="1" width="32" height="32" style="border: 1px solid #000000; "<tr<td　</td</tr</table-----------------------------------------------------------------