Các thẻ liên quan đến bảng

Trong bài viết này, chúng tôi giải thích các thẻ liên quan đến bảng.

Điều này giải thích cách mô tả bảng và chú giải bảng trong HTML kèm theo các ví dụ.

YouTube Video

Các thẻ liên quan đến bảng

Thẻ <table>

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• Thẻ <table> được sử dụng để tạo một bảng tổ chức và hiển thị dữ liệu trong các hàng và cột.

  Thẻ <table> tổ chức dữ liệu trực quan và tạo bảng với nhiều hàng và cột. Các hàng được định nghĩa bằng thẻ <tr>, các ô tiêu đề bằng thẻ <th>, và các ô dữ liệu bằng thẻ <td>.

• Bạn có thể tùy chỉnh kiểu dáng và bố cục của bảng bằng CSS.

Thẻ <tr>

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• Thẻ <tr> được sử dụng để định nghĩa các hàng trong bảng.

  Thẻ <tr> được sử dụng để tạo mỗi hàng của bảng, bao gồm các ô (<td> hoặc <th>).

• Mỗi hàng có thể chứa nhiều ô, tạo nên cấu trúc tổng thể của bảng.

Thẻ <th> và <td>

1<th>Header 1</th>
2<td>Data 1</td>

• Thẻ <th> định nghĩa một ô tiêu đề của bảng. Thường được sử dụng trong các hàng tiêu đề, nội dung của các ô sẽ được in đậm và canh giữa.
• Thẻ <td> định nghĩa một ô dữ liệu tiêu chuẩn của bảng, để hiển thị dữ liệu thông thường của bảng.

Thuộc tính colspan và rowspan

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan và rowspan là các thuộc tính được sử dụng khi các ô của bảng kéo dài qua nhiều cột hoặc hàng.

• Thuộc tính colspan cho phép một ô kéo dài qua nhiều cột.
• Thuộc tính rowspan cho phép một ô bao phủ nhiều hàng.

Các thẻ <thead>, <tbody>, <tfoot>

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• Thẻ <thead> được sử dụng để xác định phần tiêu đề của một bảng. Nó thường chứa các tiêu đề của cột.

  Thẻ <thead> được đặt ở đầu bảng, xác định tiêu đề hoặc tiêu đề của cột. Điều này giúp phân biệt rõ ràng các phần của dữ liệu.

• Thẻ <tbody> xác định phần thân của bảng. Nó chứa các dòng dữ liệu.

  Thẻ <tbody> chứa phần nội dung chính của dữ liệu bảng. Nó được đặt giữa các dòng được bao bọc bởi các thẻ <thead> và <tfoot>.

• Thẻ <tfoot> xác định phần chân của bảng, bao gồm tổng hoặc ghi chú.

  Thẻ <tfoot> được đặt ở cuối bảng và được sử dụng để hiển thị tổng hoặc các chú thích khác. Nó đặc biệt hữu ích khi tóm tắt hoặc hiển thị tổng cho các tập dữ liệu lớn.

Thẻ <caption> và <colgroup>

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• Thẻ <caption> thêm một tiêu đề để làm rõ nội dung của bảng. Nó thường được đặt ở đầu bảng và dùng để tóm tắt nội dung tổng thể của bảng.

• Thẻ <colgroup> nhóm các cột trong bảng và được sử dụng để áp dụng kiểu dáng hoặc bố cục. Bạn có thể chỉ định màu nền hoặc chiều rộng cho các cột cụ thể bằng cách bao gồm thẻ <col>.

Ví dụ về bảng

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• Thẻ <table> được sử dụng để tạo một bảng hiển thị dữ liệu theo hàng và cột.

• Thẻ <thead> nhóm các hàng tiêu đề của bảng. Nó thường chứa các thẻ <th>, được sử dụng như tiêu đề.

• Thẻ <tbody> nhóm nội dung chính của bảng. Nó thường chứa các hàng dữ liệu được tạo thành từ các thẻ <td>.

• Thẻ <tfoot> nhóm các hàng chân của bảng. Nó phù hợp để hiển thị tổng số hoặc ghi chú.

• Thẻ <colgroup> nhóm các cột của bảng và được sử dụng để áp dụng phong cách cho toàn bộ.

• Thẻ <caption> thêm chú thích hoặc tiêu đề cho bảng, giúp người dùng dễ hiểu hơn về nội dung của bảng.

• Thuộc tính colspan cho phép một ô kéo dài qua nhiều cột.

• Thuộc tính rowspan cho phép một ô bao phủ nhiều hàng.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video