Bài học cùng chủ đề
Báo cáo học liệu
Mua học liệu
Mua học liệu:
-
Số dư ví của bạn: 0 coin - 0 Xu
-
Nếu mua học liệu này bạn sẽ bị trừ: 2 coin\Xu
Để nhận Coin\Xu, bạn có thể:
![](https://rs.olm.vn/images/bird.gif)
Bài 9. Tạo danh sách, bảng SVIP
1. Tạo danh sách
a. Danh sách có hoặc không có thứ tự
Mụ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 đoạn mã HTML](https://cdn3.olm.vn/upload/img_teacher/0603/img_teacher_2024-06-03_665d767f0b1eb_12.png)
Danh sách có thứ tự
Sử dụng cặp thẻ <ol></ol> để chọn kiểu đánh thứ tự và giá trị bắt đầu. Sử dụng hai thuộc tính sau:
- type: xác định kiểu đánh số. Các kiểu đánh số: "1", "A", "a", "I" và "i".
- start: xác định kiểu giá trị bắt đầu đánh số, nhận giá trị là các số thực.
![Minh họa sử dụng danh sách có thứ tự](https://cdn3.olm.vn/upload/img_teacher/0603/img_teacher_2024-06-03_665d787e00edc_12.png)
Danh sách không có thứ tự
Sử dụng cặp thẻ <ul></ul> để chọn kiểu đánh không thứ tự và giá trị bắt đầu. Sử dụng hai thuộc tính style với giá trị của đặc tính list-style-type, các giá trị đi kèm là disc, circle, square và none.
![Minh họa sử dụng danh sách không có thứ tự](https://cdn3.olm.vn/upload/img_teacher/0603/img_teacher_2024-06-03_665d79c2e5fa6_12.png)
b. Danh sách mô tả
Dùng để liệt kê các mục kèm theo mô tả từng mục.
![Cấu trúc đoạn mã HTML](https://cdn3.olm.vn/upload/img_teacher/0603/img_teacher_2024-06-03_665d7bfae1bea_12.png)
![loading...](https://cdn3.olm.vn/upload/img_teacher/0603/img_teacher_2024-06-03_665d7c5250fe8_12.png)
Tạo ra danh sách lồng bằng cách đặt danh sách con là một mục của danh sách chính.
2. Thiết lập bảng
Bảng tạo từ các hàng, mỗi hàng gồm các ô dữ liệu.
Hàng đầu tiên là hàng tiêu đề của bảng.
Các thành phần: <table> - tạo bảng, <tr> - tạo hàng, <td> - tạo các ô dữ liệu, <th> - tạo ô tiêu đề.
![Cấu trúc bảng HTML](https://cdn3.olm.vn/upload/img_teacher/0603/img_teacher_2024-06-03_665d806621b6d_12.png)
Sử dụng thẻ cấu trúc <caption>Tiêu_đề</caption> ngay sau thẻ <table> và trước thẻ <tr> để thêm tiêu đề cho bảng.
Sử dụng cấu trúc thuộc tính border:độ_dày_theo_px kiểu_viền [màu_viền] để tạo khung cho bảng.
Sử dụng đặc tính con with và height để điều chỉnh kích thước.
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ị chữ, 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 |
Sử dụng thuộc tính rowspan (cho hàng) hoặc colspan (cho cột) để gộp ô.
![Ví dụ gộp cột và hàng trong bảng](https://cdn3.olm.vn/upload/img_teacher/0603/img_teacher_2024-06-03_665d868637453_12.png)
Bạn có thể đánh giá bài học này ở đây