表格

表格是 HTML 中用于展示结构化数据的重要元素。

基本表格结构

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

核心标签详解

1. <table> - 表格容器

定义整个表格

<table border="1">
  <!-- 表格内容 -->
</table>

2. <tr> - 表格行

定义表格中的一行

<tr>
  <td>单元格1</td>
  <td>单元格2</td>
</tr>

3. <td> - 表格数据单元格

定义标准数据单元格

<td>单元格内容</td>
<td colspan="2">跨2列</td>
<td rowspan="2">跨2行</td>

4. <th> - 表格标题单元格

定义表头单元格，默认加粗居中

<th>姓名</th>
<th scope="col">年龄</th> <!-- 列标题 -->
<th scope="row">总计</th> <!-- 行标题 -->

5. <thead> - 定义表格的页眉

6. <tbody> - 定义表格的主体

7. <tfoot> - 定义表格的页脚

8. <colgroup>``col - 对表格中的列进行组合，以便对其进行格式化

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

9. <caption> - 定义表格的标题

<table>
  <caption>
    侏罗纪时期的恐龙
  </caption>
  …
</table>

表格分组

<table>
  <caption>员工信息表</caption>
  
  <thead> <!-- 表头 -->
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>部门</th>
    </tr>
  </thead>
  
  <tbody> <!-- 表体 -->
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>技术部</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>市场部</td>
    </tr>
  </tbody>
  
  <tfoot> <!-- 表脚 -->
    <tr>
      <td colspan="2">总计</td>
      <td>2人</td>
    </tr>
  </tfoot>
</table>

重要属性

跨行跨列

<table border="1">
  <tr>
    <td rowspan="2">跨2行</td>
    <td>正常</td>
  </tr>
  <tr>
    <!-- 上一行已占用，此行少一个单元格 -->
    <td>正常</td>
  </tr>
  <tr>
    <td colspan="2">跨2列</td>
  </tr>
</table>

表格间距和边距

<table cellspacing="10" cellpadding="5" border="1">
  <tr>
    <td>单元格间距10px</td>
    <td>内边距5px</td>
  </tr>
</table>