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

在這篇文章中，我們將學習如何在 HTML 中顯示錶格單元格。在深入瞭解文章之前，讓我們先看看 HTML 表格。

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

HTML 中的表格單元格

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

它支援以下屬性：

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

讓我們看看以下示例以更好地理解。

示例

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

<!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 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告