HTML表格标题|极客笔记

HTML表格标题

在HTML中，表格是一种用于展示数据的常见元素。为了更好地组织和呈现数据，有时候我们需要在表格中添加标题。本文将介绍如何在HTML中为表格添加标题，并提供相关的示例代码。

如何为表格添加标题

在HTML中，我们可以使用<caption>标签来为表格添加标题。<caption>标签必须位于<table>标签的第一个子元素，并且会在表格顶部显示。

<table>
  <caption>这是一个表格标题</caption>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

上面的示例代码中，<table>标签内部包含了<caption>标签，并且在表格中显示了一个标题为”这是一个表格标题”的标题。

示例代码

示例1：简单的带标题的表格

<table>
  <caption>学生信息</caption>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
    <td>男</td>
  </tr>
</table>

示例2：带有多行标题的表格

<table>
  <caption>订单统计信息</caption>
  <tr>
    <th>日期</th>
    <th>产品名称</th>
    <th>销售数量</th>
  </tr>
  <tr>
    <td>2021-01-01</td>
    <td>产品A</td>
    <td>100</td>
  </tr>
</table>

示例3：带有标题和边框的表格

<table border="1">
  <caption>员工信息</caption>
  <tr>
    <th>员工编号</th>
    <th>姓名</th>
    <th>部门</th>
  </tr>
  <tr>
    <td>001</td>
    <td>王五</td>
    <td>人事部</td>
  </tr>
</table>