Các khóa học
Viết code HTML

Tin học 12 – Bài 9: Tạo danh sách và bảng

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

  • Biết được các thẻ HTML dùng để tạo danh sách (có thứ tự, không thứ tự, mô tả) và tạo bảng.
  • Nắm vững các thuộc tính cơ bản để định dạng danh sách và bảng (kiểu đánh số, đường viền, gộp ô).
  • Sử dụng thành thạo các thẻ để trình bày thông tin trang web dưới dạng danh sách và bảng một cách khoa học, thẩm mỹ.
  • Hình thành tư duy phân tích bố cục: chia nhỏ công việc phức tạp thành các nhiệm vụ cụ thể (tư duy máy tính).

Mức độ kiến thức và kĩ năng cần đạt

  • Nhận biết: Nhận diện được các thẻ <ul>, <ol>, <li>, <dl>, <table>, <tr>, <td>, <th>.
  • Thông hiểu: Hiểu ý nghĩa của các thuộc tính type, start (đối với danh sách); border, rowspan, colspan (đối với bảng). Hiểu cấu trúc lồng nhau của các thẻ.
  • Vận dụng: Viết được mã HTML để tạo danh sách lồng nhau, bảng có cấu trúc phức tạp (gộp hàng, gộp cột) và kết hợp với ngôn ngữ lập trình (Python) để tự động hóa việc tạo bảng.

Hoạt động khởi động

Quan sát một văn bản thuần túy và một văn bản được trình bày có cấu trúc để nhận thấy sự cần thiết của việc định dạng.

[Vị trí chèn Hình 8.3 hoặc hình ảnh minh họa so sánh văn bản thường và văn bản có danh sách]
[Từ khóa tìm kiếm: “so sánh văn bản thường và danh sách”, “text vs list layout”, “html list example”]

Theo em, khi trang web chỉ toàn các đoạn văn bản thì cần trình bày thế nào cho dễ nhìn?


Để trang web dễ nhìn và khoa học hơn, chúng ta không nên chỉ viết các đoạn văn bản liên tiếp. Cần chia nhỏ nội dung, sử dụng các tiêu đề (heading), và đặc biệt là nhóm các ý tưởng tương tự nhau thành các danh sách (liệt kê) hoặc bố cục dữ liệu dưới dạng bảng. Điều này giúp người đọc dễ dàng nắm bắt thông tin quan trọng và cấu trúc của bài viết.

1. Tạo danh sách (List)

HTML cung cấp 3 dạng danh sách chính: danh sách có thứ tự, không có thứ tự và danh sách mô tả.

a) Danh sách có thứ tự (Ordered List)

  • Dùng cặp thẻ <ol> và </ol> để bao quanh danh sách.
  • Mỗi mục con dùng thẻ <li> (list item).
  • Thuộc tính quan trọng:
    • type: Xác định kiểu đánh số (1, A, a, I, i).
    • start: Xác định giá trị bắt đầu đánh số (là một số nguyên).

b) Danh sách không có thứ tự (Unordered List)

  • Dùng cặp thẻ <ul> và </ul>.
  • Mỗi mục con dùng thẻ <li>.
  • Định dạng kí tự đầu dòng: Sử dụng thuộc tính style="list-style-type: giá trị". Các giá trị gồm: disc (hình tròn đặc – mặc định), circle (hình tròn rỗng), square (hình vuông), none (không hiện kí tự).

c) Danh sách mô tả (Description List)

  • Dùng để liệt kê các mục kèm mô tả chi tiết (ví dụ: thuật ngữ và định nghĩa).
  • Cấu trúc:
    • <dl>: Bao quanh toàn bộ danh sách.
    • <dt>: Tên mục/thuật ngữ.
    • <dd>: Nội dung mô tả cho mục đó.
tin học 12 bài 9
tin học 12 bài 9
tin học 12 bài 9

Làm thế nào để tạo một danh sách lồng nhau: danh sách mức 1 đánh số 1, 2, 3… và danh sách mức 2 đánh số dạng a, b, c?

Ta sử dụng thẻ lồng bên trong thẻ của danh sách cha. Cụ thể:

<ol type='1'>
  <li>Mục 1
    <ol type='a'>
      <li>Mục con a</li>
      <li>Mục con b</li>
    </ol>
    </li>
  <li>Mục 2</li>
</ol>

2. Thiết lập bảng (Table)

Bảng giúp trình bày dữ liệu dạng hàng và cột, hoặc dùng để bố cục trang web.

a) Các thẻ cấu trúc bảng cơ bản

  • <table>...</table>: Tạo bảng.
  • <caption>...</caption>: Tạo tiêu đề cho bảng (đặt ngay sau thẻ mở table).
  • <tr>...</tr>: Tạo một hàng (table row).
  • <th>...</th>: Tạo ô tiêu đề (table header) – chữ thường in đậm và căn giữa.
  • <td>...</td>: Tạo ô dữ liệu (table data).

b) Định dạng bảng

  • Kẻ khung (Border): Trong HTML5, nên dùng CSS (thuộc tính style) thay vì thuộc tính border cũ.
    • Cú pháp: style="border: độ_dày kiểu_viền màu_viền" (Ví dụ: 1px solid blue).
    • Lưu ý: Cần thiết lập viền cho cả thẻ table, th, và td để hiển thị đầy đủ lưới.
  • Kích thước (Size): Dùng width (chiều rộng) và height (chiều cao), đơn vị có thể là pixel (px) hoặc phần trăm (%).
tin học 12 bài 9

c) Gộp ô (Merging cells)

  • Gộp hàng (dọc): Dùng thuộc tính rowspan="n" (gộp n ô theo chiều dọc).
  • Gộp cột (ngang): Dùng thuộc tính colspan="n" (gộp n ô theo chiều ngang).
  • Quy tắc: Khi một ô đã được gộp (chiếm chỗ), các ô ở vị trí bị chiếm trong mã HTML phải được xóa bỏ để tránh vỡ cấu trúc bảng.
tin học 12 bài 9

Bảng trong ví dụ trên Hình 9.6 (SGK) có nhược điểm gì về mặt thẩm mỹ và làm thế nào để khắc phục?

Nhược điểm của bảng trong hình 9.6 là các cột không đều nhau, biên cột sát vào chữ khiến tổng thể bảng khó nhìn và thiếu chuyên nghiệp.
Cách khắc phục:

  1. Thêm độ rộng cho bảng hoặc các cột (ví dụ: style="width:80%").
  2. Đổi kiểu viền: Thay vì chỉ dùng border='1' ở thẻ table, nên dùng CSS style='border:1px solid green' cho từng thẻ th, td để viền đẹp hơn và có thể chỉnh màu sắc.

Luyện tập

Nhiệm vụ 1: Tạo danh sách Câu lạc bộ (Hình 9.7 SGK)

  • Yêu cầu: Tạo danh sách lồng nhau (Thể thao, Nghệ thuật) kết hợp danh sách không thứ tự và có thứ tự.
  • Gợi ý:
    1. Xác định cấu trúc: Tiêu đề <h2>, danh sách chính <ul>.
    2. Trong mục “THỂ THAO”: lồng thêm <ul> hoặc <ol> tùy theo yêu cầu đánh số.

Nhiệm vụ 2: Tạo bảng Lịch hoạt động CLB (Hình 9.8 SGK)

  • Yêu cầu: Tạo bảng 7 hàng, 7 cột với các ô được gộp phức tạp.
  • Phân tích kĩ thuật:
    • Hàng 1: Ô đầu tiên gộp 2 hàng (rowspan=”2″), ô thứ 2 gộp 2 hàng, ô “Ngày” gộp 5 cột (colspan=”5″).
    • Hàng 2: Chỉ còn các ô con của cột “Ngày” (Thứ 2, Thứ 3…).
tin học 12 bài 9

Dưới đây là đoạn mã gợi ý (sử dụng style để định dạng chi tiết):

<table style='border-collapse: collapse;'>
  <tr>
    <th rowspan='2' style='border: 1px solid blue'>Họ và tên</th>
    <th colspan='3' style='border: 1px solid blue'>Điểm thi</th>
  </tr>
  <tr>
    <td style='border: 1px solid blue; color: red;'>Toán</td>
    <td style='border: 1px solid blue; color: gold;'>Vật lí</td>
    <td style='border: 1px solid blue; color: green;'>Hoá học</td>
  </tr>
  <!-- Các hàng dữ liệu khác -->
</table>

Vận dụng

Tình huống: Cho trước một bảng dữ liệu cỡ n×4, mỗi hàng tương ứng với một bộ dữ liệu (họ tên, điểm Toán, điểm Lý, điểm Hóa). Viết chương trình Python để tạo ra tệp HTML hiển thị bảng dữ liệu này.

Hướng dẫn:

  1. Sử dụng Python để xử lý chuỗi.
  2. Tạo biến chứa mã HTML cơ bản (<table>, <tr> tiêu đề).
  3. Dùng vòng lặp for duyệt qua danh sách dữ liệu đầu vào. Với mỗi phần tử, cộng dồn chuỗi HTML tạo hàng (<tr>) và ô (<td>) tương ứng.
  4. Ghi kết quả ra file .html.

Bài tập củng cố

Viết mã HTML để tạo danh sách như mẫu sau đây

Lưu ý:

  • Viết đầy đủ cấu trúc của tập tin HTML.
  • Dòng tiêu đề: sử dụng thẻ h2, font chữ Tahoma và chữ màu đỏ.
  • Các mục THỂ THAO và NGHỆ THUẬT chữ in đậm, màu xanh lá cây.
  • Sử dụng các thuộc tính cần thiết của các thẻ để có kết quả giống hình.

Có thể sử dụng công cụ viết code HTML online: https://demo.otth.vn/codeweb/

Tin học 12 Bài 9 Tạo danh sách và bảng Ví dụ 2 Tạo bảng có sử dụng thuộc tính bổ sung và thẻ caption

Trắc nghiệm Tin học 12 Bài 19: Tạo danh sách và bảng (Có đáp án và thử thách đua top)

Thời gian làm bài: 30 phút
Chỉ hiển thị đáp án đúng khi chọn đúng
Câu hỏi sẽ được hiển thị ngẫu nhiên
Vui lòng nhập họ và tên để bắt đầu làm bài

NB

Cặp thẻ nào được sử dụng để tạo một danh sách có thứ tự (đánh số)?

NB

Trong một danh sách mô tả, thẻ nào được dùng để định nghĩa một thuật ngữ hoặc một nhãn?

TH

Phương án nào mô tả đúng nhất trường hợp nên sử dụng danh sách không có thứ tự (<ul>)?

TH

Để thay đổi ký tự đầu dòng của một danh sách không có thứ tự thành hình vuông, ta cần sử dụng thuộc tính style với giá trị nào sau đây?

TH

Cấu trúc đúng để tạo một danh sách con (lồng nhau) bên trong một danh sách cha là gì?

NB

Thẻ nào được sử dụng để định nghĩa một hàng trong bảng HTML?

NB

Để thêm tiêu đề hoặc chú thích cho toàn bộ bảng, thẻ nào sau đây nên được sử dụng?

TH

Sự khác biệt chính về mặt ngữ nghĩa giữa thẻ <th> và <td> là gì?

TH

Thuộc tính rowspan được sử dụng với mục đích nào sau đây?

VD

Xét đoạn mã sau: <td colspan="3">Nội dung</td>. Đoạn mã này có ý nghĩa gì?

VD

Một bảng có tổng cộng 5 cột. Ở hàng đầu tiên, ô đầu tiên sử dụng thuộc tính rowspan="2". Vậy ở hàng thứ hai, cần khai báo bao nhiêu thẻ <td> (hoặc <th>) để cấu trúc bảng được hiển thị đúng?

VD

Nếu một ô trong hàng thứ nhất của bảng được khai báo với <th colspan="2">Tiêu đề</th>, và bảng có tổng cộng 4 cột, thì hàng đó cần thêm bao nhiêu thẻ <th> hoặc <td> nữa?

An đang viết mã HTML để tạo một trang giới thiệu về các câu lạc bộ của trường. Trang này có mục "CLB Thể thao" và trong mục đó liệt kê các môn thể thao nhỏ hơn như "Bóng đá", "Bóng rổ". An muốn trình bày mục này dưới dạng danh sách phân cấp.
Dưới đây là một số nhận định về cách An thực hiện:

NB An nên dùng thẻ <ol> cho danh sách các môn thể thao nếu muốn chúng được đánh số thứ tự.

TH Để tạo danh sách phân cấp, An cần đặt danh sách các môn thể thao (danh sách con) ngay sau thẻ <li> chứa chữ "CLB Thể thao".

TH Thẻ <li> chỉ có thể chứa văn bản, KHÔNG thể chứa một danh sách khác bên trong.

VD Nếu An muốn "Bóng đá" có ký tự đầu dòng là hình tròn (circle) và "Bóng rổ" có ký tự là hình vuông (square), An phải tạo hai danh sách <ul> riêng biệt cho chúng.

Một giáo viên muốn tạo thời khóa biểu cho lớp trên một trang web. Thời khóa biểu có các cột là "Thứ Hai", "Thứ Ba",..., "Thứ Sáu" và các hàng là các tiết học. Môn "Chào cờ" chỉ diễn ra vào tiết 1 ngày thứ Hai và kéo dài hết tiết 2.
Dưới đây là một số nhận định về cách tạo bảng thời khóa biểu này:

NB Thẻ <tr> được sử dụng để tạo các cột tương ứng với các ngày trong tuần.

TH Các ô chứa tên ngày ("Thứ Hai", "Thứ Ba",...) nên được dùng thẻ <th> thay vì <td>.

VD Để môn "Chào cờ" kéo dài hết 2 tiết, ô <td> chứa chữ "Chào cờ" cần có thuộc tính colspan="2".

VD Nếu bảng có 5 cột ngày và 5 hàng tiết học, thì tổng số thẻ <tr> cần dùng để tạo bảng (không tính hàng tiêu đề ngày) là 5.

Bạn Bình được giao nhiệm vụ tạo một trang web giới thiệu thực đơn của một nhà hàng. Thực đơn gồm các món ăn, mỗi món ăn có tên, mô tả ngắn và giá tiền. Bình đang phân vân giữa việc sử dụng danh sách mô tả (<dl>) và bảng (<table>).
Dưới đây là một số nhận định về tình huống này:

NB Thẻ <dd> trong danh sách mô tả được dùng để chứa tên món ăn.

TH Sử dụng bảng sẽ giúp căn chỉnh tên món ăn, mô tả và giá tiền thành các cột thẳng hàng một cách dễ dàng.

TH Danh sách mô tả (<dl>) phù hợp hơn bảng về mặt ngữ nghĩa khi chỉ cần hiển thị một thuật ngữ (tên món) và định nghĩa của nó (mô tả).

VD Bình có thể kết hợp cả hai, bằng cách tạo một bảng có 3 cột (Tên, Mô tả, Giá), và trong cột "Mô tả", Bình KHÔNG thể lồng một danh sách <ul> để liệt kê các thành phần của món ăn.

Xem xét lại mã HTML và kết quả của Hình 9.6 trong bài học (bảng điểm có gộp ô).
Dưới đây là một số nhận định liên quan đến cấu trúc của bảng này:

NB Thẻ <table> có thuộc tính border="1" dùng để tạo đường viền cho bảng.

TH Trong đoạn mã, hàng thứ hai (<tr> thứ hai) chỉ chứa các thẻ <td> mà không có thẻ <tr> lồng bên trong.

TH Ô "Họ và tên" chiếm không gian của 2 hàng, vì vậy mã HTML của nó phải là <th colspan="2">Họ và tên</th>.

VD Nếu xóa thuộc tính rowspan="2" khỏi thẻ <th> chứa "Họ và tên", cấu trúc của hàng thứ hai sẽ bị phá vỡ và hiển thị sai lệch.

Bảng xếp hạng

Hạng Họ tên Điểm số Thời gian
1
ĐÔ LÊ NGUYÊN KHANG 12C 8 lần thi
10.00 / 10.00
 27 giây
2
YN 2 lần thi
9.70 / 10.00
 4 phút 21 giây
3
mai 1 lần thi
8.95 / 10.00
 7 phút 25 giây
4
bố top 1 1 lần thi
8.75 / 10.00
 2 phút 4 giây
5
Hoàng Kim Ngân 1 lần thi
8.75 / 10.00
 7 phút 23 giây
6
LƯƠNG HUỲNH NHƯ Ý 12C 1 lần thi
8.25 / 10.00
 56 giây
7
tâm như 1 lần thi
7.75 / 10.00
 8 phút 58 giây
8
Thư lê 1 lần thi
6.10 / 10.00
 13 phút 6 giây
9
Đinh Lộc 1 lần thi
5.05 / 10.00
 3 phút 37 giây
10
tôn thành phú 1 lần thi
4.60 / 10.00
 2 phút 13 giây
11
ĐỖ LÊ NGUYÊN KHANG 12C 8 lần thi
4.25 / 10.00
 1 phút 5 giây
12
Trang 1 lần thi
3.70 / 10.00
 1 phút 18 giây
13
Vạn 1 lần thi
3.60 / 10.00
 1 phút 32 giây
Cập nhật lần cuối: 21:29 16/12/2025
Top 1 Top 2 Top 3

admin
admin
Bài viết: 151

Bài viết liên quan

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *