html表格制作教程？

使用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来进行设置，如图所示，第三列所有的内容都全部显示一致，我们可以设置像表格中的合并效果然后一起显示，这样就不必每一列都输入内容。

1、字体大小：font-size

注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

也可直接用像素设置：比如12px,或者em.

2、字体颜色：color

//示例

body{color:red}

h1{color:#00ff00}

p{ color:rgb(0,0,255)}

这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。

3、拓展-字体大小也可以使用font属性设置

/*示例*/

p.ex2{ font:italic bold 12px/20px arial,sans-serif}

font 简写属性在一个声明中设置所有字体属性。

这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。

可以按顺序设置如下属性：

font-style

font-variant

font-weight

font-size/line-height

font-family

可以不设置其中的某个值，比如 font:100% verdana也是允许的。未设置的属性会使用其默认值。

---