Thẻ <table> 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ẻ <table>
- Thẻ <table> có tám 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ề tám thuộc tính của thẻ <table> :
align | Xác định vị trí của bảng so với các văn bản xung quanh |
bgcolor | Thiết lập màu nền cho bảng |
border | Thiết lập đường viền cho bảng cũng như các ô trong bảng |
cellpadding | Xác định khoảng cách từ nội dung của ô đến đường viền của ô |
cellspacing | Xác định khoảng cách từ đường viền của ô cho đến các ô xung quanh |
frame | Xác định những phần đường viền nào của bảng sẽ được hiển thị |
rules | Xác định những phần đường kẻ nào nằm bên trong bảng sẽ được hiển thị |
width | Xác định chiều rộng của bảng |
2.1) Thuộc tính align
- Thuộc tính align dùng để xác định vị trí của bảng so với các văn bản xung quanh.
- Thuộc tính align có ba giá trị:
left | Bảng sẽ được đẩy sang trái |
Xem ví dụ |
right | Bảng sẽ được đẩy sang phải |
Xem ví dụ |
center | Bảng sẽ được đẩy ra giữa |
Xem ví dụ |
- Ngoài việc sử dụng thuộc tính align thì ta cũng có thể dùng thuộc tính float trong CSS để thay thế.
2.2) Thuộc tính bgcolor
- Thuộc tính bgcolor dùng để thiết lập màu nền cho bảng.
- Nền của bảng bên dưới có màu vàng
<table border="1" bgcolor="yellow">
...
</table>
Xem ví dụ
2.3) Thuộc tính border
- Thuộc tính border dùng để thiết lập đường viền cho bảng cũng như các ô trong bảng.
- Thuộc tính border có hai giá trị:
0 (đây là giá trị mặc định) | Bảng và các ô trong bảng không có đường viền |
1 | Bảng và các ô trong bảng có đường viền |
2.4) Thuộc tính cellpadding
- Thuộc tính cellpadding xác định khoảng cách từ nội dung của ô đến đường viền của ô.
(mặc định thì giá trị của thuộc tính cellpadding được tính theo đơn vị pixel)
- Nội dung bên trong ô cho đến đường viền của ô sẽ có khoảng cách là 30px
<table border="1" cellpadding="30">
...
</table>
Xem ví dụ
2.5) Thuộc tính cellspacing
- Thuộc tính cellspacing xác định khoảng cách từ đường viền của ô cho đến các ô xung quanh.
(mặc định thì giá trị của thuộc tính cellspacing được tính theo đơn vị pixel)
- Đường viền của ô cho đến các ô xung quanh sẽ có khoảng cách là 30px
<table border="1" cellspacing="30">
...
</table>
Xem ví dụ
2.6) Thuộc tính frame
- Thuộc tính frame xác định những phần đường viền nào của bảng sẽ được hiển thị.
- Thuộc tính frame sẽ có các giá trị sau:
void | Cả bốn đường viền của bảng đều KHÔNG được hiển thị |
above | Đường viền phía trên của bảng sẽ được hiển thị |
below | Đường viền phía dưới của bảng sẽ được hiển thị |
lhs | Đường viền bên trái của bảng sẽ được hiển thị |
rhs | Đường viền bên phải của bảng sẽ được hiển thị |
vsides | Đường viền bên trái và bên phải của bảng sẽ được hiển thị |
hsides | Đường viền phía trên và phía dưới của bảng sẽ được hiển thị |
box | Cả bốn đường viền của bảng đều được hiển thị |
border | Cả bốn đường viền của bảng đều được hiển thị |
2.7) Thuộc tính rules
- Thuộc tính rules xác định những phần đường kẻ nào nằm bên trong bảng sẽ được hiển thị.
- Thuộc tính rules sẽ có các giá trị sau:
none | Không có đường kẻ nào được hiển thị |
rows | Chỉ những đường kẻ ngang được hiển thị |
cols | Chỉ những đường kẻ dọc được hiển thị |
all | Tất cả các đường kẻ ngang và dọc đều được hiển thị |