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

I - MỤC TIÊU BÀI HỌC

• Sử dụng  được· thẻ HTML tạo được danh sách, bảng.

II - KIẾN THỨC CẦN GHI NHỚ

1. TẠO DANH SÁCH

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

- Trong danh sách, các mục được hiển thị tuần tự, kí tự đầu dòng có thể là một số, chữ, dấu, kí hiệu hoặc hình ảnh.

- Cấu trúc của đoạn mã HTML tạo danh sách như sau:

+ Để tạo danh sách có thứ tự, dùng cặp thẻ <ol></ol>. Để chọn kiểu đánh thứ

tự và giá trị bắt đầu, dùng thuộc tính type và start (Hình 9.1):

• type: xác định kiểu đánh số: "1", "A", "a", "I" và "i".
• start: xác định giá trị bắt đầu đánh số, nhận giá trị là các số nguyên.

+ Để tạo danh sách không có thứ tự, dùng cặp thẻ <ul></ul>. Để chọn kí tự đầu dòng, ta thiết lập giá trị của đặc tính list-style-type trong thuộc tính style bằng một trong 4 giá trị disc, circle, square và none. 

- Danh sách mô tả dùng để liệt kê các mục kèm với mô tả cho từng mục.

- Để tạo danh sách mô tả, dùng ba thẻ <dl>, <dt> và <dd>:

- Lưu ý: Ta có thể tạo ra các danh sách lồng nhau bằng cách để một danh sách là một mục của một danh sách khác (bằng cách đặt danh sách đó bên trong cụm thẻ <li></li> của mục tương ứng).

2. THIẾT LẬP BẢNG

- Phần tử bảng được dùng khi cần thêm dữ liệu có thể sắp xếp dưới dạng hàng và cột vào trang web.

- Bảng được tạo từ các hàng, mỗi hàng gồm các ô dữ liệu. Hàng đầu tiên có thể là hàng tiêu đề.

- Trong HTML5, các thành phần của bảng lần lượt được định nghĩa bởi các thẻ:

+ <table> - tạo bảng.

+ <tr> - tạo hàng.

+ <td> - tạo các ô dữ liệu.

+ <th> - tạo ô tiêu đề.

- Bảng trong Hình 9.4 có thể được định dạng thêm để đẹp và dễ đọc hơn bằng cách chỉnh các thuộc tính của bảng:

+ Thêm tiêu đề: sử dụng thẻ <caption>, ngay sau thẻ <table> và trước thẻ <tr> đầu tiên.

+ Tạo khung bảng: sử dụng thuộc tính con border của thuộc tính style có giá trị là một bộ ba thuộc tính nhỏ hơn sau:

Trong đó:

• Ba thuộc tính cách nhau bởi dấu cách.
• Hai thuộc tính đầu là bắt buộc.
• Thuộc tính kiểu viền có thể nhận một trong bốn giá trị (solid, dotted, double, none), còn thuộc tính màu viền mặc định là màu đen và có thể bỏ qua.

+ Điều chỉnh kích thước: sử dụng thuộc tính con width và height của thuộc tính style. Kích thước được đặt có thể là theo tỉ lệ với khối bao ngoài đối tượng (%) hoặc theo số điểm ảnh (px).

Lưu ý: Không nên sử dụng kích thước theo px do các thiết bị hiển thị có sự khác nhau về kích thước và số điểm ảnh có thể dẫn đến bảng không hiển thị đúng như mong đợi.

+ Gộp ô: sử dụng thuộc tính rowspan (cho hàng) và colspan (cho cột). Việc gộp ô trên hàng được thực hiện như sau (tương tự đối với cột, sử dụng thuộc tính colspan):

• Thêm rowspan="số_hàng_muốn ghép" cho phần tử <th> hoặc <td> thuộc hàng đầu tiên cần ghép.
• Đối với các hàng tiếp theo: Bỏ qua cặp thẻ <th> hoặc <td> tại vị trí tương ứng (nếu bước trên đặt rowspan="3" thì bỏ qua hai hàng tiếp theo).

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

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

- Bước 1: Văn bản gồm hai phần tử:

• Một phần tử tiêu đề.
• Một phần tử danh sách lồng nhau.

- Bước 2: Tạo tiêu đều.

- Bước 3: Tạo danh sách không có thứ tự.

- Bước 4: Tạo mục THỂ THAO.

- Bước 5: Tạo mục NGHỆ THUẬT.

Nhiệm vụ 2: Tạo bảng

- Bước 1: Xác định các thông số của bảng.

- Bước 2: Tạo bảng kèm caption.

- Bước 3: Tạo hai hàng đầu.

- Bước 4: Tạo các hàng còn lại