close

Hướng dẫn Định dạng danh sách và bảng trong CSS - Thuộc tính và ví dụ

Định dạng danh sách và bảng là một phần quan trọng của việc hiển thị thông tin trên trang web của bạn. CSS cung cấp các thuộc tính và lớp để tạo và tùy chỉnh danh sách và bảng theo ý muốn. Dưới đây là hướng dẫn chi tiết về cách định dạng danh sách và bảng trong CSS.

 

Định dạng danh sách

Danh sách không đánh số (unordered list - ul)

Thuộc tính chính: list-style-type.

Giá trị: none, disc, circle, square.

Ví dụ:

ul {
  list-style-type: disc;
}

Danh sách đánh số (ordered list - ol)

Thuộc tính chính: list-style-type.

Giá trị: none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman.

Ví dụ:

ol {
  list-style-type: decimal;
}

Danh sách định nghĩa (definition list - dl)

Thuộc tính chính: Không có thuộc tính chính định dạng danh sách định nghĩa trong CSS. Tuy nhiên, bạn có thể tạo kiểu cho các phần tử trong danh sách bằng cách sử dụng các lớp hoặc thuộc tính khác như font-size, font-weight, margin, padding, v.v.

Ví dụ:

<dl>
  <dt>HTML</dt>
  <dd>Ngôn ngữ đánh dấu siêu văn bản</dd>
  <dt>CSS</dt>
  <dd>Ngôn ngữ định dạng trang web</dd>
</dl>

dt {
  font-weight: bold;
}

 

Định dạng bảng

Định dạng cấu trúc bảng

Thuộc tính chính: border-collapse.

Giá trị: separate (mặc định), collapse.

Ví dụ:

table {
  border-collapse: collapse;
}

Định dạng đường viền bảng

Thuộc tính chính: border.

Giá trị: Một giá trị đường viền, ví dụ: "1px solid black".

Ví dụ:

table {
  border: 1px solid black;
}

Định dạng đường viền của các ô trong bảng

Thuộc tính chính: border.

Giá trị: Một giá trị đường viền, ví dụ: "1px solid black".

Ví dụ:

td, th {
  border: 1px solid black;
}

Định dạng căn chỉnh và khoảng cách giữa các ô trong bảng

Thuộc tính chính: text-align, padding.

  • text-align: Giá trị căn chỉnh, ví dụ: left, right, center.
  • padding: Giá trị khoảng cách trong ô, ví dụ: 10px.

Ví dụ:

th {
  text-align: center;
  padding: 10px;
}

Định dạng màu nền và màu chữ trong bảng

Thuộc tính chính: background-color, color.

  • background-color: Giá trị màu nền, ví dụ: "lightgray".
  • color: Giá trị màu chữ, ví dụ: "white".

Ví dụ:

table {
  background-color: lightgray;
  color: white;
}

Định dạng kích thước cột và hàng trong bảng

Thuộc tính chính: width, height.

  • width: Giá trị chiều rộng, ví dụ: "100px", "20%".
  • height: Giá trị chiều cao, ví dụ: "50px", "10%".

Ví dụ:

th {
  width: 100px;
  height: 50px;
}

 

Đây là một hướng dẫn chi tiết về cách định dạng danh sách và bảng trong CSS. Bạn có thể tùy chỉnh các giá trị và thuộc tính khác để tạo ra các kiểu danh sách và bảng phù hợp với nhu cầu thiết kế của mình trên trang web.