Thẻ td trong HTML
Bùi Tấn Lực - 987
- 30/09/2025
Chức năng của Thẻ td trong HTML
Thẻ td trong HTML dùng để chứa giá trị của cột, thẻ td thường chứa các cột nằm trong thẻ tbody, trong thẻ tfoot thì td chứa giá trị của cột, đối với thẻ td thì bạn có thể nhóm nhiều cột vô 1 ô hoặc nhóm nhiều hàng vô 1 ô.
Cú pháp của thẻ Thẻ td trong HTML
<td>vanban</td>
vanban: Văn bản.
<td colspan="socot" >vanban</td>
colspan: Thuộc tính dùng để nhóm số cột vô 1 ô.
socot: Số cột cần nhóm thành 1 ô.
<td rowspan="sohang" >vanban</td>
rowspan: Thuộc tính dùng để nhóm số hàng vô 1 ô.
sohang: Số hàng cần nhóm vào 1 ô.
Code Thẻ td trong HTML
Thẻ td bình thường trong HTML
<table>
<tbody>
<tr>
<td>1</td> <td>1</td> <td>1</td>
</tr>
<tr>
<td>1</td> <td>1</td> <td>1</td>
</tr>
<tr>
<td>1</td> <td>1</td> <td>1</td>
</tr>
</tbody>
</table>
Kết quả:
| 1 | 1 | 1 |
| 1 | 1 | 1 |
| 1 | 1 | 1 |
Thẻ td dùng colspan để nhóm các cột lại thành 1 ô
Bạn nhóm thêm bao nhiêu cột (td) thì trong tr đó bạn bỏ bớt bấy nhiêu cột (td):
<table>
<tbody>
<tr>
<td colspan="2">1</td> <td>1</td>
</tr>
<tr>
<td>1</td> <td>1</td> <td>1</td>
</tr>
<tr>
<td>1</td> <td>1</td> <td>1</td>
</tr>
</tbody>
</table>
Kết quả:
| 1 | 1 | |
| 1 | 1 | 1 |
| 1 | 1 | 1 |
Thẻ td dùng rowspan để nhóm các hàng lại thành 1 ô
Bạn nhóm thêm bao nhiêu hàng thì trong bấy nhiêu tr dưới bạn bỏ bớt 1 cột (td):
<table>
<tbody>
<tr>
<td rowspan="2">1</td> <td>1</td> <td>1</td>
</tr>
<tr>
<td>1</td> <td>1</td>
</tr>
<tr>
<td>1</td> <td>1</td> <td>1</td>
</tr>
</tbody>
</table>
Kết quả:
| 1 | 1 | 1 |
| 1 | 1 | |
| 1 | 1 | 1 |
Các lỗi thường gặp khi sử dụng thẻ td trong HTML
Khi tạo bảng bằng HTML, thẻ td giữ vai trò hiển thị dữ liệu trong từng ô. Tuy nhiên, nhiều người mới học thường gặp lỗi do chưa hiểu đúng cấu trúc bảng hoặc sử dụng sai cách. Việc nhận biết các lỗi phổ biến sẽ giúp bảng hoạt động ổn định, dễ chỉnh sửa và hiển thị chính xác trên nhiều thiết bị.
Đặt thẻ td bên ngoài tr
Thẻ td không thể hoạt động độc lập mà phải nằm bên trong thẻ tr để xác định một ô thuộc hàng nào trong bảng. Nếu đặt td trực tiếp trong table, cấu trúc HTML sẽ không đúng và trình duyệt có thể tự thay đổi cách hiển thị.
Một cấu trúc bảng hợp lệ cần có thứ tự table chứa tr, sau đó tr chứa các ô td tương ứng.
<table>
<tr>
<td>Dữ liệu trong bảng</td>
</tr>
</table>
Số lượng td không khớp giữa các hàng
Mỗi hàng trong bảng nên có số lượng ô dữ liệu phù hợp với cấu trúc chung. Khi một hàng có ít hoặc nhiều td hơn các hàng khác, các cột có thể bị lệch khiến nội dung khó theo dõi.
Trong trường hợp cần tạo ô rộng hơn hoặc kéo dài nhiều hàng, nên sử dụng thuộc tính gộp ô thay vì thêm td không đúng vị trí.
Nhầm lẫn giữa td và th
td và th có chức năng khác nhau trong bảng HTML. td được dùng để chứa dữ liệu thông thường, còn th dùng cho nội dung tiêu đề giúp người đọc hiểu ý nghĩa của hàng hoặc cột.
Sử dụng đúng hai thẻ này giúp bảng có cấu trúc rõ ràng hơn và hỗ trợ tốt hơn cho các công cụ đọc nội dung trên web.
Lạm dụng colspan và rowspan
colspan và rowspan giúp gộp nhiều ô trong bảng, nhưng việc sử dụng quá nhiều có thể làm cấu trúc trở nên khó kiểm soát. Khi bảng có quá nhiều ô gộp, việc cập nhật dữ liệu hoặc thay đổi giao diện sẽ phức tạp hơn.
Chỉ nên dùng các thuộc tính này khi dữ liệu thực sự cần liên kết nhiều ô. Với những bố cục giao diện, nên cân nhắc sử dụng CSS để thay thế.
Chỉ dùng HTML để định dạng thay vì CSS
HTML nên tập trung vào việc xây dựng cấu trúc bảng, còn phần màu sắc, kích thước, khoảng cách hoặc cách hiển thị nên được xử lý bằng CSS.
Việc tách riêng HTML và CSS giúp mã nguồn dễ quản lý, thuận tiện khi thay đổi giao diện và tối ưu quá trình phát triển website.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ td trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
