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.
- Đ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ế.
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ế.
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.
- 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;
}