HTML 表格标题

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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



Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html(("`HTML`")) -.-> html/TablesGroup(["`Tables`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/MultimediaandGraphicsGroup -.-> html/fig_cap("`Figure and Caption Association`") html/TablesGroup -.-> html/tables("`Table Structure`") html/TablesGroup -.-> html/tbl_access("`Table Accessibility`") subgraph Lab Skills html/basic_elems -.-> lab-70721{{"`HTML 表格标题`"}} html/fig_cap -.-> lab-70721{{"`HTML 表格标题`"}} html/tables -.-> lab-70721{{"`HTML 表格标题`"}} html/tbl_access -.-> lab-70721{{"`HTML 表格标题`"}} end

创建一个基本表格

第一步,使用 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 属性,我们可以为标题添加样式。

您可能感兴趣的其他 HTML 教程