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

Nguyễn Nghĩa

29/08/2020•2 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>

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> là 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>

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 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 và đà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>

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

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

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

Danh sách lồng danh sách

Bài chung series

Featured Apps

Community

Legal

IO Stream Co., Ltd