1. Kiến thức trọng tâm
Danh sách và bảng là hai cách trình bày thông tin có cấu trúc trong HTML. Danh sách không thứ tự dùng thẻ <ul> với các mục <li>, mỗi mục hiển thị kèm dấu chấm tròn ở đầu dòng, thích hợp khi thứ tự các mục không quan trọng. Danh sách có thứ tự dùng thẻ <ol> với các mục <li>, trình duyệt tự đánh số 1, 2, 3, thích hợp cho các bước thực hiện theo trình tự. Bảng dùng thẻ <table>, mỗi hàng là <tr>, ô tiêu đề là <th>, ô dữ liệu là <td>. Bảng giúp so sánh các số liệu, thuộc tính một cách trực quan. Có thể lồng danh sách trong ô bảng hoặc lồng danh sách trong danh sách để thể hiện cấu trúc phân cấp. Khi tạo bảng, nên có hàng tiêu đề rõ ràng để người đọc hiểu mỗi cột thể hiện thông tin gì. Danh sách và bảng giúp trang web gọn gàng, tránh trình bày thông tin dài dòng bằng đoạn văn.
2. Ví dụ minh họa
Yêu cầu: tạo danh sách không thứ tự gồm 3 môn học yêu thích và bảng điểm 2 học sinh với các cột Họ tên, Toán, Văn.
Lời giải:
<ul><li>Toán</li><li>Tin học</li><li>Văn</li></ul>
<table>
<tr><th>Họ tên</th><th>Toán</th><th>Văn</th></tr>
<tr><td>An</td><td>9</td><td>8</td></tr>
<tr><td>Bình</td><td>8</td><td>9</td></tr>
</table>
Giải thích: <ul> liệt kê các môn học không cần thứ tự; <table> có hàng đầu là tiêu đề cột, hai hàng sau là dữ liệu từng học sinh. Người đọc dễ dàng đối chiếu điểm số.
3. Ghi nhớ
<ul>là danh sách không thứ tự,<ol>là danh sách có thứ tự, mục con dùng<li>.- Bảng dùng
<table>, hàng<tr>, ô tiêu đề<th>, ô dữ liệu<td>. - Bảng cần hàng tiêu đề để người đọc hiểu ý nghĩa từng cột.
- Dùng danh sách và bảng khi thông tin có cấu trúc, tránh viết đoạn văn dài dòng.