Bài trước: Web front-end (16) - HTML - Hình ảnh_Bài tập
-----
1.1
Bảng
Chúng ta cùng nhìn lại những kiến thức đã học được cho tới
thời điểm này, đã biết cách tạo ra một tài liệu HTML, biết biểu diễn văn bản có
cấu trúc và có ngữ nghĩa, biết tạo liên kết, biết chèn hình ảnh vào trang web,
đã tích lũy được một số thuật ngữ bằng tiếng Anh. Cứ kiên trì từng bước một, để
có kiến thức nền thật chắc.
Phần này sẽ học tiếp về cách hiển thị dữ liệu dưới dạng bảng
(tabular).
1.1.1
Hiển thị dữ liệu dưới dạng bảng
Bảng (table) được sử dụng để chứa dữ liệu theo hàng (row) và
cột (column), như lịch làm việc, thời khóa biểu, bảng kế hoạch, thống kê số liệu.
Dữ liệu trong bảng không nhất thiết phải là số, mà nó có thể là các kiểu dữ liệu
khác, như văn bản, hình ảnh, liên kết. Dữ liệu được chứa trong các ô (cell) của
bảng.
Sau đây là một số hình ảnh về dữ liệu dạng bảng:
– Bảng giá chứng khoán
– Thời khóa biểu
– Thời gian biểu của một sinh viên,
Ví dụ, quan sát bảng điểm của sinh viên, gồm 3 hàng, 3 cột,
9 ô:
|
MSSV |
Họ tên |
Điểm |
|
00112233 |
Nguyễn Văn Tèo |
7 |
|
00112244 |
Trần Văn Tít |
8 |
Hiểu đơn giản, bảng chính là các ô (cell) chứa dữ liệu, được
sắp xếp theo từng hàng (row). Dữ liệu trong mỗi ô có thể là số, chữ, hình ảnh
hoặc kiểu dữ liệu bất kỳ. Các ô thuộc một trong hai loại là: ô tiêu đề (header
cell) hoặc ô dữ liệu (data cell). Xem cấu trúc đơn giản của một bảng trong hình
dưới đây,
Biểu diễn “Cấu trúc bảng đơn giản” ở trên bằng các phần tử
HTML sẽ như sau,
Bảng trên gồm 3 hàng, 9 ô dữ liệu, để tạo một bảng đơn giản
như vậy, cần sử dụng các phần tử sau:
– Sử dụng phần tử table
để tạo một bảng
– Sau đó, sử dụng phần tử tr để tạo các hàng của bảng, phần tử tr là con của phần tử table,
tr là viết tắt của table row (hàng của
bảng)
– Tiếp theo, sử dụng phần tử td hoặc th để tạo từng ô
của mỗi hàng, phần tử td/th là con của
phần tử tr, td là viết tắt của table data (dữ liệu của bảng), th là viết tắt của table header (ô tiêu
đề).
Nếu để ý, sẽ không thấy nói tới phần tử HTML để tạo ra cột
(column). Thực tế, cột sẽ được xác định dựa vào số ô của mỗi hàng. Điều này làm
cho bảng trong HTML trở nên phức tạp, ví dụ, muốn tạo ra một bảng gồm 3 hàng,
chỉ cần sử dụng 3 phần tử tr; với cột
thì khác, muốn tạo ra một bảng gồm 4 cột thì mọi hàng trong bảng đều phải có 4
ô (phần tử td hoặc th). Nghĩa là, cột không được tạo ra một
cách tường minh mà nó chỉ là kết quả của việc tạo ra các ô của mỗi hàng.
Ở chế độ mặc định, trình duyệt luôn hiển thị bảng trên một
hàng mới.
Đoạn mã HTML của bảng sẽ có dạng như sau,
<table>
<tr>
<th>MSSV</th>
<th>Họ
tên</th>
<th>Điểm</th>
</tr>
<tr>
<td>00112233</td>
<td>Nguyễn
Văn Tèo</td>
<td>7</td>
</tr>
<tr>
<td>00112244</td>
<td>Trần
Văn Tít</td>
<td>8</td>
</tr>
</table>
Lưu ý, tất cả nội dung của bảng sẽ được đặt trong các ô (phần
tử td, th), các ô có thể chứa văn bản, các đối tượng đồ họa, thậm chí có
thể chứa bảng khác.
Xem lại ví dụ về bảng trong phần trước, HTML sử dụng phần tử
th để tạo tiêu đề cho các cột dữ liệu
(nó cũng được sử dụng để tạo tiêu đề cho các hàng). Các ô tiêu đề sẽ được hiển
thị ở hình thức khác so với các ô dữ liệu, thường là tô đậm và căn giữa, tuy
nhiên, đây không phải là lí do chính để sử dụng phần tử tiêu đề cho một ô của bảng,
mà quan trọng hơn, chính là ngữ nghĩa của phần tử tiêu đề.
Nhờ có ô tiêu đề, người dùng hoặc các hệ xử lý tự động có thể
hiểu được ngữ nghĩa của các hàng hoặc các cột dữ liệu trong một bảng.
Có thể thay đổi định dạng mặc định của ô tiêu đề bằng CSS.
Ô tiêu đề thường nằm ở đầu hàng/cột, tuy nhiên, nó cũng có
thể nằm ở mọi hàng/cột trong bảng.
Ví dụ, bảng với tiêu đề nằm ở đầu hàng,
|
Quý |
I |
II |
III |
IV |
|
Sản lượng |
30 |
36 |
37 |
38 |
Mã HTML sẽ là,
[HTML]
<table>
<tr>
<th>Quý</th>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
</tr>
<tr>
<th>Sản
lượng</th>
<td>30</td>
<td>36</td>
<td>37</td>
<td>38</td>
</tr>
</table>
1.1.2 Gộp ô
Gộp ô (cell spanning) là một chức năng đi kèm của cấu trúc bảng,
được sử dụng để gộp nhiều ô (liền kề) lại với nhau, có thể gộp nhiều ô trên
hàng hoặc trên cột, có thể gộp các ô tiêu đề hoặc các ô dữ liệu.
Gộp ô giúp tạo ra các bảng có cấu trúc phức tạp hơn, tuy
nhiên, điều này cũng làm cho mã HTML của bảng trở nên phức tạp và khó kiểm
soát. Để gộp ô, sử dụng thuộc tính
colspan hoặc rowspan.
Gộp cột
Để gộp nhiều cột (liền kề) lại với nhau (column spans), chỉ
việc thêm thuộc tính colspan vào phần
tử th hoặc td, thuộc tính này sẽ gộp ô hiện hành với các ô bên phải của nó, số
ô được gộp chính là giá trị của thuộc tính colspan.
Colspan là viết tắt của column spans.
Ví dụ,
Từ bảng ban đầu có nội dung như sau,
|
Mã SV |
Họ |
Tên |
Điểm |
|
00112233 |
Nguyễn Văn |
Tèo |
7 |
Mã HTML của bảng trên là,
[HTML]
<tr>
<th>Mã
SV</th>
<th>Họ</th>
<th>Tên</th>
<th>Điểm</th>
</tr>
<tr>
<td>00112233</td>
<td>Nguyễn
Văn</td>
<td>Tèo</td>
<td>7</td>
</tr>
Giờ sẽ gộp hai ô Họ và Tên lại với nhau, để bảng trở thành,
|
Mã SV |
Họ Tên |
Điểm |
|
|
00112233 |
Nguyễn Văn |
Tèo |
7 |
Khi đó, mã HTML sẽ là,
[HTML]
<tr>
<th>Mã
SV</th>
<th
colspan="2">Họ Tên</th>
<th>Điểm</th>
</tr>
<tr>
<td>00112233</td>
<td>Nguyễn
Văn</td>
<td>Tèo</td>
<td>7</td>
</tr>
Ở đoạn HTML trên, bảng gồm hai hàng (2 phần tử tr), phần tử th thứ hai (ở hàng đầu) có thuộc tính colspan=“2”, nghĩa là ô thứ hai và thứ ba sẽ được gộp lại làm một.
Lưu ý: giá trị của thuộc tính colspan phải nằm trong miền giá trị hợp lệ, để đảm bảo tổng số ô
trong các hàng là bằng nhau. Nếu số ô tại hàng colspan (tính cả giá trị của
colspan) mà vượt quá số cột của bảng thì cột mới sẽ được thêm vào, điều này sẽ
phá vỡ bố cục vốn có của giao diện, và người lập trình sẽ không thể kiểm soát
được bố cục của trang web. Ví dụ, nếu bạn thiết lập colspan=“3” sẽ làm cho số ô (số cột) ở hàng đầu tiên là 5, trong
khi hàng thứ 2 đang có 4 ô.
Gộp hàng
Cũng tương tự như gộp cột, để gộp nhiều hàng (liền kề) lại với
nhau (row spans), chỉ việc thêm thuộc tính rowspan
vào phần tử th hoặc td, thuộc tính này sẽ gộp ô hiện hành với
các ô phía dưới của nó, số ô được gộp chính là giá trị của thuộc tính rowspan. Rowspan là viết tắt của row
spans.
Ví dụ, tạo bảng dữ liệu sau,
|
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 |
|
|
00112255 |
Lê Văn |
Mít |
9 |
CNTT2 |
Mã HTML sẽ là,
[HTML]
<table
border="1">
<tr>
<th>Mã
SV</th>
<th
colspan="2">Họ Tên</th>
<th>Điểm</th>
<th>Lớp</th>
</tr>
<tr>
<td>00112233</td>
<td>Nguyễn
Văn</td>
<td>Tèo</td>
<td>7</td>
<td
rowspan="2">CNTT1</td>
</tr>
<tr>
<td>00112244</td>
<td>Trần
Văn</td>
<td>Tít</td>
<td>8</td>
</tr>
<tr>
<td>00112255</td>
<td>Lê
Văn</td>
<td>Mít</td>
<td>9</td>
<td>CNTT2</td>
</tr>
</table>
Ở đoạn HTML trên, bảng gồm bốn hàng, phần tử td ở hàng thứ hai có thuộc tính rowspan=“2”, nghĩa là ô hiện hành và ô
tương ứng (cùng cột) ở hàng kế tiếp sẽ được gộp lại làm một.
Lưu ý: giá trị của thuộc tính rowspan phải nằm trong miền giá trị hợp lệ, để đảm bảo số ô trong mỗi
cột là bằng nhau. Nếu số ô tại cột rowspan (tính cả giá trị của rowspan) mà vượt
quá số hàng của bảng thì cột mới sẽ được thêm vào, điều này sẽ phá vỡ bố cục vốn
có của giao diện, và người lập trình sẽ không thể kiểm soát được bố cục của
trang web. Ví dụ, nếu bạn thiết lập rowspan=“3”
sẽ làm cho số ô ở cột thứ năm là 5 (5 hàng), trong khi số hàng của bảng đang là
4, khi đó, một cột mới sẽ được thêm vào cho bảng.
-----
-----