Search…

HTML - Phần 4: Các Thẻ Định Dạng Danh Sách

29/08/20202 min read
Các thẻ định dạnh danh sách <ul>, <ol>, <li> trong HTML. Các thẻ danh sách là những thẻ được sử dụng khá phổ biến trong một trang web ví dụ như tạo menu trang web, thể hiện danh sách có cùng tính chất.

Danh sách có thứ tự <ol>

Danh sách có thứ tự (Ordered List) được định nghĩa bởi cặp thẻ đóng mở <ol>...</ol>. Mỗi phần tử trong <ol> được định nghĩa bởi thẻ <li></li> (List Item).

<!DOCTYPE html>
<html>
 <head></head>
 <body>
   <h3>Danh sách một số tác giả của STDIO</h3>
   <ol>
     <li>Nguyễn Nghĩa</li>
     <li>Hoàng Thái</li>
     <li>Phan Khôi Nguyên</li>
   </ol>
 </body>
</html>
Danh sách có thứ tự <ol>

Mặc định các phần tử trong danh sách được sắp xếp theo số thứ tự tăng dần bắt đầu từ 1. Thẻ <ol> có một thuộc tính type giúp xác định danh sách sẽ được sắp xếp như thế nào. Chi tiết được mô tả ở bảng sau:

Type Mô tả
type="1" Các phần tử trong danh sách sẽ được sắp sếp theo thứ tự tăng dần (mặc định).
type="A" Các phần tử trong danh sách sẽ được sắp xếp tăng dần theo bảng chữ cái viết hoa.
type="a" Các phần tử trong danh sách sẽ được sắp xếp tăng dần theo bảng chữ cái viết thường.
type="I" Các phần tử trong danh sách sẽ được sắp xếp theo kí tự La Mã viết in hoa.
type="i"  Các phần tử trong danh sách sẽ được sắp xếp theo kí tự La Mã viết thường.

Ví dụ với thuộc tính của <ol>type="a"

<!DOCTYPE html>
<html>
 <head></head>
 <body>
   <h3>Danh sách một số tác giả của STDIO</h3>
  <ol type="a">
     <li>Nguyễn Nghĩa</li>
     <li>Hoàng Thái</li>
     <li>Phan Khôi Nguyên</li>
   </ol>
 </body>
</html>
<ol> với type="a"

Thử từng giá trị của type để hiểu rõ hơn.

Danh sách không thứ tự <ul>

Danh sách không có thứ tự (Unordered List) được định nghĩa bởi cặp thẻ đóng mở <ul></ul> với mỗi phần tử trong danh sách được định nghĩa bởi thẻ <li> (List Item).

Ví dụ danh sách điện thoại

<!DOCTYPE html>
<html>
 <head></head>
 <body>
   <h3>Danh sách điện thoại</h3>
   <ul>
     <li>Apple iPhone X</li>
     <li>Google Pixel 4</li>
     <li>Samsung Gallaxy Note 10+</li>
   </ul>
 </body>
</html>
Danh sách không có thứ tự <ul>

Danh sách lồng danh sách

Mỗi <li> có thể chứa một danh sách <ol> hoặc <ul>.

Ví dụ danh sách đào tạo cá nhânđào tạo doanh nghiệp.

<!DOCTYPE html>
<html>
 <head></head>
 <body>
   <h3>Danh sách các đào tạo lập trình - STDIO Training</h3>
   <ol>
     <li>
       Đào tạo cá nhân
       <ul>
         <li>Front-end Web Cơ Bản và Nâng Cao với React.js</li>
         <li>Back-end với Node.js và MongoDB</li>
       </ul>
     </li>
     <li>
       Đào tạo doanh nghiệp
       <ul>
         <li>Advanced C++ Dành Cho Kỹ Sư và Doanh Nghiệp</li>
         <li>C# Advanced Windows Forms Application Cho Doanh Nghiệp</li>
         <li>Luyện - Thi Chứng Chỉ ISTQB</li>
       </ul>
     </li>
   </ol>
 </body>
</html>
Danh sách lồng danh sách với thẻ <ul> <ol> <li>

Bài chung series

IO Stream

IO Stream Co., Ltd

30 Trinh Dinh Thao, Hoa Thanh ward, Tan Phu district, Ho Chi Minh city, Vietnam
+84 28 22 00 11 12
developer@iostream.co

383/1 Quang Trung, ward 10, Go Vap district, Ho Chi Minh city
Business license number: 0311563559 issued by the Department of Planning and Investment of Ho Chi Minh City on February 23, 2012

©IO Stream, 2013 - 2024