如何在 HTML 中添加表格标题？

<caption> 元素用于向 HTML 表格添加标题。"caption" 必须是 HTML 文档中父 "table" 的第一个子元素，但是可以使用 CSS 将其视觉上定位在表格底部。

语法

<caption>Table title...</caption>

<caption> 元素包含全局属性和已弃用的对齐属性 (left, right, top, bottom)。此元素必须在表格标签打开后立即使用，因为它是一个表格标题。如果需要为图片而不是表格添加标题，请使用 <figcaption>。

以下是一些示例……

示例

在下面的示例中，我们默认将标题添加到表格，并将其居中对齐。

<!DOCTYPE html>
<html>
<style>
   table, th, td {
      border: 1px solid black;
   }
</style>
<body>
   <table>
      <caption>STUDENTS</caption>
      <tr>
         <th>Firstname</th>
         <th>Lastname</th>
         <th>Age</th>
      </tr>
      <tr>
         <td>siddarth</td>
         <td>Roy</td>
         <td>21</td>
      </tr>
      <tr>
         <td>Arjun</td>
         <td>Reddy</td>
         <td>22</td>
      </tr>
      <tr>
         <td>Sing</td>
         <td>Roy</td>
         <td>23</td>
      </tr>
   </table>
</body>
</html>

输出

执行上述脚本后，它将在表格顶部创建表格和文本“学生”，正如我们在 <caption> 标记之间提到的那样。

示例：使用 JavaScript

现在，让我们来看一个使用 JavaScript 的示例：

<!DOCTYPE html>
<html>
<body>
   <table id="myTable" border="1">
      <tr>
         <th>Firstname</th>
         <th>Lastname</th>
      </tr>
      <tr>
         <td>Siddarth</td>
         <td>Roy</td>
      </tr>
      <tr>
         <td>Arjun</td>
         <td>Reddy</td>
      </tr>
   </table>
   <form>
      <input type="button" onclick="caption()" value="Click">
   </form>
</body>
<script type="text/javascript">
   function caption(){
      var x=document.getElementById('myTable').createCaption()
      x.innerHTML="<b>STUDENTS</b>"
   }
</script>
</html>

输出

执行脚本后，它将创建一个表格和一个点击按钮。单击按钮后，标题将被触发，并在表格顶部显示文本“学生”。

更新于：2022年9月5日

475 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告