Sử dụng thẻ HTML để tạo được danh sách và bảng. Thiết lập các thuộc tính tùy chỉnh cho danh sách và bảng.
Có thể sử dụng công cụ viết code HTML online: https://otth.vn/codeweb/
1. Tạo danh sách
Có ba loại danh sách chính:
- Danh sách có thứ tự (
<ol>): Các mục được đánh số thứ tự (1, 2, 3… hoặc a, b, c… hoặc I, II, III…). Có thể thay đổi kiểu đánh số và giá trị bắt đầu bằng các thuộc tínhtypevàstart. - Danh sách không thứ tự (
<ul>): Các mục được đánh dấu bằng ký tự đầu dòng (chấm tròn, hình vuông…). Có thể thay đổi kiểu ký tự đầu dòng bằng thuộc tínhlist-style-typetrong CSS. - Sanh sách mô tả (
<dl>) trong HTML. Loại danh sách này dùng để hiển thị các mục kèm theo mô tả chi tiết, thường dùng cho các thuật ngữ hoặc định nghĩa.
Cả hai loại danh sách <ol> và <ul> đều sử dụng thẻ <li> để biểu diễn mỗi mục trong danh sách.
a. Danh sách có thứ tự
Danh sách có thứ tự dùng để hiển thị một tập hợp các mục theo thứ tự nhất định, thường được đánh số hoặc chữ cái.
<ol>
<li>Mục thứ nhất</li>
<li>Mục thứ hai</li>
<li>Mục thứ ba</li>
...
</ol>Thuộc tính:
type: Xác định kiểu đánh số thứ tự. Các giá trị có thể là:1: Số thứ tự (mặc định) (1, 2, 3…)A: Chữ cái in hoa (A, B, C…)a: Chữ cái thường (a, b, c…)I: Số La Mã in hoa (I, II, III…)i: Số La Mã thường (i, ii, iii…)
start: Xác định giá trị bắt đầu của danh sách. Giá trị này là một số.
Ví dụ 1: Danh sách số thứ tự bắt đầu từ 5
<ol type="1" start="5">
<li>Mục thứ nhất</li>
<li>Mục thứ hai</li>
<li>Mục thứ ba</li>
</ol>
Ví dụ 2: Danh sách chữ cái in hoa
<ol type="A">
<li>Mục thứ nhất</li>
<li>Mục thứ hai</li>
<li>Mục thứ ba</li>
</ol>
b. Danh sách KHÔNG thứ tự
Danh sách không thứ tự dùng để hiển thị một tập hợp các mục không theo thứ tự cụ thể. Mỗi mục thường được đánh dấu bằng một ký tự đầu dòng.
<ul>
<li>Mục thứ nhất</li>
<li>Mục thứ hai</li>
<li>Mục thứ ba</li>
...
</ul>Thuộc tính:
list-style-type: Xác định kiểu ký tự đầu dòng. Có thể sử dụng thuộc tính này trong CSS hoặc thuộc tínhstylecủa thẻ<ul>. Các giá trị thường dùng:disc: Chấm tròn (mặc định)circle: Vòng tròn rỗngsquare: Hình vuôngnone: Không có ký tự đầu dòng
Ví dụ: Danh sách ký tự đầu dòng hình vuông
<ul
style="list-style-type: square;">
<li>Mục thứ nhất</li>
<li>Mục thứ hai</li>
<li>Mục thứ ba</li>
</ul>
c. Danh sách mô tả
Danh sách mô tả (<dl>) trong HTML được sử dụng để hiển thị một danh sách các thuật ngữ và mô tả tương ứng của chúng. Nó thường được dùng để trình bày các định nghĩa, liệt kê các cặp khóa-giá trị, hoặc hiển thị bất kỳ loại dữ liệu nào có cấu trúc thuật ngữ-mô tả.
Các thành phần chính của danh sách mô tả:
<dl>: Thẻ này đánh dấu bắt đầu và kết thúc của danh sách mô tả. Nó bao quanh tất cả các thuật ngữ và mô tả.<dt>: Thẻ này xác định một thuật ngữ (definition term) trong danh sách. Nói cách khác, nó chứa từ hoặc cụm từ mà bạn muốn định nghĩa hoặc giải thích.<dd>: Thẻ này cung cấp mô tả (definition description) cho thuật ngữ đứng trước nó (<dt>). Mô tả có thể bao gồm văn bản, hình ảnh, liên kết, hoặc bất kỳ nội dung HTML hợp lệ nào khác.
Ví dụ:
<dl>
<dt>Kem</dt>
<dd>Món ăn ngọt, ở dạng đông lạnh.</dd>
<dt>Trà sữa</dt>
<dd>Là đồ uống làm từ hai nguyên liệu trà và sữa.</dd>
</dl>Kết quả:
Ví dụ 2: Các danh sách mô tả lồng vào nhau
<dl>
<dt>Trái cây</dt>
<dd>
<dl>
<dt>Chuối</dt>
<dd>Quả có vỏ màu vàng, thịt ngọt.</dd>
<dt>Táo</dt>
<dd>Quả có nhiều màu sắc, vị ngọt hoặc chua.</dd>
</dl>
</dd>
<dt>Rau củ</dt>
<dd>
<dl>
<dt>Cà chua</dt>
<dd>Quả mọng màu đỏ, thường được dùng trong nấu ăn.</dd>
<dt>Cà rốt</dt>
<dd>Củ màu cam, giàu vitamin A.</dd>
</dl>
</dd>
</dl>Kết quả:
2. Tạo bảng
Cách tạo và sử dụng bảng trong HTML. Bảng là một công cụ mạnh mẽ để trình bày dữ liệu có cấu trúc, cho phép sắp xếp thông tin thành các hàng và cột, giúp người xem dễ dàng so sánh và nắm bắt thông tin.
Để tạo một bảng, ta sử dụng các thẻ HTML sau:
<table>: Xác định một bảng.<tr>: Xác định một hàng trong bảng.<th>: Xác định một ô tiêu đề (header cell) trong hàng.<td>: Xác định một ô dữ liệu (data cell) trong hàng.
Ngoài ra, ta có thể sử dụng các thuộc tính và thẻ sau để định dạng và tùy chỉnh bảng:
<caption>: Thêm tiêu đề cho bảng.border: Tạo đường viền cho bảng và các ô.widthvàheight: Điều chỉnh kích thước của bảng và các ô.colspanvàrowspan: Gộp nhiều ô thành một ô lớn hơn.- CSS: Tạo kiểu dáng cho bảng, ví dụ như thay đổi màu sắc, font chữ, căn lề,…
Việc sử dụng bảng một cách hiệu quả sẽ giúp trình bày dữ liệu một cách rõ ràng, dễ hiểu và chuyên nghiệp, từ đó nâng cao trải nghiệm người dùng trên website.
Ví dụ 1: Tạo bảng đơn giản
<table>
<tr>
<th>Tên trái cây</th>
<th>Màu sắc</th>
<th>Hương vị</th>
</tr>
<tr>
<td>Táo</td>
<td>Đỏ, xanh</td>
<td>Ngọt, chua</td>
</tr>
<tr>
<td>Chuối</td>
<td>Vàng</td>
<td>Ngọt</td>
</tr>
<tr>
<td>Cam</td>
<td>Cam</td>
<td>Chua ngọt</td>
</tr>
</table>
Ví dụ 2: Tạo bảng có sử dụng thuộc tính bổ sung và thẻ <caption>
Bảng này sẽ hiển thị lịch học của một học sinh, có sử dụng <caption>, colspan, rowspan và thuộc tính style để định dạng.
<table border="1" style="width: 80%">
<caption>Lịch học của An</caption>
<tr>
<th rowspan="2">Thứ</th>
<th colspan="4">Buổi sáng</th>
</tr>
<tr>
<th>Tiết 1</th>
<th>Tiết 2</th>
<th>Tiết 3</th>
<th>Tiết 4</th>
</tr>
<tr>
<td>Thứ 2</td>
<td>Toán</td>
<td>Văn</td>
<td>Anh</td>
<td>Thể dục</td>
</tr>
<tr>
<td>Thứ 3</td>
<td>Lý</td>
<td>Hóa</td>
<td colspan="2">Sinh học</td>
</tr>
</table>Kết quả:
Bài tập củng cố
Viết mã HTML để tạo danh sách như mẫu sau đây
Lưu ý:
- Viết đầy đủ cấu trúc của tập tin HTML.
- Dòng tiêu đề: sử dụng thẻ h2, font chữ Tahoma và chữ màu đỏ.
- Các mục THỂ THAO và NGHỆ THUẬT chữ in đậm, màu xanh lá cây.
- Sử dụng các thuộc tính cần thiết của các thẻ để có kết quả giống hình.
Có thể sử dụng công cụ viết code HTML online: https://chonsach.com/codeweb/
