六、表格（绿叶学习网）

在制作网页时，使用表格可以更清晰地排列数据。在过去的web1.0时代，表格更多地用在网页布局定位上。但是在web2.0时代，表格定位已经被摒弃了，现在使用的是“DIV+CSS”模式。

表格基本标签有：table标签（表格）、tr标签（行）、td标签（单元格）。<tr>标签和<td>标签都要在表格的开始标签<table>和结束标签</table>之间才有效。tr，即“table row（表格行）”。td，即“table data cell（表格单元格）”。<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着行的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。

用“table布局”好，还是使用“DIV+CSS布局”好呢？table布局，已经是Web1.0时代的落后技术了。table布局，有非常多的弊端，例如冗余代码过多、难以维护、不够灵活等。DIV+CSS布局，指的就是“XHTML+CSS布局”，这是Web2.0时代的技术，基本规避了table布局的弊端。

表格一般都有一个标题，表格标题使用<caption>标签。表格的标题一般位于整个表格的第1行，一个表格只能含有一个表格标题。在<table></table>的内部，在<tr>的上侧，<caption>表格标题</caption>。

表格的表头<th>是<td>单元格的一种变体，它的本质还是一种单元格。它一般位于第一行，用来表明这一行或列的内容类别。表头有一种默认样式：浏览器会以粗体和居中的样式显示<th>元素中的内容。<th>标签和<td>在本质上都是单元格，但是并不代表这两种可以互换使用。这两者根本区别在于语义上。th，即“table header（表头单元格）”。而td，即“table data cell（单元格）”。

为了更深一层对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分：表头、表身、表脚。有了这三个标签，表格HTML代码语义更加良好，结构更加清晰。表格完整结构如下：
table 表格
caption 标题
thead 表头（语义划分）
tbody 表身（语义划分）
tfoot 表尾（语义划分）
tr 行
th 表头单元格
td 表格单元格

在设计表格时，有时需要将两个或更多的相邻单元格组合成一个单元格。在HTML中，这就需要用到“[表格合并行]”和“[表格合并列]。合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。

<td rowspan="跨度的行数">需要跨行合并的标签名</td>；
<td colspan="跨度的列数">需要跨列合并的标签名</td>

表格基本结构：<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。