Thẻ <tr> HTML


Thí dụ

Một bảng HTML đơn giản với ba hàng; một hàng tiêu đề và hai hàng dữ liệu:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Thêm các ví dụ "Hãy tự mình thử" bên dưới.


Định nghĩa và Cách sử dụng

Thẻ <tr>xác định một hàng trong bảng HTML.

Một <tr>phần tử chứa một hoặc nhiều phần tử <th> hoặc <td> .


Hỗ trợ trình duyệt

Element
<tr> Yes Yes Yes Yes Yes

Thuộc tính toàn cầu

Thẻ <tr>cũng hỗ trợ Thuộc tính chung trong HTML .


Thuộc tính sự kiện

Thẻ <tr>cũng hỗ trợ Thuộc tính sự kiện trong HTML .



Các ví dụ khác

Thí dụ

Cách căn chỉnh nội dung bên trong <tr> (với CSS):

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr style="text-align:right">
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Thí dụ

Cách thêm màu nền vào một hàng trong bảng (với CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
 </table>

Thí dụ

Cách căn chỉnh theo chiều dọc nội dung bên trong <tr> (với CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Thí dụ

Cách tạo tiêu đề bảng:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
  </tr>
</table>

Thí dụ

Cách tạo bảng với chú thích:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Thí dụ

Cách xác định các ô trong bảng kéo dài nhiều hơn một hàng hoặc một cột:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table>

Các trang liên quan

Hướng dẫn HTML: Bảng HTML

Tham chiếu DOM HTML: Đối tượng TableRow

Hướng dẫn CSS: Bảng tạo kiểu


Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị <tr>phần tử với các giá trị mặc định sau:

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}