如何在 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

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告
© . All rights reserved.