Bài trước: HTML (17) - Bảng
-----
15.3 Thêm ngữ nghĩa cho bảng
Thêm tiêu đề cho
bảng
Sử dụng phần tử caption
để thêm tiêu đề cho bảng (đừng nhầm tiêu đề của bảng và tiêu đề của cột dữ liệu). 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.
Mặc dù chúng ta có thể sử dụng phần tử <h2> hoặc <p> để tạo ra mô tả
cho bảng, tuy nhiên, nê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 đề sẽ được đặt ở trên đầu bảng,
tuy nhiên, có thể thay đổi vị trí hiển thị của nó ở cuối bảng 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 trong thẻ <th>
Thuộc tính scope dùng để khai báo tường minh phạm vi ảnh hưởng của ô tiêu đề (<th>), giúp trình duyệt, công cụ tìm kiếm và các thiết bị hỗ trợ (như phần mềm đọc màn hình) hiểu chính xác cấu trúc dữ liệu của bảng.
Các giá trị phổ biến của scope:
- col: Tiêu đề áp dụng cho cả cột chứa nó
- row: Tiêu đề áp dụng cho cả hàng chứa nó
- colgroup: Tiêu đề áp dụng cho cả nhóm cột (dùng kết hợp với thẻ <colgroup>)
- rowgroup: Tiêu đề áp dụng cho cả nhóm hàng (dùng kết hợp với <thead>, <tbody>, hoặc <tfoot>)
Ví dụ 1: Sử dụng scope = “col” (tiêu đề cột): Dùng khi các ô tiêu đề nằm ở hàng ngang đầu tiên của bảng, đại diện cho toàn bộ các ô dữ liệu phía bên dưới.
[HTML]
<table>
<tr>
<th scope="col">Mã SV</th>
<th scope="col">Họ Tên</th>
<th scope="col">Điểm</th>
<th scope="col">Lớp</th>
</tr>
<tr>
<td>SV001</td>
<td>Nguyễn Văn Tèo</td>
<td>8.5</td>
<td>HTML 1</td>
</tr>
</table>
Ví dụ 2: sử dụng scope=“row” (tiêu đề hàng): Dùng khi ô tiêu đề nằm ở cột đầu tiên bên trái, đại diện cho toàn bộ các ô dữ liệu nằm ngang trong cùng hàng đó.
[HTML]
<table>
<tr>
<th scope="row">Môn Toán</th>
<td>8.0</td>
<td>9.0</td>
</tr>
<tr>
<th scope="row">Môn Văn</th>
<td>7.5</td>
<td>8.5</td>
</tr>
</table>
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, gồm: phần đầu (header), phần thân (body) và phần chân (footer), giữa chúng có mối liên kết ngầm với nhau.
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>Tèo</td>
<td>7</td>
<td>CNTT1</td>
</tr>
<tr>
<td>00112244</td>
<td>Trần Văn</td>
<td>Tít</td>
<td>8</td>
<td>CNTT1</td>
</tr>
<tr>
<td>00112255</td>
<td>Lê Văn</td>
<td>Mít</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 |
Tèo |
7 |
CNTT1 |
|
00112244 |
Trần Văn |
Tít |
8 |
CNTT1 |
|
00112255 |
Lê Văn |
Mít |
9 |
CNTT2 |
|
Đây là bảng điểm
chính thức của môn học |
||||
Bảng lồng nhau
Chúng ta có thể tạo ra một bảng nằm bên trong một ô bất kỳ của
bảng khác, 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 |
15.4 Xem và đọc thêm
Dùng các từ khóa sau, tìm trong chatbot, google, youtube để tìm hiểu thêm: phần tử table, gộp ô, thêm ngữ nghĩa cho bảng.
15.5 Bài tập và câu hỏi
Bài
tập 15.1: Viết lại các đoạn mã trong phần lý thuyết.
Bài tập 15.2: Sử dụng HTML hiển thị bảng giá chứng
khoán sau. Chưa cần thể hiện màu sắc của chữ. Tiêu đề của bảng là “Bảng giá chứng
khoán”.
Bảng giá chứng khoán.
[Hướng dẫn làm bài tập]
Bài tập 15.2:
[chungKhoan.html]
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table border="1">
<caption>Bảng giá chứng khoán</caption>
<thead>
<tr>
<th rowspan="2">CK</th>
<th rowspan="2">Trần</th>
<th rowspan="2">Sàn</th>
<th rowspan="2">TC</th>
<th colspan="6">Bên mua</th>
</tr>
<tr>
<th>Giá 3</th>
<th>KL 3</th>
<th>Giá 2</th>
<th>KL 2</th>
<th>Giá 1</th>
<th>KL 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>AAA</td>
...
</tr>
</tbody>
</table>
</body>
</html>
Câu hỏi
Câu 15a: How do you create a header cell?
A. Using <tr> tag
B. Using <thead> tag
C. Using <th> tag
D. Using <td> tag
Câu 15b: The _____ tag defines a standard data cell in an HTML
table
A. <tr>
B. <th>
C. <dc>
D. <td>
Câu 15c: The colspan _____ defines the number of columns a
cell should span
A. attribute
B. tag
C. element
D. document
Câu 15d: The ____ tag is used to group header content in an
HTML table.
A. <th>
B. <tr>
C. <td>
D. <thead>
-----