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

htmlweb developmentfront end technology更新于 2025/4/10 2:20:17

<caption> 元素用于为 HTML 表格添加标题。"标题"必须是 HTML 文档中父"表格"的第一个子元素，但可以使用 CSS 将其可视化地放置在表格底部。

语法

<caption> 表格标题...</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>