HTML 表格标题：一步步教程

介绍

在 HTML 中，<caption> 标签用于为表格添加标题或说明。本实验将逐步指导你如何在 HTML 中创建表格并为其添加标题。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

创建一个基础表格

第一步，使用 table 标签创建一个包含一些数据的基本表格。以下是一个示例：

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

为表格添加标题

要为表格添加标题，只需在 <table> 标签开始后、表格行之前插入 <caption> 标签。以下是一个示例：

<table>
  <caption>
    Employee Information
  </caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

为标题添加样式

要为标题添加样式，可以在 <caption> 标签中使用 style 属性。以下是一个示例：

<table>
  <caption style="color: blue; font-size: 20px;">
    Employee Information
  </caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

总结

在 HTML 中，<caption> 标签用于为表格添加标题或说明。<caption> 标签应放在 <table> 标签内，紧接在 <table> 开始标签之后。标题是对表格的简短描述，用于解释表格的用途，帮助你理解其目的。要为表格添加标题，只需在 <table> 开始标签后、表格行之前插入 <caption> 标签。通过在 <caption> 标签中使用 style 属性，我们可以为标题添加样式。