Bài 9: Tạo Danh Sách, Bảng

Mục tiêu bài học

• Biết tạo các loại danh sách (<ol>, <ul>, <dl>) và tạo bảng dữ liệu (<table>, <tr>, <td>, <th>).

1. Tạo danh sách

a) Khái niệm & phân loại

• Danh sách có thứ tự – <ol>: dùng khi các mục cần đánh số theo thứ tự. Thuộc tính thường dùng:
  • type: kiểu đánh số (1, A, a, I, i).
  • start: giá trị bắt đầu (ví dụ <ol type="A" start="3">).
• Danh sách không thứ tự – <ul>: dùng khi các mục ngang nhau, không cần số thứ tự. Ký hiệu đầu dòng chỉnh bằng thuộc tính style: style="list-style-type:disc|circle|square|none" (thường sử dụng một trong các giá trị disc, circle, square, none).
• Danh sách mô tả – <dl>: gồm các thuật ngữ và mô tả:
  • <dt>: thuật ngữ (tên mục).
  • <dd>: phần mô tả/giải thích cho thuật ngữ.

<h2>Danh sách có thứ tự</h2>
<ol type="1" start="1">
  <li>HTML cơ bản</li>
  <li>Danh sách &amp; bảng</li>
</ol>

<h2>Danh sách không thứ tự</h2>
<ul style="list-style-type:square">
  <li>Tin học 10</li>
  <li>Tin học 11</li>
  <li>Tin học 12</li>
</ul>

<h2>Danh sách mô tả</h2>
<dl>
  <dt>HTML</dt>
  <dd>Ngôn ngữ đánh dấu siêu văn bản.</dd>
</dl>

b) Lồng danh sách

• Lồng danh sách nghĩa là đặt một danh sách bên trong một phần tử <li> của danh sách khác.
• Dùng để biểu diễn cấu trúc phân cấp (mục lớn – mục con), ví dụ chương – mục – tiểu mục.
• Cần thụt lề hợp lý để dễ đọc mã HTML và tránh nhầm lẫn thẻ đóng/mở.

<ul>
  <li>Câu lạc bộ</li>
  <li>Nhóm sở thích
    <ol type="a">
      <li>Thể thao</li>
      <li>Nghệ thuật</li>
    </ol>
  </li>
</ul>

2. Thiết lập bảng

a) Khi nào dùng bảng?

• Khi cần hiển thị dữ liệu dạng hàng – cột (thời khóa biểu, bảng điểm, lịch hoạt động, danh sách học sinh...).
• Có thể dùng bảng để tạo bố cục nhiều cột đơn giản, nhưng với bố cục phức tạp nên ưu tiên dùng CSS (sẽ học ở bài sau).

b) Các thành phần chính

• <table>: toàn bộ bảng.
• <tr> (table row): một hàng trong bảng.
• <td> (table data): ô dữ liệu thường.
• <th> (table header): ô tiêu đề (thường được in đậm, căn giữa).

<table style="border-collapse:collapse;width:100%;">
  <tr>
    <th style="border:1px solid #94a3b8;">STT</th>
    <th style="border:1px solid #94a3b8;">Họ tên</th>
    <th style="border:1px solid #94a3b8;">Lớp</th>
  </tr>
  <tr>
    <td style="border:1px solid #94a3b8;">1</td>
    <td style="border:1px solid #94a3b8;">Nguyễn An</td>
    <td style="border:1px solid #94a3b8;">12A1</td>
  </tr>
</table>

c) Định dạng cơ bản cho bảng

• Tiêu đề bảng: dùng <caption>...</caption> đặt ngay sau thẻ <table>.
• Viền (border): có thể dùng thuộc tính style: style="border:1px solid blue" hoặc đặt trên từng ô/hàng.
• Kích thước: dùng width, height theo % hoặc px; nên ưu tiên % để phù hợp nhiều thiết bị.
• Gộp ô: rowspan để gộp nhiều hàng, colspan để gộp nhiều cột trong cùng một ô.

<table style="border-collapse:collapse;width:100%;">
  <caption>Lịch hoạt động CLB</caption>
  <tr>
    <th rowspan="2" style="border:1px solid #94a3b8;">Thứ</th>
    <th colspan="2" style="border:1px solid #94a3b8;">Buổi</th>
  </tr>
  <tr>
    <th style="border:1px solid #94a3b8;">Sáng</th>
    <th style="border:1px solid #94a3b8;">Chiều</th>
  </tr>
  <tr>
    <td style="border:1px solid #94a3b8;">Thứ 2</td>
    <td style="border:1px solid #94a3b8;">Bóng đá</td>
    <td style="border:1px solid #94a3b8;">Cờ vua</td>
  </tr>
</table>

3. Thực hành (hướng dẫn trong bài)

Nhiệm vụ 1 – Tạo danh sách CLB

• Phân tích cấu trúc danh sách: danh sách chính là các câu lạc bộ, trong đó có mục con “Thể thao”, “Nghệ thuật”.
• Tạo tiêu đề mức 2 bằng thẻ <h2>, ví dụ: <h2>Câu lạc bộ trường em</h2>.
• Tạo danh sách chính bằng <ul>; các mục con “Thể thao”, “Nghệ thuật” là các phần tử <li>.
• Bên trong mỗi mục “Thể thao”, “Nghệ thuật” tạo danh sách lồng bằng <ol type="a"> liệt kê các CLB cụ thể.

Nhiệm vụ 2 – Tạo bảng Lịch hoạt động

• Xác định kích thước bảng 7×7 (7 hàng, 7 cột) phù hợp với nội dung lịch hoạt động trong tuần.
• Dùng <caption> để đặt tiêu đề bảng, ví dụ: “Lịch hoạt động câu lạc bộ tuần lễ ...”.
• Sử dụng rowspan, colspan để gộp các ô tiêu đề (ví dụ tiêu đề chung cho “Buổi sáng”, “Buổi chiều”).
• Sau khi hoàn thiện phần cấu trúc, điền dữ liệu vào từng ô <td> tương ứng với ngày, buổi, hoạt động.

Luyện tập & vận dụng

• Thử thay đổi viền bảng bằng thuộc tính style (độ dày, kiểu đường, màu) thay vì chỉ dùng thuộc tính border đơn giản.
• Viết một chương trình Python sinh tệp HTML chứa bảng và chèn dữ liệu tự động (ví dụ tạo bảng điểm, bảng lịch trực nhật...).
• Kết hợp danh sách và bảng trong cùng một trang để trình bày thông tin rõ ràng, dễ đọc trên nhiều thiết bị.

Từ khóa ghi nhớ