Table HTML là gì? Hướng dẫn tạo bảng từ A-Z cho người mới
Bạn đang loay hoay tìm cách trình bày các bảng dữ liệu, bảng giá, hay lịch trình một cách ngăn nắp trên website? Chắc hẳn khi mới bắt đầu, bạn sẽ thấy các thẻ code trông như một mớ hỗn độn khó hiểu. Hiểu được điều đó, bài viết này sẽ giúp bạn tìm hiểu table HTML là gì một cách tường tận nhất. Việt Thắng sẽ cùng bạn đi qua từng bước, từ việc dựng một khung bảng đơn giản đến việc tạo ra những bảng biểu phức tạp và đẹp mắt một cách dễ dàng.
Table HTML là gì?
Định nghĩa và vai trò của thẻ <table> trong việc hiển thị dữ liệu
Hãy tưởng tượng thẻ <table> trong HTML giống như một trang tính Excel hay Google Sheets ngay trên website của bạn. Về cơ bản, nó là một thẻ đặc biệt dùng để tạo ra một chiếc “khung” chứa dữ liệu được trình bày dưới dạng lưới, bao gồm các hàng và các cột. Vai trò chính của nó là tổ chức thông tin một cách có cấu trúc, giúp người dùng dễ dàng so sánh và nắm bắt các mối quan hệ giữa các dữ liệu.
Bất cứ khi nào bạn cần hiển thị thông tin theo dạng bảng, từ một danh sách nhân viên đơn giản đến một bảng so sánh sản phẩm phức tạp, thẻ <table> chính là công cụ bạn cần. Nó là thẻ “cha” bao bọc toàn bộ các yếu tố cấu thành nên một bảng hoàn chỉnh.
Khi nào bạn nên sử dụng bảng trong thiết kế web?
Một câu hỏi rất hay! Mặc dù mạnh mẽ, nhưng bảng không phải lúc nào cũng là lựa chọn phù hợp. Bạn nên sử dụng bảng HTML khi và chỉ khi bạn đang làm việc với dữ liệu dạng bảng (tabular data). Đây là những dữ liệu có mối quan hệ rõ ràng giữa hàng và cột.
Một vài ví dụ điển hình bao gồm:
- Bảng giá sản phẩm hoặc dịch vụ.
- Lịch trình làm việc, lịch học, lịch chiếu phim.
- Bảng so sánh tính năng giữa các sản phẩm.
- Danh sách thông tin liên hệ.
- Báo cáo tài chính, thống kê số liệu.
Lưu ý quan trọng: Trước đây, một số lập trình viên thường lạm dụng bảng để dựng bố cục cho toàn bộ trang web. Đây là một phương pháp cũ, đã lỗi thời và không tốt cho SEO cũng như khả năng truy cập. Hiện nay, để dựng layout trang, chúng ta nên sử dụng CSS Flexbox hoặc CSS Grid.
Cấu trúc cốt lõi của một bảng HTML
Để xây dựng một ngôi nhà, bạn cần gạch, vữa, và khung sườn. Tương tự, để tạo một bảng HTML, bạn cần nắm vững bộ ba thẻ cốt lõi. Chúng phối hợp với nhau một cách nhịp nhàng để tạo nên cấu trúc hoàn chỉnh.
Thẻ <table>: Thẻ cha bao bọc toàn bộ bảng
Như đã nói ở trên, thẻ <table> chính là điểm khởi đầu. Nó giống như một cái hộp lớn, chứa đựng tất cả các thành phần khác của bảng. Mọi hàng và mọi ô đều phải được đặt bên trong cặp thẻ <table> và </table>.
Thẻ <tr> (Table Row): Tạo một hàng trong bảng
Bên trong cái hộp <table>, chúng ta có các hàng ngang. Mỗi hàng được định nghĩa bởi thẻ thẻ tr td trong html, mà cụ thể <tr> là viết tắt của “Table Row”. Cứ mỗi cặp thẻ <tr>...</tr> sẽ tạo ra một hàng mới trong bảng của bạn. Bạn muốn bảng có 5 hàng? Đơn giản là bạn cần 5 thẻ <tr>.
Thẻ <td> (Table Data) và <th> (Table Header) là gì?
Nếu <tr> tạo ra các hàng, thì điều gì tạo ra các cột? Đó chính là các ô bên trong mỗi hàng. Chúng ta có hai loại ô:
- <td> (Table Data): Đây là thẻ tạo ra một ô dữ liệu thông thường. Nó là nơi bạn đặt nội dung chính của bảng.
- <th> (Table Header): Đây là thẻ tạo ra một ô tiêu đề. Nội dung trong thẻ này thường được trình duyệt tự động in đậm và căn giữa. Nó dùng để đặt tên cho các cột (hoặc hàng), giúp người đọc hiểu rõ ý nghĩa dữ liệu trong cột đó.
Mỗi thẻ <tr> sẽ chứa một hoặc nhiều thẻ <td> hoặc <th>. Số lượng ô trong mỗi hàng sẽ quyết định số cột của bảng.
Hướng dẫn cách tạo 1 bảng trong HTML (Ví dụ chi tiết)
Lý thuyết là vậy, giờ chúng ta hãy cùng bắt tay vào thực hành cách tạo bảng trong html. Việt Thắng sẽ hướng dẫn bạn qua từng bước cực kỳ đơn giản để tạo một bảng danh sách nhân viên.
Bước 1: Khai báo thẻ <table>
Đầu tiên, hãy mở tệp HTML của bạn và tạo ra “khung” cho bảng bằng cặp thẻ <table>.
Code:
<table></table>Bước 2: Thêm các hàng <tr> và ô tiêu đề
Bảng nào cũng cần có tiêu đề cột. Chúng ta sẽ tạo hàng đầu tiên (một thẻ <tr>) và đặt các ô tiêu đề vào bên trong. Vì quy định của bài viết, chúng tôi sẽ dùng <td> kết hợp <strong> để mô phỏng ô tiêu đề, nhưng bạn hãy nhớ rằng trong thực tế nên dùng thẻ <th> nhé.
Code:
<table>
<tr>
<td><strong>Họ và Tên</strong></td>
<td><strong>Chức vụ</strong></td>
<td><strong>Email</strong></td>
</tr>
</table>Bước 3: Thêm dữ liệu vào các ô <td>
Tuyệt vời! Giờ chúng ta chỉ cần thêm các hàng dữ liệu tương ứng. Mỗi nhân viên sẽ là một hàng <tr> mới, và thông tin của họ sẽ nằm trong các ô <td>.
Code:
<table>
<tr>
<td><strong>Họ và Tên</strong></td>
<td><strong>Chức vụ</strong></td>
<td><strong>Email</strong></td>
</tr>
<tr>
<td>Nguyễn Văn An</td>
<td>Trưởng phòng</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Trần Thị Bình</td>
<td>Lập trình viên</td>
<td>[email protected]</td>
</tr></table>Code và kết quả của một bảng HTML hoàn chỉnh
Sau khi hoàn thành các bước trên, bạn đã có một bảng HTML hoàn chỉnh. Mặc dù chưa có đường viền hay màu sắc, nhưng về mặt cấu trúc, nó đã hoàn toàn đúng. Dữ liệu được tổ chức rõ ràng theo hàng và cột.
Làm thế nào để gộp các ô trong HTML? Sử dụng Colspan và Rowspan
Đôi khi, những bảng đơn giản là không đủ. Bạn sẽ cần tạo ra các ô lớn hơn, chiếm diện tích của nhiều cột hoặc nhiều hàng. Đó là lúc hai thuộc tính của thẻ table là `colspan` và `rowspan` phát huy tác dụng.
Thuộc tính colspan là gì? Cách gộp nhiều cột thành một
Colspan là viết tắt của “Column Span” (Độ mở rộng cột). Thuộc tính này cho phép một ô <td> có thể trải dài, hay “gộp” qua nhiều cột. Giá trị của `colspan` là một con số, cho biết ô đó sẽ chiếm diện tích của bao nhiêu cột.
Ví dụ: `<td colspan=”2″>Nội dung này chiếm 2 cột</td>`.
Thuộc tính rowspan: Gộp nhiều hàng thành một
Tương tự như `colspan`, **rowspan** là viết tắt của “Row Span” (Độ mở rộng hàng). Nó cho phép một ô <td> trải dài xuống dưới, gộp nhiều hàng thành một ô duy nhất.
Ví dụ: `<td rowspan=”3″>Nội dung này chiếm 3 hàng</td>`.
Ví dụ thực tế về bảng có gộp ô phức tạp
Hãy cùng xem một ví dụ về thời khóa biểu. Đây là một trường hợp kinh điển cần dùng cả `colspan` và `rowspan`.
<table border="1" style="width:100%; border-collapse: collapse;">
<tr>
<td><strong>Thứ</strong></td>
<td><strong>Sáng</strong></td>
<td><strong>Chiều</strong></td>
</tr>
<tr>
<td>Thứ Hai</td>
<td>Toán</td>
<td>Lý</td>
</tr>
<tr>
<td>Thứ Ba</td>
<td>Văn</td>
<td>Hóa</td>
</tr>
<tr>
<td>Thứ Tư</td>
<td colspan="2">Nghỉ học</td>
</tr>
</table>Trong ví dụ trên, ô “Nghỉ học” đã dùng `colspan=”2″` để chiếm cả hai cột Sáng và Chiều của ngày Thứ Tư.
Tối ưu cấu trúc bảng với các thẻ ngữ nghĩa: thead, tbody, tfoot
Để bảng của bạn không chỉ hiển thị tốt mà còn “thông minh” hơn trong mắt các công cụ tìm kiếm và các công nghệ hỗ trợ, HTML cung cấp ba thẻ cấu trúc đặc biệt: thead tbody tfoot. Chúng giúp phân chia bảng thành ba phần logic: đầu, thân và chân.
Thẻ <thead>: Nhóm phần đầu của bảng
Thẻ <thead> được dùng để bao bọc phần tiêu đề của bảng. Thông thường, nó sẽ chứa hàng <tr> đầu tiên, nơi bạn định nghĩa các tiêu đề cột (sử dụng thẻ <th>).
Thẻ <tbody>: Nhóm phần thân (nội dung chính) của bảng
Đây là phần quan trọng nhất. Thẻ <tbody> bao bọc toàn bộ các hàng dữ liệu chính của bảng. Hầu hết các thẻ <tr> của bạn sẽ nằm trong phần này.
Thẻ <tfoot>: Nhóm phần chân của bảng
Thẻ <tfoot> được dùng để nhóm các hàng chứa thông tin tổng kết hoặc chú thích ở cuối bảng. Ví dụ, hàng tổng cộng trong một bảng báo cáo doanh thu.
Lợi ích của thẻ ngữ nghĩa đối với SEO và Accessibility
Tại sao phải dùng chúng khi bảng vẫn hiển thị bình thường? Câu trả lời nằm ở “ý nghĩa”.
- SEO: Google và các công cụ tìm kiếm khác có thể hiểu rõ hơn cấu trúc dữ liệu của bạn. Chúng biết đâu là tiêu đề, đâu là nội dung chính, giúp lập chỉ mục thông tin chính xác hơn.
- Accessibility (Khả năng truy cập): Đối với người dùng khiếm thị sử dụng trình đọc màn hình, các thẻ này giúp họ điều hướng bảng dễ dàng hơn. Trình đọc có thể đọc lặp lại tiêu đề cột (trong
<thead>) khi người dùng di chuyển qua các ô dữ liệu trong<tbody>. - Styling và In ấn: Khi in một bảng dài nhiều trang, trình duyệt có thể tự động lặp lại phần
<thead>ở đầu mỗi trang, rất tiện lợi.
Định dạng bảng trong HTML với CSS để tạo giao diện chuyên nghiệp
Một bảng HTML thô trông khá nhàm chán. Để biến nó thành một thành phần giao diện đẹp mắt và chuyên nghiệp, chúng ta cần sử dụng CSS. Đây là cách tạo bảng html css hiện đại và hiệu quả.
Tại sao nên dùng CSS thay cho các thuộc tính HTML đã lỗi thời?
Trong quá khứ, thẻ <table> có các thuộc tính như `border`, `cellpadding`, `cellspacing`, `bgcolor`. Tuy nhiên, các thuộc tính này hiện đã lỗi thời (deprecated). Lý do chính là để tuân thủ nguyên tắc tách biệt cấu trúc (HTML) và trình bày (CSS). Việc sử dụng CSS giúp mã của bạn sạch sẽ, dễ bảo trì và linh hoạt hơn rất nhiều khi cần thay đổi thiết kế.
Các thuộc tính CSS phổ biến để tạo bảng đẹp (border, padding, background…)
Để định dạng bảng trong html, đây là một số thuộc tính CSS bạn nên biết:
border: Tạo đường viền cho bảng và các ô.border-collapse: Gộp các đường viền liền kề thành một đường duy nhất, giúp bảng trông gọn gàng hơn.padding: Tạo khoảng trống bên trong mỗi ô, giúp nội dung không bị dính sát vào viền.text-align: Căn chỉnh văn bản (trái, phải, giữa) trong các ô.background-color: Đặt màu nền cho các hàng hoặc ô.:nth-child(even)hoặc:nth-child(odd): Một selector mạnh mẽ để tạo hiệu ứng “ngựa vằn” (các hàng chẵn/lẻ có màu khác nhau), giúp tăng khả năng đọc.
Ví dụ tạo bảng HTML và CSS hoàn chỉnh
Đây là code cho một bảng được định dạng chuyên nghiệp:
HTML:
<table class="styled-table">
<tr>
<td><strong>Sản phẩm</strong></td>
<td><strong>Mã SKU</strong></td>
<td><strong>Số lượng</strong></td>
<td><strong>Giá</strong></td>
</tr>
<tr>
<td>Laptop Pro 14</td>
<td>LP-14-PRO</td>
<td>25</td>
<td>25.000.000đ</td>
</tr>
<tr>
<td>Chuột không dây X</td>
<td>MS-WL-X</td>
<td>150</td>
<td>550.000đ</td>
</tr>
</table>CSS: (Bạn có thể đặt đoạn code này trong thẻ <style> hoặc trong một tệp .css riêng)
<style>
.styled-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
width: 100%;
}
.styled-table td {
padding: 12px 15px;
border-bottom: 1px solid #dddddd;
}
.styled-table tr:first-of-type {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.styled-table tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tr:last-of-type {
border-bottom: 2px solid #009879;
}
</style>
Tổng kết
Tóm tắt những kiến thức quan trọng về Table HTML
Vậy là chúng ta đã cùng nhau đi qua một hành trình chi tiết về bảng trong HTML. Hãy cùng điểm lại những ý chính: Cốt lõi của một bảng được tạo nên từ bộ ba thẻ <table>, <tr>, và <td>. Khi cần cấu trúc phức tạp hơn, `colspan` và `rowspan` là công cụ giúp bạn gộp các ô lại. Để bảng của bạn trở nên chuyên nghiệp và thân thiện hơn với các công cụ tìm kiếm, hãy sử dụng các thẻ ngữ nghĩa <thead>, <tbody>, <tfoot>. Cuối cùng, đừng quên rằng CSS là “người bạn” tốt nhất để làm đẹp và định dạng cho bảng của bạn.
Gợi ý các bước thực hành và tài nguyên học thêm
Cách tốt nhất để ghi nhớ là thực hành. Bạn hãy thử tự tạo một bảng cho riêng mình: có thể là thời khóa biểu cá nhân, danh sách những bộ phim yêu thích, hoặc một bảng so sánh các dòng điện thoại. Đừng ngại thử nghiệm với `colspan`, `rowspan` và các thuộc tính CSS khác nhau.
Bạn gặp khó khăn ở bước nào nhất khi thực hành? Hãy chia sẻ với Việt Thắng dưới phần bình luận để chúng tôi có thể hỗ trợ bạn nhé!