十三 表格 Tables 二

在前面学习中，表格看起来挺复杂。从一维线条到二维格子的显现，代码相当困难。

其实非常简单，这多靠了rowspan和colspan属性。

看下面的代码：

<table border="1">

 <tr>
  <th>Column 1 heading</th>
  <th>Column 2 heading</th>
  <th>Column 3 heading</th>

 </tr>
 <tr>
  <td>Row 2, cell 1</td>
  <td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>

 </tr>
 <tr>
  <td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td>
  <td>Row 3, cell 2</td>

  <td>Row 3, cell 3</td>
 </tr>
 <tr>
  <td>Row 4, cell 2</td>
  <td>Row 4, cell 3</td>

 </tr>
</table>

首先在第一行，我们用th标签代替了td标签。td是个标准的数据单元，th是个头部单元。和td标签一样，要在tr标签里面。

在一些td标签里使用colspan和rowspan，在浏览器里你将会看到在第二行本来的三个单元已经变成两个，第二个单元包括第二和第三纵列。colspan属性的意思就是“纵列合并”，会合并指定数目的单元。意思就是说，在这个例子里，不需要第三个td标签，因为两个单元已经结合成一个。

rowspan属性和colspan很像，除了明显的它是合并行而不是纵列。合并的单元必须移除。在这个例子里，因为它合并了第四行，所以第四行只有两个单元。

如果制作3x4,12单元的表格，这个表格的合并单元数目还需增加。虽然例子只有10个单元，但又两个合并单元。