Bảng là một thành phần quan trọng trong HTML để hiển thị dữ liệu theo dạng hàng và cột. Bảng trong HTML được tạo bằng cách sử dụng các thẻ <table>, <tr> và <td>.
Thẻ <table> đại diện cho bảng chính, trong đó chứa tất cả các hàng và cột. Các hàng được định nghĩa bằng thẻ <tr> (table row), trong khi các ô trong hàng được định nghĩa bằng thẻ <td> (table data). Bên cạnh <td>, bạn cũng có thể sử dụng thẻ <th> (table header) để định nghĩa các ô tiêu đề cho bảng.
Bạn có thể sử dụng các thuộc tính như colspan và rowspan để sáp nhập ô trong bảng hoặc trải rộng ô qua nhiều hàng và cột. Ngoài ra, bạn có thể sử dụng các thuộc tính CSS để tùy chỉnh kiểu dáng và bố trí của bảng.
Bảng (<table>)
- Phần tử <table> được sử dụng để tạo một bảng trong HTML.
- Các dữ liệu được đặt trong các hàng (<tr>) và cột (<td> hoặc <th>).
- Mỗi ô dữ liệu được đặt trong các phần tử <td> (ô dữ liệu) hoặc <th> (ô tiêu đề).
<table>
<tr>
<th>STT</th>
<th>Tên</th>
<th>Tuổi</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Tiêu đề cột (<th>)
- Phần tử <th> được sử dụng để tạo tiêu đề cho các cột trong bảng.
- Thường được đặt trong hàng đầu tiên của bảng.
<table>
<tr>
<th>STT</th>
<th>Tên</th>
<th>Tuổi</th>
</tr>
<!-- các hàng dữ liệu -->
</table>
Dòng dữ liệu (<tr>)
- Phần tử <tr> được sử dụng để tạo các dòng dữ liệu trong bảng.
- Các ô dữ liệu (<td>) hoặc ô tiêu đề (<th>) được đặt trong các phần tử <tr> này.
<table>
<tr>
<th>STT</th>
<th>Tên</th>
<th>Tuổi</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Căn chỉnh cột (colspan)
Thuộc tính colspan được sử dụng để xác định số cột mà một ô dữ liệu hoặc ô tiêu đề sẽ chiếm trong bảng.
<table>
<tr>
<th colspan="2">Thông tin cá nhân</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Căn chỉnh hàng (rowspan)
Thuộc tính rowspan được sử dụng để xác định số hàng mà một ô dữ liệu hoặc ô tiêu đề sẽ chiếm trong bảng.
<table>
<tr>
<th rowspan="2">Số thứ tự</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Gộp ô (colspan và rowspan)
Bạn có thể kết hợp cả colspan và rowspan để gộp ô trong bảng
<table>
<tr>
<th rowspan="2">Số thứ tự</th>
<th colspan="2">Thông tin cá nhân</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
Thuộc tính border
- Thuộc tính border xác định độ dày của đường viền bảng.
- Giá trị của border là một số nguyên không âm.
<table border="1">
<!-- Các hàng và cột của bảng -->
</table>
Thuộc tính cellpadding
- Thuộc tính cellpadding xác định khoảng cách giữa nội dung ô và đường viền của ô trong bảng.
- Giá trị của cellpadding là một số nguyên không âm
<table cellpadding="5">
<!-- Các hàng và cột của bảng -->
</table>
Thuộc tính cellspacing
- Thuộc tính cellspacing xác định khoảng cách giữa các ô trong bảng.
- Giá trị của cellspacing là một số nguyên không âm.
<table cellspacing="10">
<!-- Các hàng và cột của bảng -->
</table>
Các thuộc tính và phần tử trên cho phép bạn tạo và tùy chỉnh bảng trong HTML theo nhu cầu của bạn. Bạn có thể sử dụng chúng để hiển thị dữ liệu một cách rõ ràng và có tổ chức trên trang web của bạn.