如何在 HTML 中包含表格标题？

该 <caption> 元素用于向 HTML 表格添加标题。在 HTML 文档中，一个“标题”必须是父级“表格”的第一个后代元素，但它可以使用 CSS 将其从视觉上定位到表格的底部。

语法

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

该 <caption> 元素包含全局属性和已弃用的对齐属性（左、右、上、下）。该元素必须在打开表格标签后立即使用，因为它是表格标题。如果需要对图而不是表格加标题，请使用 <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>

输出

执行上述脚本后，它将创建表格并在表格顶部显示文本“student”，正如我们在 <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>

输出

执行此脚本后，它将创建一个表格及点击按钮。点击按钮后，将会触发标题，并在表格上方显示文本“students”。

更新于： 2022-09-05

浏览量 475

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告