Thẻ table trong html

1. Định nghĩa về thẻ table trong HTML
2. Cấu trúc cơ bản của bảng
3. Thuộc tính border tạo đường viền
4. Gộp cột với colspan
5. Gộp hàng với rowspan
6. Một số lưu ý khi dùng table

1. Định nghĩa về thẻ table trong HTML

Thẻ <table> dùng để tạo bảng dữ liệu trong trang web. Bảng giúp hiển thị dữ liệu theo dạng hàng và cột, giống bảng trong Excel. Các thẻ thường dùng bên trong table gồm:

<table border="1">

<tr>

   <th>Họ tên</th>

   <th>Tuổi</th>

</tr>

<tr>

  <td>An</td>

  <td>15</td>

</tr>

</table> 

2. Cấu trúc cơ bản của bảng

Một bảng HTML thường bắt đầu bằng <table>, bên trong có nhiều hàng <tr>.

Mỗi hàng chứa các ô tiêu đề <th> hoặc ô dữ liệu <td>.

Ví dụ cấu trúc chung:

<table>

<tr>

<th>Tiêu đề 1</th><th>Tiêu đề 2</th></tr>

<tr><td>Dữ liệu 1</td><td>Dữ liệu 2</td></tr>

</table>

Ví dụ khác:

<table border="1">

<tr><td>A</td><td>B</td></tr>

<tr><td>C</td><td>D</td></tr>

</table>

3. Thuộc tính border tạo đường viền

Thuộc tính border giúp bảng có đường viền để dễ nhìn hơn.

Ví dụ:

 <table border="1">

<tr><td>HTML</td><td>CSS</td></tr>

</table> 

4. Gộp cột với colspan

Thuộc tính colspan dùng để gộp nhiều cột thành 1 ô.

Ví dụ:

 <table border="1">

<tr><th colspan="2">Thông tin học sinh</th></tr></table>

5. Gộp hàng với rowspan

Thuộc tính rowspan dùng để gộp nhiều hàng thành 1 ô.

Ví dụ:

 <table border="1">

<tr>

<td rowspan="2">Lớp 10A</td>

<td>An</td>

</tr>

<tr>

<td>Bình</td>

</tr>

</table> 

6. Một số lưu ý khi dùng table

- Mỗi bảng cần có thẻ mở <table> và đóng </table>.
- Mỗi hàng phải nằm trong thẻ <tr>.
- Ô tiêu đề nên dùng <th>.
- Ô dữ liệu dùng <td>.
Ví dụ đầy đủ:

 <table border="1">

<tr>

<th>Môn học</th>

<th>Điểm</th>

</tr>

<tr>

<td>Toán</td>

<td>9</td>

</tr>

</table>

Tìm kiếm: