1 Thêm ngữ nghĩa cho bảng
Thêm tiêu đề/mô tả cho bảng
Sử dụng phần tử caption để thêm tiêu đề hoặc mô tả vắn tắt cho bảng. Phần tử caption phải nằm ngay sau thẻ <table>, mỗi bảng chỉ cho phép có một phần tử caption. Nhắc lại là luôn dùng các phần tử chuẩn để đảm bảo ngữ nghĩa cho nội dung, vì thực tế không phải chỉ có người dùng đọc nội dung trang web, mà còn có rất nhiều các hệ xử lý tự động khác.
Mặc định, tiêu đề/mô tả vắn tắt sẽ được đặt ở trên đầu bảng, tuy nhiên, có thể thay đổi vị trí hiển thị của nó bằng CSS.
Ví dụ,
[HTML]
…
<table border="1">
<caption>Bảng điểm sinh viên</caption>
<tr>
<th>Mã SV</th>
<th>Họ Tên</th>
<th>Điểm</th>
<th>Lớp</th>
</tr>
…
</table>
Nếu muốn thêm mô tả gồm nhiều nội dung cho bảng thì sử dụng phần tử figure và phần tử figcaption.
Thuộc tính scope
Thuộc tính scope được sử dụng để chỉ định ô tiêu đề là của hàng, cột, nhóm hàng, hoặc nhóm cột dữ liệu nào. Các giá trị của scope gồm: col, row, colgroup, rowgroup. Các hệ xử lý tự động sẽ sử dụng tới thuộc tính này.
Ví dụ, ô tiêu đề là của hàng hiện hành,
<tr>
<th scope="row">Mars</th>
<td>.95</td>
<td>.62</td>
<td>0</td>
</tr>
Tổ chức bảng theo cấu trúc header, body và footer
HTML cho phép tạo ra cấu trúc bảng gồm ba phần, mà chúng có liên kết ngầm với nhau, đó là: phần đầu (header), phần thân (body) và phần chân (footer).
Với cấu trúc ba phần này, nếu bảng có nhiều hàng dữ liệu, trình duyệt sẽ tự động hiển thị thanh cuộn cho riêng phần thân bảng, hoặc khi in trên nhiều trang, phần đầu và phần chân sẽ được tự động chèn vào mỗi trang in.
– Phần đầu được tạo ra bằng phần tử thead, viết tắt của table header
– Phần thân được tạo ra bằng phần tử tbody, viết tắt của table body
– Phần chân được tạo ra bằng phần tử tfoot, viết tắt của table footer
Ví dụ một bảng có cấu trúc ba phần,
[HTML]
<!DOCTYPE html>
<html>
<head>
<title>Hoc lam web</title>
<meta charset="utf-8">
</head>
<body>
<table border="1">
<caption>Bảng điểm sinh viên</caption>
<thead>
<tr>
<th>Mã SV</th>
<th>Họ</th>
<th>Tên</th>
<th>Điểm</th>
<th>Lớp</th>
</tr>
</thead>
<tbody>
<tr>
<td>00112233</td>
<td>Nguyễn Văn</td>
<td>A</td>
<td>7</td>
<td>CNTT1</td>
</tr>
<tr>
<td>00112244</td>
<td>Trần Văn</td>
<td>B</td>
<td>8</td>
<td>CNTT1</td>
</tr>
<tr>
<td>00112255</td>
<td>Lê Văn</td>
<td>C</td>
<td>9</td>
<td>CNTT2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">Đây là bảng điểm chính thức của môn học</td>
</tr>
</tfoot>
</table>
</body>
</html>
[Kết quả]
Bảng điểm sinh viên
Mã SV | Họ | Tên | Điểm | Lớp |
00112233 | Nguyễn Văn | A | 7 | CNTT1 |
00112244 | Trần Văn | B | 8 | CNTT1 |
00112255 | Lê Văn | C | 9 | CNTT2 |
Đây là bảng điểm chính thức của môn học | ||||
Bảng lồng nhau
Có thể tạo ra bảng nằm bên trong một ô bất kì của bảng hiện thời, nghĩa là cho phép bảng lồng trong bảng.
Thực tế, có thể chèn hầu hết các loại phần tử vào trong một ô của bảng, nghĩa là chèn vào trong phần tử td, hoặc th.
Ví dụ, bảng lồng trong bảng,
[HTML]
<table border="1">
<tr>
<td>1</td>
<td>
<table border="1"
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
[Kết quả]
1 |
| ||||
3 | 4 |
.jpg)
.jpg)
0 Nhận xét