如何在 HTML 中顯示錶格主體？

在 HTML 中使用<tbody>標籤來顯示錶格主體。HTML <tbody> 標籤用於向表格新增主體。tbody 標籤與 thead 標籤和 tfoot 標籤一起使用，以確定表格的每個部分（表頭、表尾、主體）。以下是 <tbody> 標籤的屬性：

屬性

值

描述

align

右

左

居中

兩端對齊

char

已棄用 - 可視對齊。

char

字元

已棄用 - 指定要對其文字的字元。當 align = "char" 時使用。

charoff

畫素或 %

已棄用 - 指定相對於使用 char 屬性指定的第一個字元的對齊偏移量（以畫素或百分比值）。當 align = "char" 時使用。

valign

頂部

中間

底部

基線

已棄用 - 垂直對齊。

示例

以下是顯示 HTML 表格主體的示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>html</title>
   <style>
      table {
         border-collapse: collapse;
      }

      td,
      th {
         border: 3px solid red;
      }

      thead {
         color: blue;
      }

      tfoot {
         background-color: yellow;
      }
   </style>
</head>
<body>
   <table>
      <caption align="bottom">World Cup Tennies</caption>
      <!--Caption*/ -->
      <tbody>
         <thead>
            <tr>
               <th rowspan="2">Date</th>
               <th colspan="2">Final Match</th>
               <th rowspan="2">Location</th>
            <tr>
               <th>Team A</th>
               <th>Team B</th>
            </tr>
         </thead>
         <tr>
            <td>20-10-2022</td>
            <td>India</td>
            <td>England</td>
            <td>Australia</td>
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <th colspan="2">Final Score</th>
            <th>India - 1</th>
            <th>England - 0</th>
         </tr>
      </tfoot>
   </table>
</body>
</html>

示例

以下示例演示如何在 HTML 中顯示錶格主體：

<!DOCTYPE html>
<html>
<head>
   <title>HTML tbody Tag</title>
</head>
<body>
   <table style="width:100%" border="1">
      <thead>
         <tr>
            <td colspan="4">This is the head of the table</td>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <td colspan="4">This is the foot of the table</td>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
         </tr>
         <tr> Each row containing four cells... </tr>
      </tbody>
      <tbody>
         <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

更新於： 2023年10月10日

776 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告