如何在 HTML 中顯示錶格單元格？

在本文中，我們將學習如何在 HTML 中顯示錶格單元格。在進入文章之前，讓我們先了解一下 HTML 表格。

當您想要組織看起來最適合電子表格的資料時，HTML 中的表格非常有用。表格是資料行和列的視覺表示。您可以使用表格將照片、文字、連結等資料組織到 HTML 中的單元格行和列中。

HTML 中的表格單元格

表格單元格可以跨越多列和多行，並且包含標題資訊以及資料。在 HTML 4 表格模式下，每個單元格都帶有標籤，非視覺使用者代理可以更有效地向用戶傳達資訊。<td> HTML 元素定義了一個包含資料的表格單元格。

它支援以下屬性：

屬性 值 描述
abbr abbreviated_text 已棄用 − 指定單元格中內容的縮寫版本。
align right left center justify char 已棄用 − 視覺對齊方式。
axis 名稱 已棄用 − 為該 td 指定一個類別。這可能用於對錶格資料執行查詢，並且在語音瀏覽器的上下文中可能很有用
bgcolor rgb(x,x,x) #hexcode 顏色名稱 已棄用 − 指定表格單元格的背景顏色。
char 字元 已棄用 − 指定要對齊文字的字元。在 align = "char" 時使用。
charoff 畫素或 % 已棄用 − 指定相對於使用 char 屬性指定的第一個字元的對齊偏移量（以畫素或百分比值表示）。在 align = "char" 時使用。
colspan 數字 指定當前單元格跨越的列數。
header ID 指定包含有關此單元格資訊的標題單元格的空格分隔列表。該值需要與標題單元格的 id 相對應（使用 id 屬性設定）。此屬性對於非視覺瀏覽器很有用。
height 畫素 已棄用 − 指定表格單元格的高度。
nowrap nowrap 已棄用 − 防止文字自動換行。
rowspan 數字 指定當前單元格跨越的行數。
scope col colgroup row rowgroup 已棄用 − 此屬性用於標題單元格，並指定將使用此標題資訊的單元格。
valign top middle bottom baseline 已棄用 − 垂直對齊方式。
width 畫素或 % 已棄用 − 指定表格單元格的寬度

讓我們看看以下示例以獲得更好的理解。

示例

在以下示例中，我們建立一個包含表格單元格的表格。

<!DOCTYPE html>
<html>
   <style>
      table {
         border:2px solid #F39C12;
      }
      th{
         border:2px solid #D1F2EB;
      }
      td{
         border:2px solid #D1F2EB;
      }
   </style>
<body>
   <table style="width:50%">
      <tr>
         <th>NAME</th>
         <th>COMPANY</th>
      </tr>
      <tr>
         <td>Varma</td>
         <td>Google</td>
      </tr>
      <tr>
         <td>Nikhil</td>
         <td>Infosys</td>
      </tr>
   </table>
</body>
</html>

執行上述指令碼後，輸出視窗彈出，在網頁上顯示包含上述指令碼中使用的資料的表格。

使用 Scope

此計數屬性指定了在 <th> 元素中定義的標題所涉及的單元格。要指定它是哪一行的標題或哪一列的標題，請僅與 <th> 元素結合使用此屬性。

示例

考慮到以下示例，我們使用 scope 建立表格單元格。

<!DOCTYPE html>
<html>
   <style>
      td,th {
         border: 2px solid #ABEBC6 ;
         padding: 10px;
      }
      th[scope="col"] {
         background-color:#5DADE2;
         color: #fff;
      }
      th[scope="row"] {
         background-color: #d7d9f2;
      }
      table {
         border-collapse: collapse;
         letter-spacing: 1px;
         font-family: sans-serif;
         font-size: .8rem;
      }
   </style>
<body>
   <table>
      <caption>PLAYERS AND THEIR TEAM</caption>
      <tr>
         <th scope="col">PLAYERS</th>
         <th scope="col"> IPL TEAM</th>
      </tr>
      <tr>
         <th scope="row">DHONI</th>
         <td>CSK</td>
      </tr>
      <tr>
         <th scope="row">RISHAB PANT</th>
         <td>DELHI CAPTIALS</td>
      </tr>
      <tr>
         <th scope="row">JOS BUTTLER</th>
         <td>RAJASTHAN ROYALS</td>
      </tr>
   </table>
</body>
</html>

當指令碼執行時，它將生成一個輸出，該輸出包含一個表格，其中包含單元格以及我們在指令碼中提到的網頁上的資料。

更新於： 2022-12-15

483 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告