表格标签——HTML5学习笔记（5）

6.1表格的主要作用

• 展示数据

6.2表格的基本语法

<table>
  <tr> //定义行
    <td>第一行第一列单元格内的文字</td> //定义列
    <td>第一行第二列单元格内的文字</td>
  </tr>
  <tr>
    <td>第二行第一列单元格内的文字</td>
    <td>第二行第二列单元格内的文字</td>
  </tr>
</table>  

特点：

• 单元格内可以放文字、图片、链接等任何元素。

6.3表头单元格标签

<table>
  <tr> //定义行
    <th>表头1：姓名</th> //定义表头
    <th>表头2：性别</th>
  </tr>
  <tr>
    <td>小月</td>
    <td>女</td>
  </tr>
</table>  

特点：

• 表头内的文本居中且加粗。

6.4表格的属性

• 位置：align="center"
• 边框：border="1"
• 单元格与内部文字距离：cellpadding
• 单元格与单元格间距：cellspacing

更多在CSS里设置，此处略。

6.5表格结构标签

• 为了更好地表示语义，可以将表格分成表格头部和表格主体。
• 表格头部区域：<thead> 内部必须有<tr>
• 表格主体区域：<tbody>
• 例：

<table> //头部区域
  <thead>
      <tr> //定义行
        <th>表头1：姓名</th> //定义表头
        <th>表头2：性别</th>
      </tr>
  </thead>
  <tbody> //主体区域
      <tr>
        <td>小月</td>
        <td>女</td>
      </tr>
  </tbody>
    </table>  

6.6合并单元格

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”
• 目标单元格：
  • 跨行：要跨行的单元格中最上侧单元格写合并代码。
  • 跨列：要跨行的单元格中最左侧单元格写合并代码。
• 步骤：
  • 确定跨行/列。
  • 找到目标单元格，写合并代码。如<td colspan="2"></td>
  • 删除多余的单元格。如一个两行三列的表格，将第一行的第二第三列合并后，需要将多出来的第一行的第三列单元格删除。