Bài 9. Tạo danh sách, bảng
SAU BÀI HỌC NÀY EM SẼ:
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?
1 TẠO DANH SÁCH
Hoạt động 1: Nhận biết phần tử danh sách
Em hãy quan sát Hình 8.3 và nhận xét xem có điểm nào có thể cải tiến về mặt trình bày không?
Danh sách trong HTML cho phép nhóm và liệt kê tập các mục tương tự nhau thành một danh sách để hiển thị. Các dạng danh sách trong HTML cơ bản gồm: danh sách không có thứ tự, danh sách có thứ tự và danh sách mô tả. Có thể tạo danh sách lồng nhau.
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:
a) Danh sách có hoặc không có thứ tự
<ul> <li> mục thứ 1 </li> <li> Mục thứ n </li> </ul><ol type="i"> <li>Nếu delta < 0:</li> <li>Nếu delta = 0:</li> <li>Nếu delta > 0:</li> </ol><ul style="list-style-type: square"> <li>Nếu delta < 0:</li> <li>Nếu delta = 0:</li> <li>Nếu delta > 0:</li> </ul>Nếu delta < 0: Nếu delta = 0: Nếu delta > 0:Hình 9.2. Danh sách có kí tự đầu dòng
i. Nếu delta < 0: ii. Nếu delta = 0: iii. Nếu delta > 0:b) Danh sách mô tả
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. Cấu trúc của đoạn mã tạo danh sách mô tả khác cấu trúc của đoạn mã tạo danh sách có thứ tự hoặc không có thứ tự. Để tạo danh sách mô tả, em dùng ba thẻ <dl>, <dt> và <dd>:
<dl> <dt> Tên mục 1 (chẳng hạn như một thuật ngữ hoặc một nhãn) </dt> <dd> Mô tả của mục 1 (định nghĩa của thuật ngữ hoặc mô tả cho nhãn tương ứng) </dd> <dt> Tên mục n </dt> <dd> Mô tả của mục n </dd> </dl>Ví dụ:
<dl> <dt>Kem</dt> <dd>Món ăn ngọt, ở dạng lạnh.</dd> <dt>Trà sữa</dt> <dd>Đồ uống làm từ hai nguyên liệu trà và sữa.</dd> </dl>Kem: Món ăn ngọt, ở dạng lạnh. Trà sữa: Đồ uống làm từ hai nguyên liệu trà và sữa.Kết quả
Hình 9.3. Danh sách mô tả
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).
Trong HTML, ta có thể định nghĩa các kiểu danh sách có thứ tự, không có thứ tự và danh sách mô tả bằng các thẻ <ol>, <ul> và <dl>.
Làm thế nào để tạo một danh sách lồng nhau, danh sách mức 1 đánh số dạng 1, 2, 3,... và danh sách mức 2 đánh số dạng a, b, c?
2 THIẾT LẬP BẢNG
Hoạt động 2: Lựa chọn định dạng phù hợp nhất
Trong Hội chợ ẩm thực ở trường, lớp 12E dự định bán một số món, các bạn muốn đăng trên trang web của lớp các thông tin: món ăn, đơn giá, số lượng và tổng số tiền. Theo em, các bạn nên dùng dạng biểu diễn nào: danh sách, danh sách mô tả hay bảng? Tại sao?
Phần tử bảng được dùng khi ta 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. Dữ liệu trong bảng có thể là bất kì loại thông tin nào, không nhất thiết là dạng số. Bảng là công cụ để tạo ra các bố cục nhiều cột hoặc phân bố nội dung và các khoảng trắng. Chính vì vậy, độ phức tạp của bảng là thước đo giá trị thiết kế trang web. Tuy nhiên, sử dụng bảng để tạo bố cục tương đối phức tạp nên người ta thường sử dụng CSS để tạo bố cục, nội dung này được trình bày ở các bài sau.
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 đề. Ngôn ngữ HTML xây dựng bảng từ các thành phần tương tự như trên. Các thành phần 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 đề. Hình 9.4 mô tả đoạn mã HTML tạo một bảng, các thẻ trên (theo thứ tự từ trên xuống dưới, từ trái sang phải) và kết quả thu được.
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. Các định dạng cơ bản gồm: thêm tiêu đề cho bảng, tạo khung viền, điều chỉnh kích thước hàng/cột/ô và gộp ô.
border: độ_dày_px kiểu_viền [màu_viền]
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.
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.
Ví dụ:
| Mã HTML | Kết quả |
| <table style="width:80%; height:400px"> | Bảng có chiều rộng bằng 80% phần hiển thị, chiều cao 400px |
| <tr style="height:15%"> | Hàng này có chiều cao bằng 15% độ cao bảng |
| <td style="width:10%"></td> | Ô/cột này có độ rộng bằng 10% độ rộng bảng |
Hình 9.6. Ví dụ gộp hàng và cột của bảng
Phần tử bảng dùng để biểu diễn dữ liệu có cấu trúc dạng bảng. Phần tử bảng được tạo bởi các thẻ chính là <table>, <tr>, <td> và <th>; trình bày bảng bằng thuộc tính style.
Bảng trong ví dụ trên Hình 9.6 có nhược điểm gì? Cần làm thế nào để giải quyết nhược điểm đó?
3 THỰC HÀNH TẠO DANH SÁCH VÀ BẢNG
Nhiệm vụ 1: Tạo danh sách
Yêu cầu: Viết đoạn mã HTML để tạo danh sách các câu lạc bộ của trường như Hình 9.7.
Hướng dẫn:
Bước 1. Xác định thành phần của văn bản:
Văn bản gồm hai phần tử: một phần tử tiêu đề và một phần tử danh sách lồng nhau.
Bước 2. Tạo tiêu đề bằng cặp thẻ <h2>...</h2>. Bước 3. Tạo danh sách không có thứ tự bằng cặp thẻ <ul> và <li>.<ul> <li></li> </ul>
Bước 4. Tạo mục THỂ THAO, với phần mã được thêm vào giữa cặp thẻ ở dòng 2 là định nghĩa của một danh sách có thứ tự.
<li>THỂ THAO <ol> <li>Bóng đá</li> <li>Bơi</li> </ol> </li>Lưu ý: Mục thứ tư của danh sách này là một danh sách có thứ tự, kiểu đánh số type="a".
Bước 5. Làm tương tự với mục NGHỆ THUẬT để hoàn thiện danh sách.
Nhiệm vụ 2: Tạo bảng
Yêu cầu: Lập bảng lịch hoạt động của các câu lạc bộ (Hình 9.8).
Hình 9.8. Lịch hoạt động
Hướng dẫn:
Bước 1. Xác định các thông số của bảng:
Khung viền được đặt border="1" trong thẻ <table> hoặc sử dụng style="border:1px solid" cho thẻ <table> và từng thẻ <td> trong bảng.
Bước 2. Tạo bảng kèm caption:
<table border="1"> <caption>Lịch hoạt động CLB Thể thao</caption> Bước 3. Tạo hai hàng đầu như phân tích phía trên: <tr style="border:1px solid"> <th rowspan="2">Bộ môn</th> <th rowspan="2">GV phụ trách</th> <th colspan="5">Ngày</th> </tr> <tr> <th>Thứ 2</th> <th>Thứ 3</th> <th>Thứ 4</th> <th>Thứ 5</th> <th>Thứ 6</th>Bước 4. Tạo các hàng còn lại, mỗi hàng là một cặp <tr></tr> bao gồm bảy cặp thẻ ở giữa chứa dữ liệu như Hình 9.8.
Lưu lại tệp với tên CLB.html.
LUYỆN TẬP
Sửa lại chương trình trong Hình 9.6a: thay dòng sử dụng thuộc tính style bằng thuộc tính border để tạo viền cho bảng. Sử dụng màu xanh cho viền của ô hai đầu bảng và sử dụng ba màu đỏ, vàng, xanh cho ba chữ Toán, Vật lí và Hoá học.
VẬN DỤNG
Cho trước một bảng dữ liệu cỡ n x 4, mỗi hàng tương ứng với một bộ (họ tên, điểm Toán, điểm Vật lí, điểm Hoá học). Viết chương trình Python để tạo ra tệp HTML thực hiện việc vẽ bảng tương tự như Hình 9.6b và bổ sung dữ liệu vào các hàng phía dưới.