如何在 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 次瀏覽

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.