HTML - <tr> 標籤

在 HTML 表格中，一行由<tr>標籤定義。然後可以使用 <td> 和 <th> 元素的組合來建立行的單元格。

每個 <tr> 標籤可以有一個或多個 <th> 標籤，用於指定表格的表頭單元格，或者有一個或多個 <td> 標籤，用於定義表格的標準單元格。<tr> 標籤可以是 <thead>、<tbody> 和 <tfoot> 元素的巢狀子元素，也可以是 <table> 元素的直接子元素。

語法

<tr>
   ....
</tr>

屬性

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

屬性	值	描述
align	left right center justify	指定文字內容的對齊方式（已棄用）。
bgcolor	color	指定每個列單元格的背景顏色（已棄用）。
char	character	指定每個列單元格內容相對於某個字元的對齊方式（已棄用）。
charoff	number	指定列單元格內容相對於由 char 屬性指定的對齊字元的偏移字元數（已棄用）。
valign	baseline bottom middle top	指定每個列單元格的垂直對齊方式（已棄用）。

HTML tr 標籤示例

以下示例將說明 tr 標籤的使用。在何處、何時以及如何使用 tr 標籤來建立表格行。

建立簡單的 HTML 表格

讓我們考慮以下示例，我們將使用 <tr> 標籤建立三行，一行表頭行和兩行資料行。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.25px solid #DE3163;
      }
   </style>
<body>
   <table>
      <tr>
         <th>University</th>
         <th>Place</th>
      </tr>
      <tr>
         <td>LPU</td>
         <td>Punjab</td>
      </tr>
      <tr>
         <td>Amity</td>
         <td>Noida</td>
      </tr>
      <tr>
      <td>Amrutha</td>
      <td>Coimbatore</td>
      </tr>
   </table>
</body>
</html>

在表格行上新增背景顏色

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

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Bike</th>
         <th>Owner</th>
      </tr>
      <tr style="background-color:#D5F5E3;">
         <td>RX100</td>
         <td>Ravi</td>
      </tr>
      <tr style="background-color:#D2B4DE ;">
         <td>Continental</td>
         <td>Arjun</td>
      </tr>
   </table>
</body>
</html>

對齊表格行內容

在以下示例中，我們將使用 CSS 將 <tr> 標籤對齊到中心。

<!DOCTYPE html>
<html>
   <style>
      table,
         th,
         td {
            border: 1.5px solid #A569BD;
         }
   </style>
<body>
   <table style="width:100%">
      <tr>
         <th>Country</th>
         <th>Capital</th>
      </tr>
      <tr style="text-align:center">
         <td>Afghanistan</td>
         <td>Kabul</td>
      </tr>
      <tr style="text-align:center">
         <td>Albania</td>
         <td>Tirane</td>
      </tr>
   </table>
</body>
</html>

跨越多行和多列

以下是一個示例，我們將使用 tr 標籤上的 rowspan 和 colspan 來操作表格行的區域。

<!DOCTYPE html>
<html>
   <style>
      th,
      td {
         border: 1.5px solid #A569BD;
      }
      table {
         border-collapse: collapse;
      }
   </style>
<body>
   <table>
      <tr>
         <th rowspan=2>Name</th>
         <th colspan=2>Contact Details</th>
      </tr>
      <tr>
         <th>Mobile</th>
         <th>Landline</th>
      </tr>
      <tr>
         <td>Suresh</td>
         <td>0987654321</td>
         <td>123456</td>
      </tr>
      <tr>
         <td>Ramesh</td>
         <td>1256789543</td>
         <td>234562</td>
      </tr>
      <tr>
         <td>Kamal</td>
         <td>88976765432</td>
         <td>009875242</td>
      </tr>
   </table>
</body>
</html>

支援的瀏覽器

標籤
tr	是	是	是	是	是

html_tags_reference.htm

列印頁面

上一個

下一個