HTML - <table> 標籤

HTML <table> 標籤用於構建 HTML 表格。表格資料預設左對齊。HTML 表格提供了一種機制，可以根據單元格的行和列來定義或匯出資料，包括文字、照片、連結和其他型別的資料。

HTML <table> 元素與一個或多個 <tr>、<th> 和 <td> 元素一起構成 HTML 表格。<tr> 元素定義表格行，<th> 元素定義表格表頭，<td> 元素定義表格單元格。用於控制頁面佈局，例如標題部分、導航欄、正文和頁尾部分。

語法

<table>
  .....
</table>

屬性

HTML 表格標籤支援全域性和事件 HTML 屬性。以下提到的屬性已棄用，因此應使用 CSS 屬性而不是這些屬性。

屬性	值	描述
align	left right center justify	指定文字內容的對齊方式（已棄用）。
bgcolor	color	指定每列單元格的背景顏色（已棄用）。
border	畫素	指定表格周圍的邊框。（已棄用）。
cellpadding	畫素	單元格內容與其邊框之間的間距（已棄用）。
cellspacing	畫素	指定兩個單元格之間的間距。（已棄用）。
frame	void above below hsides vsides lhs rhs box border	指定必須顯示的表格周圍框架的側面（已棄用）。
rules	none groups cols all	定義在表格中顯示規則（邊框）的位置（已棄用）。
summary	text	指定總結表格內容的替代文字（已棄用）。
width	畫素	指定表格的寬度（已棄用）。

HTML 表格標籤示例

下面的例子將說明表格標籤的使用。在哪裡、何時以及如何使用表格標籤以及如何設定表格樣式。

建立簡單的表格

讓我們考慮以下示例，我們將構建一個簡單的表格。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #6C3483;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Employee</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Maya</td>
         <td>32k</td>
      </tr>
      <tr>
         <td>Raju</td>
         <td>25k</td>
      </tr>
      <tr>
         <td>Rahul</td>
         <td>20k</td>
      </tr>
   </table>
</body>
</html>

表格內填充

考慮另一種情況，我們將向表格新增填充。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #82E0AA;
      }
      th,
      td {
         padding: 11px;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Cars</th>
         <th>Owners</th>
      </tr>
      <tr>
         <td>BMW</td>
         <td>Raju</td>
      </tr>
      <tr>
         <td>RS7</td>
         <td>Ravi</td>
      </tr>
      <tr>
         <td>Audi</td>
         <td>Maya</td>
      </tr>
   </table>
</body>
</html>

使用 CSS 進行表格對齊

在下面的示例中，我們將使用 CSS 屬性使表格右對齊。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #ABEBC6;
      }
   </style>
<body>
   <table style="float:right">
      <tr>
         <th>Team</th>
         <th>Points</th>
      </tr>
      <tr>
         <td>CSK</td>
         <td>16</td>
      </tr>
      <tr>
         <td>MI</td>
         <td>14</td>
      </tr>
      <tr>
         <td>RR</td>
         <td>14</td>
      </tr>
      <tr>
         <td>KKR</td>
         <td>12</td>
      </tr>
   </table>
   <p><br><br>
      The Indian Premier League is a men's Twenty20 cricket 
      league that is annually held in India and contested by 
      ten city-based franchise teams. The BCCI founded the 
      league in 2007.
   </p>
</body>
</html>

表格背景顏色

下面是一個示例，我們將向表格新增背景顏色。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1px solid #6C3483;
      }
   </style>
<body>
   <table style="background-color:#ABEBC6 ">
      <tr>
         <th>Owner</th>
         <th>Pet</th>
      </tr>
      <tr>
         <td>Maya</td>
         <td>Cat</td>
      </tr>
      <tr>
         <td>Raju</td>
         <td>Dog</td>
      </tr>
      <tr>
         <td>Ravi</td>
         <td>Pomeranian</td>
      </tr>
   </table>
</body>
</html>

支援的瀏覽器

標籤
table	是	是	是	是	是

html_tags_reference.htm

列印頁面