BÀI 9 - TẠO DANH SÁCH, BẢNG (KNTT

Bài 9 - Tạo danh sách, bảng (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

TÓM TẮT NỘI DUNG:
1. Tạo danh sách
a) Danh sách có hoặc không có thứ tự
b) Danh sách mô tả
2. Thiết lập bảng
3. Thực hành tạo danh sách và bảng

1. TẠO DANH SÁCH

Danh sách trong html cho phép nhóm và liệt kê tập hợ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.

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.12):
- type: xác định kiểu đánh số. Các kiểu đánh số là: “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ố thực.

• Để 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. Hình 9.2 mô tả ví dụ một danh sách dùng hình vuông làm ký tự đầu dòng và kết quả.

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ó hoặc không có thứ tự. Để tạo danh sách mô tả em 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 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 từ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 ứng 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 và <th>- tạo ô tiêu đề.
Hình 9.4 mô tả đoạn mã html tạo một bảng bằng các thẻ trên (theo thứ tự từ trên xuống dưới, từ trái sang phải) và bảng 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 bao gồm: thêm tiêu đề cho bảng, tạo khung bảng, điều chỉnh kích thước hàng/ cột/ ô và gộp ô.

• 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: Trong HTML5, độ dày khung được thiết lập cho viền khung bảng hoặc khung của từng ô bằ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 đặ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). Bản chất của việc gộp ô là mở rộng một ô bằng cách thêm một số hàng hoặc một số cột lân cận có cùng nội dung. Việc này giúp tạo ra được bảng có cấu trúc phức tạp nhưng cũng làm cho việc đánh dấu, theo dõi và kiểm soát số lượng ô trở nên khó khăn hơn. 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).