HTML - <td>標籤

HTML <td> 標籤用於定義表格的資料單元格，它是<tr> 元素的子元素。<td> 標籤可以包含文字、表單、影像、表格等。

預設情況下，其內部內容靠左對齊。表格每一行的單元格數量與最長行的單元格數量相同。如果某一行單元格數量較少，瀏覽器會自動填充該行，在行尾新增空單元格。

為了在表格中呈現表格資料，每個資料單元格都必須作為單獨的 <td> 元素新增。

語法

<table>
   <tr>
      <td>..</td>
      <td>..</td>
      ...
   </tr>
</table>

屬性

屬性	值	描述
colspan	數字	指定列數。
headers	header_id	指定單元格關聯的一個或多個表頭單元格。
rowspan	數字	指定單元格應占據的行數。

HTML td 標籤示例

下面的示例將演示 td 標籤的用法，包括何時何地以及如何使用 td 標籤以及如何設定表格單元格的樣式。

建立簡單的表格

讓我們考慮以下示例，我們將使用 <td> 標籤。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #5DADE2;
      }
   </style>
<body>
   <table>
      <tr>
         <td>1</td>
         <td>2</td>
      </tr>
      <tr>
         <td>3</td>
         <td>4</td>
      </tr>
      <tr>
         <td>5</td>
         <td>6</td>
      </tr>
   </table>
</body>
</html>

設定表格單元格的背景顏色

考慮另一種情況，我們將向 <td> 標籤應用背景顏色。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #A569BD;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Stundent</th>
         <th>Age</th>
      </tr>
      <tr>
         <td style="background-color:#BFC9CA">Ram</td>
         <td style="background-color:#F9E79F ">23</td>
      </tr>
      <tr>
         <td style="background-color:#BFC9CA ">Raju</td>
         <td style="background-color:#F9E79F ">22</td>
      </tr>
   </table>
</body>
</html>

對齊表格單元格

在下面的示例中，我們將使用 CSS 將 <td> 標籤居中對齊。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table style="width:100%">
      <tr>
         <th>Cars</th>
         <th>Country</th>
      </tr>
      <tr>
         <td>Toyota</td>
         <td style="text-align:center">Japan</td>
      </tr>
      <tr>
         <td>Nissan</td>
         <td style="text-align:center">France</td>
      </tr>
      <tr>
         <td>Kia</td>
         <td style="text-align:center">South Korea</td>
      </tr>
   </table>
</body>
</html>

設定表格單元格的寬度

以下是一個示例，我們將使用 CSS 調整表格單元格的寬度。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #8E44AD;
      }
   </style>
<body>
   <table style="width:100%">
      <tr>
         <th>Student</th>
         <th>Department</th>
      </tr>
      <tr>
         <td style="width:40%">Ram</td>
         <td style="width:60%">Information Technology</td>
      </tr>
      <tr>
         <td>Rahul</td>
         <td>Voice Process</td>
      </tr>
      <tr>
         <td>Maya</td>
         <td>Non-Voice Process</td>
      </tr>
   </table>
</body>
</html>

支援的瀏覽器

標籤
tbody	是	是	是	是	是

html_tags_reference.htm

列印頁面