第6章 表格table

一、基本的表格结构 table 和 tr、td标签

<table>
    <tr>                               <!--用tr标签开始和结束一个行，tr即指 table row-->
        <td>姓名</td>                   <!--用td标签开始和结束一个单元格，td即指 table data-->
        <td>电话</td>
        <td>住址</td>
    </tr> 

    <tr>
        <td>夏洛克.福尔摩斯</td>
        <td>12345678</td>
        <td>伦敦市贝克街221号B</td>
    </tr> 

    <tr>
        <td>弗兰克</td>
        <td>87654321</td>
        <td>伦敦市查令十字街84号</td>
    </tr> 
    
</table>

姓名	电话	住址
夏洛克.福尔摩斯	12345678	伦敦市贝克街221号B
弗兰克	87654321	伦敦市查令十字街84号

 

 

二、表格的标题 <th>

<th>元素和<td>元素的用法一样，但它的作用是表示列或行的标题。（th即指table heading）如下：

       

注意：

（1）即使一个单元格中没有任何内容，你仍需使用<td>或<th>元素来表示一个空单元格的存在，否则该表将无法正确呈现。在上面示例中，第一行第一个单元格就显示为一个空单元格。

（2）可在<th>元素上使用scope特性来表明此元素是列标题还是行标题。即row为行标题，col为列标题。

 

 

三、跨列

有时需要一个单元格横跨多个列（类似于Excel的合并单元格）。需要用到<th>或<td>的colspan特性来指定跨多少列。如下所示：

 

注意：上例中总共应该是5列。“Geography”单元格横跨2列，Gym单元格横跨3列。所以第二行、第三行的<th>和<td>标签个数都和第一行不一样。。这正是因为有单元格跨列的原因。

 

四、跨行

有时需要一个单元格竖跨多个行。需要用到<th>或<td>的rowspan特性来指定跨多少行。如下所示：