BÀI 9. TẠO DANH SÁCH, BẢNG

BÀI 9. TẠO DANH SÁCH, BẢNG

BÀI 9. TẠO DANH SÁCH, BẢNG

1. TẠO DANH SÁCH

Danh sách giúp nhóm các thông tin liên quan lại với nhau. Có 3 loại danh sách chính.

a) Danh sách có hoặc không có thứ tự

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

Thẻ sử dụng: Cặp thẻ <ol>...</ol> bao bên ngoài, bên trong là các mục <li>...</li>.
Thuộc tính:
- - type: Xác định kiểu đánh số ("1", "a", "A", "i", "I").
- - start: Xác định giá trị bắt đầu (số nguyên).

Ví dụ: Tạo danh sách bắt đầu từ số La Mã

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

Thẻ sử dụng: Cặp thẻ <ul>...</ul> bao bên ngoài, bên trong là các mục <li>...</li>.
Định dạng: Dùng thuộc tính style với đặc tính list-style-type để chọn kiểu kí tự đầu dòng (disc, circle, square, none).

Ví dụ: Tạo danh sách dấu đầu dòng hình vuông

b) Danh sách mô tả

Khái niệm: Dùng để liệt kê các mục kèm theo giải thích/mô tả cho mục đó.
Thẻ sử dụng:
- <dl>: Bao quanh toàn bộ danh sách.
- <dt>: Tên mục (thuật ngữ).
- <dd>: Phần mô tả/giải nghĩa.

Ví dụ: Định nghĩa HTML

Lưu ý (Danh sách lồng nhau): Ta có thể đặt một danh sách con vào bên trong thẻ <li> của danh sách cha.

Ví dụ: Danh sách lồng nhau (HTML)

2. THIẾT LẬP BẢNG

Bảng dùng để hiển thị dữ liệu dạng hàng và cột.

Cấu trúc cơ bản của bảng:

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

Ví dụ: Cấu trúc bảng HTML đơn giản

Các định dạng nâng cao cho bảng:

Tạo khung (Border):

- Sử dụng thuộc tính style với đặc tính border.
- Cú pháp: border: độ_dày kiểu_viền màu_viền.

Ví dụ: Mã nguồn HTML và kết quả hiển thị border

Kích thước (Size):

- Sử dụng width (chiều rộng) và height (chiều cao) trong thuộc tính style. Đơn vị là px hoặc %.

Ví dụ: Rộng bằng 100% màn hình

Gộp ô (Merging cells):

Gộp hàng: Dùng thuộc tính rowspan="số_hàng_gộp" trong thẻ <td> hoặc <th>.

Ví dụ: Gộp hàng rowspan

Gộp cột: Dùng thuộc tính colspan="số_cột_gộp" trong thẻ <td> hoặc <th>.

Ví dụ: Gộp cột colspan

3. THỰC HÀNH TẠO DANH SÁCH VÀ BẢNG

Bước 1: Phân tích: Quan sát hình mẫu xem cần dùng loại danh sách nào (có thứ tự hay không?) hoặc bảng có bao nhiêu hàng/cột, có gộp ô không.
Bước 2: Tạo khung: Viết các thẻ chính (<ul>, <ol>, <table>...).
Bước 3: Chi tiết hóa: Thêm nội dung, thêm thuộc tính (style, type, rowspan...) để giống mẫu.

📥 Tải tài liệu (file pdf) 📚 Lý thuyết đầy đủ (theo SGK) ⏱️ Làm trắc nghiệm Online 🏆 Game vừa chơi vừa học

⇧