10-表格标签¶

表格¶

结构图

alt text

代码示例

<!-- 表格 -->
<table>
  <!-- 表头 -->
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>

  <!-- 主要内容 -->
  <body>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
  </body>

  <!-- 表尾 -->
  <tfoot>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
  </tfoot>
</table>
</table>

<table> 表格标签
<thead> 表头标签
<th> 表头单元格标签，文字加粗居中
<tr> 行标签
<td> 单元格标签
<body> 内容标签
<tfoot> 表尾标签，再开发中不经常使用

表格合并¶

代码示例

<!-- 表格 -->
<table>
  <!-- 表头 -->
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>

  <!-- 主要内容 -->
  <body>
    <tr>
      <td rowspan="2">单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
    <tr>
      <td colspan="2">单元格4</td>
    </tr>
  </body>
</table>

rowspan 跨行合并，合并单元格的行数
colspan 跨列合并，合并单元格的列数
左上原则，合并的单元格需要写到左上角的单元格中

alt text