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 Khi nào thì sử 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, 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.
2 Cấu trúc cơ bản của bảng
Ví dụ, quan sát bảng điểm của sinh viên,
MSSV | Họ tên | Điểm |
00112233 | Nguyễn Văn A | 7 |
00112244 | Trần Văn B | 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 ba hàng, chín ô 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 ba hàng, chỉ cần sử dụng ba phần tử tr; với cột thì khác, muốn tạo ra một bảng gồm bốn cột thì mọi hàng trong bảng đều phải có bốn ô (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 A</td>
<td>7</td>
</tr>
<tr>
<td>00112244</td>
<td>Trần Văn B</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.
3 Ô tiêu đề
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). Th là viết tắt của table header. Ô 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 để sử dụng phần tử tiêu đề cho một ô của bảng, mà lí do 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>
Exercise 8-1. Making a simple table (p167)
4 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 hai 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 (gộp cột).
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 | A | 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>A</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 | A | 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>A</td>
<td>7</td>
</tr>
Ở đoạn HTML trên, bảng gồm hai hàng (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 số ô trong mỗi 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.
Exercise 8-2. Column spans (p168)
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 (gộp hàng).
Ví dụ, tạo bảng dữ liệu sau,
Mã SV | Họ Tên | Điểm | Lớp | |
00112233 | Nguyễn Văn | A | 7 | CNTT1 |
00112244 | Trần Văn | B | 8 | |
00112255 | Lê Văn | C | 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>A</td>
<td>7</td>
<td rowspan="2">CNTT1</td>
</tr>
<tr>
<td>00112244</td>
<td>Trần Văn</td>
<td>B</td>
<td>8</td>
</tr>
<tr>
<td>00112255</td>
<td>Lê Văn</td>
<td>C</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ử tr), 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.
.jpg)
.jpg)
0 Nhận xét