Web Cơ Bản

Thẻ <tr> trong HTML

1) Giới thiệu "các thành phần cơ bản của một cái bảng"

- Thông thường, bảng là một phần tử gồm có các hàng và các ô.

(một bảng sẽ có nhiều hàng và một hàng thì sẽ có nhiều ô)

- Ví dụ: Bảng bên dưới có bốn hàng, mỗi hàng có bốn ô.

- Để tạo một bảng thì chúng ta phải sử dụng kết hợp các thẻ: <table>, <tr>, <td>, <th>

- Trong đó:

  • Thẻ <table> xác định phần tử là một cái bảng.
  • Thẻ <tr> xác định phần tử là một hàng trong bảng.
  • Thẻ <td> xác định phần tử là một ô trong hàng.
  • Thẻ <th> xác định phần tử là một ô tiêu đề trong hàng.
  • (ô tiêu đề là ô chữ được tô đậm nổi bật giống như: Họ và tên, ngày sinh, giới tính, quê quán)
Ví dụ:

- Đoạn mã phía dưới dùng để tạo một cái bảng giống như ví dụ phía trên


<table border="1">
    <tr>
        <th>Họ và tên</th>
        <th>Năm sinh</th>
        <th>Giới tính</th>
        <th>Quê quán</th>
    </tr>
    <tr>
        <td>Nguyễn Thành A</td>
        <td>1993</td>
        <td>Nam</td>
        <td>Cần Thơ</td>
    </tr>
    <tr>
        <td>Trần Văn B</td>
        <td>1985</td>
        <td>Nam</td>
        <td>Vĩnh Long</td>
    </tr>
    <tr>
        <td>Lê Thị C</td>
        <td>1990</td>
        <td>Nữ</td>
        <td>Sóc Trăng</td>
    </tr>
</table>
Xem ví dụ

2) Các thuộc tính được sử dụng trong thẻ <tr>

- Thẻ <tr> có ba thuộc tính thường hay được sử dụng nhất.

- Dưới đây là bảng mô tả sơ lượt về ba thuộc tính của thẻ <tr> :

align

Canh lề nội dung của ô (theo chiều ngang) của tất cả các ô trong hàng

valign

Canh lề nội dung của ô (theo chiều dọc) của tất cả các ô trong hàng

bgcolor

Thiết lập màu nền cho tất cả các ô trong hàng

2.1) Thuộc tính align

- Thuộc tính align dùng để canh lề nội dung của ô (theo chiều ngang) của tất cả các ô trong hàng.

- Thuộc tính align có bốn giá trị cơ bản:

left

Nội dung của ô sẽ được canh nằm phía bên trái

Xem ví dụ
right

Nội dung của ô sẽ được canh nằm phía bên phải

Xem ví dụ
center

Nội dung của ô sẽ được canh nằm ở giữa

Xem ví dụ
justify

Nội dung của ô sẽ được canh đều hai bên trái phải

Xem ví dụ

- Lưu ý: Thay vì sử dụng thuộc tính align của thẻ <tr> thì ta cũng có thể sử dụng thuộc tính text-align trong CSS để thay thế.

Ví dụ:

<tr style="text-align:right">
    ...
</tr>
Xem ví dụ

2.2) Thuộc tính valign

- Thuộc tính valign dùng để canh lề nội dung của ô (theo chiều dọc) của tất cả các ô trong hàng.

- Thuộc tính valign có ba giá trị cơ bản:

top Nội dung của ô sẽ được canh nằm phía trên Xem ví dụ
bottom Nội dung của ô sẽ được canh nằm phía dưới Xem ví dụ
middle Nội dung của ô sẽ được canh nằm ở giữa Xem ví dụ

- Lưu ý: Thay vì sử dụng thuộc tính valign của thẻ <tr> thì ta cũng có thể sử dụng thuộc tính vertical-align trong CSS để thay thế.

Ví dụ:

<tr style="vertical-align:top">
    ...
</tr>
Xem ví dụ

2.3) Thuộc tính bgcolor

- Thuộc tính bgcolor dùng để thiết lập màu nền cho tất cả các ô trong hàng.

Ví dụ:

- Các ô nằm trong hàng thứ hai của bảng bên dưới có nền màu vàng


<table border="1">
    <tr>
        <th>Họ và tên</th>
        <th>Năm sinh</th>
        <th>Giới tính</th>
        <th>Quê quán</th>
    </tr>
    <tr bgcolor="yellow">
        <td>Nguyễn Thành A</td>
        <td>1993</td>
        <td>Nam</td>
        <td>Cần Thơ</td>
    </tr>
    <tr>
        <td>Trần Văn B</td>
        <td>1985</td>
        <td>Nam</td>
        <td>Vĩnh Long</td>
    </tr>
    <tr>
        <td>Lê Thị C</td>
        <td>1990</td>
        <td>Nữ</td>
        <td>Sóc Trăng</td>
    </tr>
</table>
Xem ví dụ

3) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <tr> với định dạng CSS như sau:

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