HTML的10个表格相关标记

下面就给您详细讲解一下“HTML的10个表格相关标记”的攻略。

1. <table> 标签

<table> 标签用于创建表格。在 <table> 标签中，可以使用 <tr> 标签表示表格行，使用 <td> 标签表示表格中的单元格。

示例：

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

2. <caption> 标签

<caption> 标签用于给表格添加标题。这个标题会位于表格上方的中间位置。

示例：

<table>
  <caption>表格标题</caption>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

3. <thead>、<tbody> 和 <tfoot> 标签

<thead>、<tbody> 和 <tfoot> 标签用于将表格分成表头、表身和表尾三部分。其中，表头和表尾通常只有一行，表身可以有多行。

示例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>电话</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>20</td>
      <td>123456789</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>22</td>
      <td>987654321</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>2人</td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

4. <th> 标签

<th> 标签用于定义表头单元格。默认情况下，表格单元格中的文本内容居中并加粗显示。

示例：

<table>
  <tbody>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>电话</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>123456789</td>
    </tr>
  </tbody>
</table>

5. <td> 标签

<td> 标签用于定义表格中的单元格。

示例：

<table>
  <tbody>
    <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
    </tr>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
    </tr>
  </tbody>
</table>

6. <col> 和 <colgroup> 标签

<col> 和 <colgroup> 标签用于定义表格中的列。可以使用 <col> 标签为某一列设置属性，比如宽度、背景色等；也可以使用 <colgroup> 标签为多列设置属性。

示例：

<table>
  <colgroup>
    <col style="background-color:red;">
    <col style="background-color:blue;">
  </colgroup>
  <tbody>
    <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
    </tr>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
    </tr>
  </tbody>
</table>

7. rowspan 和 colspan 属性

rowspan 和 colspan 属性用于定义单元格是否横跨多行或多列。

示例：

<table>
  <tbody>
    <tr>
      <td rowspan="2">第一列</td>
      <td>第一行第二列</td>
      <td>第一行第三列</td>
    </tr>
    <tr>
      <td colspan="2">第二行合并的单元格</td>
    </tr>
  </tbody>
</table>

8. align 和 valign 属性

align 和 valign 属性用于水平和垂直对齐表格单元格中的文本。

示例：

<table>
  <tbody>
    <tr>
      <td align="center" valign="middle">居中显示</td>
      <td align="right" valign="top">右对齐</td>
    </tr>
  </tbody>
</table>

9. border 和 cellpadding/cellspacing 属性

border 属性用于定义表格边框的粗细程度，cellpadding 和 cellspacing 属性用于定义表格单元格与边框之间的距离。

示例：

<table border="1" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
    </tr>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
    </tr>
  </tbody>
</table>

10. 表格的排序

表格的排序可以通过 JavaScript 实现，大致的思路是：在表格中加入一个排序按钮，当用户点击按钮时，根据用户的选项对表格数据进行排序，并重绘表格。

示例代码可以参考 W3Schools 的教程。