Lý thuyết Tin 12 Kết nối tri thức Bài 9: Tạo danh sách, bảng

Với tóm tắt lý thuyết Tin học 12 Bài 9: Tạo danh sách, bảng sách Kết nối tri thức hay nhất, ngắn gọn sẽ giúp học sinh lớp 12 nắm vững kiến thức trọng tâm, ôn luyện để học tốt môn Tin 12.

Lý thuyết Tin 12 Kết nối tri thức Bài 9: Tạo danh sách, bảng

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:

<thẻ bắt đầu.

<li> mục thứ 1 </li>

<li> mục thứ n </li>

</thẻ kết thúc)

Để 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ố. 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ố nguyên.

Kết quả

Để 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. 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>:

2. Thiết lập 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: "độ_dày_theo_px kiểu_viền [màu_viền]"

Đ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).

Gộp ô: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).

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.

3. Thực hành tạo danh sách và bảng

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

Hướng dẫn:

Bước 1. Xác định thành phần của văn bản đề và máy

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 đều bằng cặp thẻ <h2>...</h2>.

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. 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

Hướng dẫn:

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

– Bảng có 7 hàng, 7 cột.

Thuộc tính Caption của bảng là “Lịch hoạt động CLB Thể thao”.

– Hai ô 1, 2 của cột 1 và hai ô 1, 2 của cột 2 được gộp (rowspan="2"). – Các ô 3, 4, 5, 6, 7 của hàng 1 được gop (colspan="5").

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>

</tr>

<th>Thứ 6</th>

... <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 <td></td> ở giữa chứa dữ liệu như Hình 9.8.

Lưu lại tập với tên CLB.html.

Xem thêm tóm tắt lý thuyết Tin học lớp 12 Kết nối tri thức hay khác:

• Lý thuyết Tin học 12 Bài 10: Tạo liên kết

• Lý thuyết Tin học 12 Bài 11: Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web

• Lý thuyết Tin học 12 Bài 12: Tạo biểu mẫu

• Lý thuyết Tin học 12 Bài 13: Khái niệm, vai trò của CSS

• Lý thuyết Tin học 12 Bài 14: Định dạng văn bản bằng CSS

Xem thêm các tài liệu học tốt lớp 12 hay khác:

• Giải sgk Tin học 12 Kết nối tri thức
• Giải Chuyên đề Tin học 12 Kết nối tri thức
• Giải SBT Tin học 12 Kết nối tri thức
• Giải lớp 12 Kết nối tri thức (các môn học)
• Giải lớp 12 Chân trời sáng tạo (các môn học)
• Giải lớp 12 Cánh diều (các môn học)

---