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

<table是<tr的上层标签

<tr必须在一个<table</table里面,它不能单独使用,相当于<table的属性标签.

<table标示一个表格,<tr标示这个表格中间的一个行

<td标示行中的一个列,需要嵌套在<tr</tr中间

具体格式是:(两行两列)<table<tr<td</td

<td</td</tr</teble<th和<td一样,也是需要嵌套在<tr当中的,<tr嵌套在<table当中

<table...</table 用于定义一个表格开始和结束

<th...</th 定义表头单元格。表格中的文字将以粗体显示（<TH与<TD同样是标示一个储存格,唯一不同的是<TH所标示的储存格中的文字是以粗体出现,即可以这样看：

<th文字</th=<td<b文字</b</td），

在表格中也可以不用此标签，<th标签必须放在<tr标签内

<tr...</tr 定义一行标签，一组行标签内可以建立多组由<td或<th标签所定义的单元格

<td...</td 定义单元格标签，一组<td标签将将建立一个单元格，<td标签必须放在<tr标签内

。<th为表格标题，属性summar为摘要，<caption标签为首部说明，<thead标签为表格头部，<tbody标签为表格主体内容，<tfoot标签为表格尾部。

其中还可以使用scope 可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下：

　row 指示当前单元格，为包含当前单元格的行提供相关的表头信息。

　col 指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。

　rowgroup 指示当前单元格，为包含当前单元格的其余行组提供相关的表头信息。

　colgroup 指示当前单元格，为根据当前单元格指定的其余列组提供相应的表头信息。

abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。

标准表格模型<table<caption</caption<thead<tr<th</th</tr</thead<tbody<tr<td</td</tr</tbody<tfoot<tr<td</td</tr</tfoot</table相关：<th不光是粗体，还是居中的

<caption也是居中的，而且如果table有border的话则caption不在border之内

---