HTML表格复习

简介

HTML 中的表格是一种非常常用的元素，它可以将信息以表格的形式展示，通常包括行和列，每个交叉点就是一个单元格。

以下是 HTML 中常用的表格标签和属性：

1. <table>：定义一个表格元素。

2. <tr>：定义表格中的一行。

3. <th>：定义表格中的表头单元格。

4. <td>：定义表格中的数据单元格。

5. <caption>：定义表格的标题。

6. rowspan：定义单元格横跨的行数。

7. colspan：定义单元格横跨的列数。

8. border：定义表格边框的宽度。

9. width：定义表格的宽度。

10. height：定义表格的高度。

11. bgcolor：定义表格的背景颜色。

下面是一个简单的 HTML 表格例子：

<table border="1">
  <caption>员工信息表</caption>
  <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>部门</th>
  </tr>
  <tr>
    <td>1</td>
    <td>张三</td>
    <td>25</td>
    <td>人事部</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
    <td>30</td>
    <td>技术部</td>
  </tr>
</table>

这个例子中，使用了 <table> 定义了一个表格，使用了 <caption> 定义了表格标题，使用了 <tr> 定义了表格中的行，使用了 <th> 和 <td> 定义了表头和数据单元格。使用了 border 定义了表格边框宽度。

详细讲解

一个基本的表格由<table>、<tr>、<th>和<td>标签组成。其中，<tr>标签表示表格的一行，<th>表示表格的表头单元格，<td>表示表格的数据单元格。例如，以下代码展示了一个基本的 HTML 表格：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

表格中的每个单元格可以通过rowspan和colspan属性进行合并，rowspan属性用于设置单元格横跨的行数，colspan属性用于设置单元格跨越的列数。例如，以下代码展示了一个跨行和跨列的表格：

<table>
  <tr>
    <throwspan="2">姓名</th>
    <thcolspan="2">年龄</th>
    <throwspan="2">性别</th>
  </tr>
  <tr>
    <td>起始年龄</td>
    <td>结束年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>30</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>35</td>
    <td>女</td>
  </tr>
</table>

在表格中，我们还可以使用thead、tbody和tfoot标签将表格分成不同的部分。thead表示表格的表头部分，tbody表示表格的主体部分，tfoot表示表格的页脚部分。例如，以下代码展示了一个带表头和页脚的表格：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <tdcolspan="3">总计</td>
    </tr>
  </tfoot>
</table>