Bài trước: Web front-end (17) - HTML - Table 1
-----
1.1.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.
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 đề/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ó ở 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
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.
Bình thường, trong thẻ <th> nếu bạn không chỉ định một
cách tường minh, tiêu đề là của cột/hàng/nhóm nào thì trình duyệt sẽ tự động lựa
chọn các ô cho tiêu đề. Tuy nhiên, để tăng tính tường minh và các hệ xử lý tự động
có thể dễ dàng hiểu được cấu trúc của bảng, thì bạn có thể thêm thuộc tính
scope cho thẻ <th>.
Ví dụ,
<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>
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>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 |
1.1.2
Bài tập và thực hành
Bài
tập 1. Viết lại các đoạn mã trong phần lý thuyết.
Bài tập 2. Sử dụng HTML hiển thị một phần 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 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>
1.1.3 Xem và đọc thêm
– [1] Jenifer Niederst
Robbins, Learning Web Design,
O’Reilly, 2018, trang 163 – 176.
– [2] https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables
1.1.4 Câu hỏi ôn tập
Câu 1. 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 2. The _____ tag defines a standard data cell in an HTML
table
A. <tr>
B. <th>
C. <dc>
D. <td>
Câu 3. The colspan _____ defines the number of columns a
cell should span
A. attribute
B. tag
C. element
D. document
Câu 4. The ____ tag is used to group header content in an
HTML table.
A. <th>
B. <tr>
C. <td>
D. <thead>
Đáp án: 1(C), 2(D), 3(A), 4(D)
-----
-----