Khóa học IT HTML Cơ bản 012_Danh sách và Bảng

Danh sách

Danh sách HTML là các phần tử quan trọng để tổ chức và trình bày thông tin trên trang web. Bằng cách sử dụng các loại danh sách khác nhau, bạn có thể cấu trúc và hiển thị nội dung tốt hơn.

Có ba loại danh sách HTML:

1. Danh sách không có thứ tự (Unordered list): Được tạo bằng phần tử <ul>, mỗi mục danh sách được biểu thị bằng phần tử <li>.
2. Danh sách có thứ tự (Ordered list): Được tạo bằng phần tử <ol>, các mục danh sách cũng được biểu thị bằng phần tử <li>, nhưng chúng tự động thêm số thứ tự.
3. Danh sách định nghĩa (Definition list): Được tạo bằng phần tử <dl>, chứa các phần tử <dt> (thuật ngữ định nghĩa) và <dd> (mô tả định nghĩa).

Danh sách không có thứ tự

Danh sách không có thứ tự là loại danh sách phổ biến nhất, thêm một dấu chấm nhỏ (còn gọi là điểm đánh dấu danh sách) trước mỗi mục danh sách. Nó sử dụng <ul> làm vùng chứa cho danh sách và <li> để mô tả các mục danh sách cụ thể.

Ví dụ:

1
<ul>
2
  <li>Mục 1</li>
3
  <li>Mục 2</li>
4
  <li>Mục 3</li>
5
</ul>

Hiệu ứng:

Danh sách có thứ tự

So với danh sách không có thứ tự, mỗi mục trong danh sách có thứ tự được đánh dấu bằng số. Danh sách có thứ tự sử dụng <ol> làm vùng chứa và tương tự sử dụng <li> để mô tả các mục danh sách cụ thể.

Ví dụ:

1
<ol>
2
  <li>Mục đầu tiên</li>
3
  <li>Mục thứ hai</li>
4
  <li>Mục thứ ba</li>
5
</ol>

Hiệu ứng:

Danh sách định nghĩa

Danh sách định nghĩa bao gồm các phần tử <dl> (danh sách định nghĩa), <dt> (thuật ngữ định nghĩa) và <dd> (mô tả định nghĩa). Danh sách định nghĩa thường được sử dụng để hiển thị một tập hợp các thuật ngữ và định nghĩa của chúng.

Ví dụ:

1
<dl>
2
  <dt>Thuật ngữ 1</dt>
3
  <dd>Mô tả 1</dd>
4
  <dt>Thuật ngữ 2</dt>
5
  <dd>Mô tả 2</dd>
6
</dl>

Hiệu ứng:

[!Tóm tắt]

• Các mục danh sách có thể chứa đoạn văn, ngắt dòng, hình ảnh, liên kết và các danh sách khác, v.v.

Bảng

Bảng HTML là phần tử mạnh mẽ để hiển thị dữ liệu có cấu trúc. Bảng HTML cơ bản được biểu thị bằng phần tử <table>, chứa một số phần tử con quan trọng như <tr> (hàng bảng), <th> (ô tiêu đề bảng) và <td> (ô dữ liệu bảng).

Ví dụ:

1
<table>
2
  <tr>
3
    <th>Tên</th>
4
    <th>Tuổi</th>
5
    <th>Giới tính</th>
6
  </tr>
7
  <tr>
8
    <td>Trương Tam</td>
9
    <td>20</td>
10
    <td>Nam</td>
11
  </tr>
12
  <tr>
13
    <td>Lý Tứ</td>
14
    <td>21</td>
15
    <td>Nữ</td>
16
  </tr>
17
</table>

Hiệu ứng:

Các phần tử bảng:

• <table>: Biểu thị toàn bộ bảng.
• <thead>: Định nghĩa phần tiêu đề bảng, chứa các phần tử <th> để biểu thị tiêu đề cột.
• <tr>: Hàng bảng, chứa các ô tiêu đề <th>.
• <th>: Ô tiêu đề bảng, được sử dụng để xác định tiêu đề cột.
• <tbody>: Định nghĩa phần thân bảng, nơi mỗi hàng chứa các phần tử <td> biểu thị dữ liệu thực tế.
• <td>: Ô dữ liệu bảng, chứa dữ liệu thực tế.
• <tfoot>: Định nghĩa phần chân bảng, thường được sử dụng cho tóm tắt bảng hoặc thông tin chân trang khác.
• <caption>: Được sử dụng để thêm tiêu đề cho bảng HTML, thường hiển thị ở đầu bảng.
• <colgroup>: Định nghĩa nhóm cột bảng.
• <col>: Định nghĩa thuộc tính cho cột bảng.

Ví dụ:

1
<table border="1">
2
  <caption>Đây là tiêu đề bảng</caption>
3
  <colgroup>
4
    <col style="width: 50px; background-color: #f2f2f2;">
5
    <col style="width: 100px; background-color: #ddd;">
6
    <col style="width: 150px; background-color: #f2f2f2;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th>Tên</th>
11
      <th>Tuổi</th>
12
      <th>Thành phố</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td>Trương Tam</td>
18
      <td>25</td>
19
      <td>Bắc Kinh</td>
20
    </tr>
21
    <tr>
22
      <td>Lý Tứ</td>
23
      <td>30</td>
24
      <td>Thượng Hải</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3">Tổng số người: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Hiệu ứng:

Thuộc tính bảng:

• border: Chỉ định đường viền bảng. Giá trị là số biểu thị độ rộng đường viền.
• cellpadding: Chỉ định khoảng cách giữa các ô. Giá trị là số biểu thị kích thước khoảng cách.
• cellspacing: Chỉ định khoảng cách giữa các đường viền ô. Giá trị là số biểu thị kích thước khoảng cách.
• width: Chỉ định chiều rộng bảng. Giá trị là số biểu thị chiều rộng.
• height: Chỉ định chiều cao bảng. Giá trị là số biểu thị chiều cao.
• style: Chỉ định kiểu bảng.

Ví dụ:

1
<table style="border-collapse: collapse; width: 60%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
2
  <caption style="font-size: 1.5em; font-weight: bold; padding: 10px; background-color: #3498db; color: #fff;">Đây là một bảng đẹp</caption>
3
  <colgroup>
4
    <col style="width: 30%;">
5
    <col style="width: 30%;">
6
    <col style="width: 40%;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Tên</th>
11
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Tuổi</th>
12
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Thành phố</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Trương Tam</td>
18
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">25</td>
19
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Bắc Kinh</td>
20
    </tr>
21
    <tr>
22
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Lý Tứ</td>
23
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">30</td>
24
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Thượng Hải</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3" style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color: #3498db; color: #fff;">Tổng số người: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Hiệu ứng:

Hợp nhất bảng

Hợp nhất bảng đề cập đến việc kết hợp hai hoặc nhiều ô thành một ô. Hợp nhất bảng có thể được sử dụng để đơn giản hóa bố cục bảng hoặc làm nổi bật dữ liệu cụ thể. Sử dụng thuộc tính colspan để chỉ định số cột mà một ô trải rộng, hoặc sử dụng thuộc tính rowspan để chỉ định số hàng mà một ô trải rộng. Giá trị thuộc tính là số biểu thị số hàng/cột được trải rộng.

Ví dụ:

1
<table border="1">
2
  <tr>
3
    <td>Ô 1</td>
4
    <td colspan="2">Hợp nhất hai cột theo chiều ngang</td>
5
    <td>Ô 4</td>
6
  </tr>
7
  <tr>
8
    <td rowspan="2">Hợp nhất hai hàng theo chiều dọc</td>
9
    <td>Ô 3</td>
10
    <td>Ô 4</td>
11
    <td>Ô 5</td>
12
  </tr>
13
  <tr>
14
    <td>Ô 7</td>
15
    <td>Ô 8</td>
16
    <td>Ô 9</td>
17
  </tr>
18
</table>

Hiệu ứng:

[!Tóm tắt]

• Bảng không hiển thị đường viền theo mặc định.
• <tr> là viết tắt của table row, biểu thị một hàng trong bảng.
• <td>: td là viết tắt của table data, biểu thị ô dữ liệu bảng.
• <th>: th là viết tắt của table header, biểu thị ô tiêu đề bảng.
• Hầu hết các trình duyệt hiển thị tiêu đề bảng dưới dạng văn bản in đậm, căn giữa.
• Bảng có thể chứa văn bản, hình ảnh, danh sách, đoạn văn, biểu mẫu, đường ngang, các bảng khác, v.v.