HTML—表格

一.基本结构

   在HTML中，一个表格一般由以下3部分组成。

     表格：table标签； 

     行：tr标签；

     单元格：td标签。

语法：

<table>
     <tr>
         <td>单元格1</td>
         <td>单元格2</td>
     </tr>
     <tr>
         <td>单元格3</td>
         <td>单元格4</td>
     </tr>
</table>

    ***说明：在表格中，有多少组“<tr></tr>",就表示有多少行。 

eg:

 

       ***分析：在默认情况下，表格是没有边框的。使用css加入边框，是想让大家清楚地看到一个表格结构。

二.完整结构

    一个表格的“完整结构”不是只有table、tr、td,还包括caption、th等。

1.表格标题：caption

   语法：

<table>
    <caption>表格标题</caption>
    <tr>
       <td>单元格1</td>
       <td>单元格2</td>
    </tr>
    <tr>
       <td>单元格3</td>
       <td>单元格4</td>
    </tr>
<table>

     ***一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题位于整个表格的第一行。

eg:

 

 

2.表头单元格：th

  在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。

   语法：

<table> 
    <caption>表格标题</caption>
    <tr>
       <th>表头单元格1</th>
       <th>表头单元格2</th>
    </tr>
    <tr>
       <td>表行单元格1</td>
       <td>表行单元格2</td>
    </tr>
    <tr>
       <td>表行单元格3</td>
       <td>表行单元格4</td>
    </tr>
</table>

 ***说明：th和td在本质上都是单元格，但是并不代表两者可以互换，它们具有以下区别。

               显示上：浏览器会以“粗体”和“居中”来显示th标签中的内容，但是td标签不会。

                语义上:th标签用于表头，而td标签用于表行。

  eg:

 

 三.语义化

    一个完整的表格包含：table、caption、tr、th、td。为了更进一步地对表格进行语义化，HTML引入了thead、tbody和tfoot这3个标签。将表格划分为3部分：表头、表身、表脚。

语法：

<table> 
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr> 
           <th>表头单元格1</th>
           <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
       <tr>
          <td>表行单元格1</td>
          <td>表行单元格2</td>
       </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
       <tr>
          <td>标准单元格5</td>
          <td>标准单元格6</td>
       </tr>
    </tfoot>
</table>

    eg: 

 

     ***分析：表脚往往用于统计数据。此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用 ：方便分块来控制表格的CSS样式。

四.合并行：rowspan

     在HTML中，我们可以使用rowspan属性来合并。所谓的合并行，指的是将“纵向的n个单元格”合并。

   语法：

<td rowspan="跨域的行数"></td>

 eg: 

 

 五.合并列：colspan

     在HTML中，我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的n个单元格”合并。

     语法：

<td colspan="跨域的列数"></td>

    eg:

 

      ***分析：若将colspan="2"删除，效果就会变成如下：