Ưu đãi
Bạn đang muốn trình bày dữ liệu một cách khoa học, dễ nhìn trên website của mình? Table HTML chính là công cụ bạn cần tìm hiểu. Trong bài viết này, WiWeb – đơn vị thiết kế website uy tín, sẽ cùng bạn khám phá table HTML là gì, đi sâu vào cấu trúc, cách tạo bảng hiệu quả và làm quen với các thuộc tính cơ bản nhất. Hãy cùng bắt đầu hành trình biến những dữ liệu khô khan thành các bảng thông tin trực quan và chuyên nghiệp!
Table HTML là gì? Giới thiệu về bảng trong HTML
Vậy chính xác thì table HTML là gì? Hiểu một cách đơn giản, thẻ table HTML (<table>) là một phần tử trong Ngôn ngữ Đánh dấu Siêu văn bản (HTML) được thiết kế đặc biệt để trình bày dữ liệu dưới dạng bảng, bao gồm các hàng và cột. Hãy tưởng tượng bạn có một danh sách thông tin cần hiển thị, ví dụ như bảng giá sản phẩm, lịch trình sự kiện, hay thông tin liên hệ của nhân viên. Thay vì liệt kê thành một danh sách dài khó theo dõi, việc sử dụng bảng HTML sẽ giúp tổ chức dữ liệu một cách logic, rõ ràng, giúp người dùng dễ dàng quét, so sánh và nắm bắt thông tin.
Trước đây, vào thời kỳ đầu của web, các nhà phát triển đôi khi ‘lạm dụng’ table cho mục đích dàn layout trang web. Tuy nhiên, cách làm này hiện đã lỗi thời và không được khuyến khích vì nó gây khó khăn cho việc bảo trì code, ảnh hưởng đến khả năng truy cập (accessibility) và không linh hoạt bằng các phương pháp layout hiện đại như CSS Flexbox hay Grid. Ngày nay, vai trò chính và đúng đắn nhất của table HTML là để hiển thị dữ liệu dạng bảng (tabular data). Việc sử dụng đúng mục đích không chỉ giúp website của bạn chuyên nghiệp hơn mà còn thân thiện hơn với các công cụ tìm kiếm và người dùng sử dụng công nghệ hỗ trợ. Bạn đã bao giờ gặp khó khăn khi đọc dữ liệu trên một trang web chưa được định dạng bảng chưa? Chắc chắn trải nghiệm đó không hề dễ chịu đúng không nào?
Cấu trúc cơ bản của một bảng HTML: table, tr, td, th
Để tạo ra một bảng dữ liệu HTML hoàn chỉnh, bạn cần nắm vững các thẻ cốt lõi hình thành nên cấu trúc bảng HTML. Chúng hoạt động phối hợp với nhau như những viên gạch xây nên một bức tường vững chắc:
<table>: Đây là thẻ bao ngoài cùng, khai báo sự bắt đầu và kết thúc của một bảng. Mọi thành phần khác của bảng đều phải nằm bên trong cặp thẻ<table>...</table>.<tr>(Table Row): Thẻ này định nghĩa một hàng trong bảng. Mỗi hàng sẽ chứa một hoặc nhiều ô dữ liệu hoặc ô tiêu đề. Bạn cần bao nhiêu hàng thì tạo bấy nhiêu thẻ<tr>.<td>(Table Data): Thẻ này định nghĩa một ô dữ liệu chuẩn trong một hàng. Nội dung thực tế của bảng (văn bản, hình ảnh, liên kết…) thường được đặt bên trong thẻ<td>. Một thẻ<tr>có thể chứa nhiều thẻ<td>.<th>(Table Header): Thẻ này định nghĩa một ô tiêu đề cho một cột hoặc một hàng. Nội dung bên trong<th>thường được trình duyệt hiển thị mặc định là in đậm và căn giữa. Việc sử dụng<th>rất quan trọng, không chỉ về mặt thẩm mỹ mà còn giúp cải thiện ngữ nghĩa và khả năng truy cập, giúp các công cụ tìm kiếm và trình đọc màn hình hiểu rõ hơn cấu trúc dữ liệu của bạn.
Ngoài ra, để cấu trúc bảng rõ ràng hơn nữa, đặc biệt với các bảng lớn, bạn có thể sử dụng thêm các thẻ:
<thead>: Nhóm phần nội dung tiêu đề của bảng.<tbody>: Nhóm phần nội dung chính (thân) của bảng.<tfoot>: Nhóm phần nội dung chân trang của bảng.<caption>: Cung cấp một tiêu đề mô tả cho toàn bộ bảng.
Việc hiểu rõ mối quan hệ cha-con giữa các thẻ này (<table> chứa <tr>, <tr> chứa <td> hoặc <th>) là nền tảng để bạn có thể tạo bảng HTML một cách chính xác. Bạn thấy đấy, cấu trúc này khá logic và dễ nhớ phải không?
Hướng dẫn chi tiết cách tạo bảng trong HTML (Kèm ví dụ)
Giờ thì chúng ta cùng bắt tay vào thực hành tạo bảng HTML đầu tiên nhé. Đừng lo lắng, nó không hề phức tạp như bạn nghĩ đâu!
Bước 1: Khai báo bảng
Bắt đầu bằng cách mở thẻ <table> và đóng nó lại </table>. Mọi thứ khác sẽ nằm gọn bên trong cặp thẻ này.
<table>
<!-- Nội dung bảng sẽ nằm ở đây -->
</table>
Bước 2: Thêm hàng tiêu đề (Nếu cần)
Thông thường, bảng nào cũng có hàng tiêu đề để mô tả ý nghĩa của các cột. Sử dụng thẻ <tr> để tạo hàng đầu tiên và bên trong nó, dùng các thẻ <th> cho mỗi tiêu đề cột.
<table>
<tr>
<th>Tên Sản Phẩm</th>
<th>Số Lượng</th>
<th>Đơn Giá (VNĐ)</th>
</tr>
</table>
Bước 3: Thêm các hàng dữ liệu
Với mỗi dòng dữ liệu bạn muốn hiển thị, hãy tạo một thẻ <tr> mới. Bên trong mỗi <tr> này, sử dụng thẻ <td> cho mỗi ô dữ liệu tương ứng với các cột tiêu đề đã tạo.
<table>
<tr>
<th>Tên Sản Phẩm</th>
<th>Số Lượng</th>
<th>Đơn Giá (VNĐ)</th>
</tr>
<tr>
<td>Laptop ABC</td>
<td>5</td>
<td>15.000.000</td>
</tr>
<tr>
<td>Chuột XYZ</td>
<td>10</td>
<td>250.000</td>
</tr>
<tr>
<td>Bàn phím Cơ</td>
<td>7</td>
<td>1.200.000</td>
</tr>
</table>
Kết quả:
Bạn sẽ có một bảng HTML cơ bản hiển thị danh sách sản phẩm. Mặc định, bảng này có thể chưa có đường viền hay định dạng đẹp mắt, nhưng cấu trúc dữ liệu đã hoàn chỉnh. Ở các phần sau, chúng ta sẽ tìm hiểu cách làm đẹp nó bằng CSS.
Mẹo nhỏ: Hãy luôn giữ cấu trúc code HTML của bạn sạch sẽ, thụt lề rõ ràng. Điều này giúp bạn (và người khác) dễ dàng đọc, hiểu và bảo trì code hơn rất nhiều. Bạn thấy cách tạo bảng này khá trực quan đúng không? Hãy thử tự tạo một bảng đơn giản với dữ liệu của riêng bạn xem sao!
Các thuộc tính quan trọng thường dùng với Table HTML
Mặc dù ngày nay việc định dạng giao diện chủ yếu dựa vào CSS, thẻ table HTML và các thẻ con của nó vẫn có một số thuộc tính table HTML quan trọng mà bạn nên biết. Tuy nhiên, cần lưu ý rằng nhiều thuộc tính liên quan đến trình bày (như border, bgcolor, width, height trực tiếp trên thẻ HTML) đã không còn được khuyến khích sử dụng trong HTML5 và nên được thay thế bằng CSS.
Một số thuộc tính vẫn còn hữu ích hoặc mang tính ngữ nghĩa:
border: Thuộc tính này từng được dùng rất phổ biến để tạo đường viền cho bảng (<table border="1">). Giá trị là độ dày của đường viền tính bằng pixel. Tuy nhiên, cách làm này khiến HTML lẫn lộn với trình bày. Cách tốt nhất hiện nay là sử dụng thuộc tínhbordertrong CSS. Chúng tôi sẽ đề cập chi tiết hơn ở phần CSS cho table HTML. Việc dùngborder="1"trong HTML đôi khi vẫn hữu ích khi bạn cần xem nhanh cấu trúc bảng trong quá trình phát triển, nhưng đừng quên loại bỏ nó và thay bằng CSS cho sản phẩm cuối cùng.scope: Đây là một thuộc tính quan trọng cho thẻ<th>, giúp cải thiện khả năng truy cập (accessibility). Nó chỉ định phạm vi mà ô tiêu đề đó áp dụng:scope="col": Tiêu đề áp dụng cho toàn bộ cột bên dưới nó.scope="row": Tiêu đề áp dụng cho toàn bộ hàng chứa nó.scope="colgroup": Tiêu đề áp dụng cho một nhóm cột (dùng với<colgroup>).scope="rowgroup": Tiêu đề áp dụng cho một nhóm hàng (dùng với<thead>,<tbody>,<tfoot>).
Việc sử dụngscopegiúp các công nghệ hỗ trợ như trình đọc màn hình hiểu rõ mối quan hệ giữa ô tiêu đề và ô dữ liệu.
colspanvàrowspan: Hai thuộc tính cực kỳ hữu ích để tạo các bảng có cấu trúc phức tạp hơn, cho phép một ô có thể trải dài trên nhiều cột hoặc nhiều hàng. Chúng ta sẽ tìm hiểu kỹ hơn về chúng ở phần tiếp theo.
Tham khảo thêm: Để xem danh sách đầy đủ các thuộc tính (bao gồm cả những thuộc tính đã lỗi thời và thuộc tính mới), bạn có thể truy cập tài liệu chính thức tại MDN Web Docs về
. Trang này cung cấp thông tin rất chi tiết và đáng tin cậy.
Việc tập trung vào các thuộc tính mang tính ngữ nghĩa như scope và chuyển việc định dạng sang CSS là cách tiếp cận hiện đại và chuyên nghiệp khi làm việc với table HTML.
Tìm hiểu về thuộc tính colspan và rowspan trong bảng
Khi bạn cần tạo những bảng biểu phức tạp hơn, không chỉ đơn thuần là các ô vuông vức bằng nhau, colspan và rowspan chính là ‘trợ thủ đắc lực’. Hai thuộc tính này cho phép bạn ‘hợp nhất’ các ô lại với nhau, tạo ra những cấu trúc bảng linh hoạt hơn.
colspan(Column Span – Gộp cột): Thuộc tính này được sử dụng bên trong thẻ<td>hoặc<th>để chỉ định số lượng cột mà ô đó sẽ chiếm dụng (trải dài qua). Giá trị củacolspanlà một số nguyên dương.Ví dụ: Nếu bạn muốn một ô tiêu đề chiếm hết 2 cột, bạn sẽ viết:
<th colspan="2">Tiêu đề gộp</th>.rowspan(Row Span – Gộp hàng): Tương tự nhưcolspan, thuộc tínhrowspanđược dùng trong<td>hoặc<th>để chỉ định số lượng hàng mà ô đó sẽ chiếm dụng (trải dài xuống). Giá trị cũng là một số nguyên dương.Ví dụ: Nếu bạn muốn một ô dữ liệu ở cột đầu tiên chiếm 3 hàng, bạn sẽ viết:
<td rowspan="3">Dữ liệu gộp hàng</td>.
Khi nào nên dùng colspan và rowspan?
- Khi bạn có tiêu đề chung cho nhiều cột hoặc nhiều hàng.
- Khi một mục dữ liệu nào đó áp dụng cho nhiều danh mục con.
- Để tạo các layout bảng đặc biệt, ví dụ như lịch trình có các sự kiện kéo dài nhiều giờ hoặc nhiều ngày.
Ví dụ kết hợp colspan và rowspan:
<table>
<caption>Lịch học hàng tuần</caption>
<tr>
<th>Thời gian</th>
<th>Thứ 2</th>
<th>Thứ 3</th>
<th>Thứ 4</th>
</tr>
<tr>
<th>Sáng (8:00 - 11:00)</th>
<td>Toán</td>
<td rowspan="2">Lập trình Web <br>(Lý thuyết + Thực hành)</td>
<td>Vật lý</td>
</tr>
<tr>
<th>Chiều (13:30 - 16:30)</th>
<td>Tiếng Anh</td>
<!-- Ô này đã bị chiếm bởi rowspan ở hàng trên -->
<td>Hóa học</td>
</tr>
<tr>
<th colspan="4">Hoạt động ngoại khóa (Sau 17:00)</th>
</tr>
</table>
Trong ví dụ trên:
- Ô ‘Lập trình Web’ sử dụng
rowspan="2"để chiếm cả khung giờ sáng và chiều của Thứ 3. - Ô ‘Hoạt động ngoại khóa’ sử dụng
colspan="4"để chiếm toàn bộ chiều rộng của bảng ở hàng cuối cùng.
Sử dụng colspan html và rowspan html đòi hỏi bạn phải tính toán cẩn thận số lượng ô bị ‘chiếm chỗ’ ở các hàng/cột tiếp theo để tránh làm vỡ cấu trúc bảng. Chắc bạn cũng thấy việc này giúp biểu diễn thông tin phức tạp một cách gọn gàng hơn hẳn đúng không?
Cách sử dụng CSS để định dạng và làm đẹp Table HTML
Một bảng HTML thuần túy, dù có cấu trúc tốt, thường trông khá đơn điệu. Đây là lúc CSS cho table HTML phát huy sức mạnh! CSS (Cascading Style Sheets) cho phép bạn kiểm soát hoàn toàn giao diện của bảng, từ đường viền, màu sắc, khoảng cách cho đến các hiệu ứng tương tác.
Tại sao nên dùng CSS thay vì các thuộc tính HTML cũ?
- Tách biệt nội dung và trình bày: HTML tập trung vào cấu trúc và ngữ nghĩa, CSS lo phần giao diện. Điều này giúp code sạch sẽ, dễ bảo trì hơn.
- Linh hoạt và mạnh mẽ: CSS cung cấp nhiều thuộc tính và bộ chọn (selectors) hơn hẳn, cho phép bạn tạo ra các thiết kế phức tạp và tinh tế.
- Dễ dàng cập nhật: Chỉ cần thay đổi file CSS, bạn có thể đổi giao diện của tất cả các bảng trên website mà không cần sửa từng file HTML.
Một số thuộc tính CSS phổ biến để định dạng bảng:
border: Tạo đường viền cho bảng (table), hàng (tr), hoặc ô (td,th). Bạn có thể tùy chỉnh độ dày, kiểu (nét liền, nét đứt), và màu sắc.border-collapse: Thuộc tính này rất quan trọng. Nó quyết định xem các đường viền của ô có được gộp lại thành một đường duy nhất (collapse) hay tách biệt (separate). Giá trịcollapsethường được ưa chuộng hơn để tạo giao diện gọn gàng.padding: Thêm khoảng đệm bên trong các ô (td,th), giúp nội dung không bị dính sát vào đường viền.text-align: Căn chỉnh văn bản bên trong ô (tráileft, phảiright, giữacenter).vertical-align: Căn chỉnh nội dung theo chiều dọc bên trong ô (top,middle,bottom).background-color: Đặt màu nền cho bảng, hàng, hoặc ô.widthvàheight: Thiết lập chiều rộng và chiều cao cho bảng hoặc các ô (mặc dù nên cẩn thận với việc đặt chiều cao cố định cho hàng).:nth-child()selector: Một kỹ thuật phổ biến là tạo hiệu ứng ‘ngựa vằn’ (zebra striping) cho các hàng để dễ đọc hơn, bằng cách áp dụng màu nền khác nhau cho các hàng chẵn (tr:nth-child(even)) và lẻ (tr:nth-child(odd)).
Ví dụ CSS đơn giản:
table {
width: 100%; /* Bảng chiếm toàn bộ chiều rộng container */
border-collapse: collapse; /* Gộp đường viền */
margin-bottom: 20px; /* Khoảng cách dưới bảng */
}
th, td {
border: 1px solid #ccc; /* Đường viền mỏng màu xám */
padding: 10px; /* Khoảng đệm 10px */
text-align: left; /* Căn trái nội dung */
}
th {
background-color: #f2f2f2; /* Màu nền xám nhạt cho tiêu đề */
font-weight: bold; /* Chữ đậm cho tiêu đề */
}
tr:nth-child(even) {
background-color: #f9f9f9; /* Màu nền khác cho hàng chẵn */
}
tr:hover {
background-color: #eef; /* Đổi màu nền khi di chuột qua hàng */
}
Chỉ với một vài dòng CSS, bạn đã có thể biến bảng dữ liệu HTML thô sơ trở nên chuyên nghiệp và dễ đọc hơn rất nhiều. Bạn thấy sức mạnh của CSS thật tuyệt vời phải không? Nếu bạn muốn tìm hiểu sâu hơn về CSS, WiWeb có bài viết Hướng dẫn CSS toàn tập cho người mới bắt đầu rất chi tiết đó!
Ứng dụng phổ biến của Table HTML trong thiết kế web
Mặc dù không còn được dùng cho layout trang chính, table HTML vẫn giữ vai trò quan trọng và không thể thay thế trong nhiều tình huống cụ thể trên web, chủ yếu xoay quanh việc trình bày bảng dữ liệu HTML.
Dưới đây là một số ứng dụng phổ biến và hiệu quả của bảng HTML:
- Hiển thị dữ liệu thống kê: Các số liệu, báo cáo tài chính, kết quả khảo sát… thường được trình bày dưới dạng bảng để người xem dễ dàng so sánh và phân tích các con số.
- Bảng giá sản phẩm/dịch vụ: Khi so sánh các gói dịch vụ khác nhau với các tính năng và mức giá tương ứng, bảng là lựa chọn lý tưởng để làm nổi bật sự khác biệt. Chắc hẳn bạn đã thấy rất nhiều trang thiết kế website sử dụng bảng để báo giá các gói dịch vụ của họ, đúng không?
- Thông số kỹ thuật sản phẩm: Liệt kê chi tiết các đặc tính kỹ thuật của một sản phẩm (ví dụ: điện thoại, máy tính) dưới dạng bảng giúp người dùng nắm bắt thông tin nhanh chóng.
- Lịch trình & Thời khóa biểu: Hiển thị lịch làm việc, lịch học, lịch sự kiện… dưới dạng bảng với các hàng biểu thị thời gian và các cột biểu thị ngày hoặc địa điểm là cách trình bày rất trực quan.
- Danh sách người dùng/thành viên: Trong các khu vực quản trị (admin panel) hoặc trang quản lý tài khoản, danh sách người dùng với các thông tin như tên, email, vai trò, trạng thái… thường được hiển thị trong bảng để dễ dàng quản lý, sắp xếp và lọc.
- So sánh tính năng: Tương tự bảng giá, bảng so sánh tính năng giữa các phiên bản sản phẩm hoặc giữa các đối thủ cạnh tranh giúp người dùng đưa ra quyết định mua hàng tốt hơn.
- Ma trận dữ liệu: Bất kỳ loại dữ liệu nào có mối quan hệ hai chiều (ví dụ: ma trận tương thích, ma trận kỹ năng) đều phù hợp để biểu diễn bằng table HTML.
Điểm mấu chốt là sử dụng bảng khi dữ liệu của bạn thực sự có cấu trúc hàng và cột rõ ràng, nơi mối quan hệ giữa các ô trong cùng một hàng hoặc cùng một cột mang ý nghĩa quan trọng. Việc lạm dụng bảng cho các yếu tố không phải dữ liệu dạng bảng sẽ đi ngược lại mục đích và ngữ nghĩa của thẻ <table>.
Lưu ý khi sử dụng Table HTML: Nên và không nên
Để sử dụng table HTML một cách hiệu quả và đúng chuẩn, có một vài điều bạn nên làm và nên tránh. Việc tuân thủ các nguyên tắc này không chỉ giúp code của bạn tốt hơn mà còn cải thiện trải nghiệm người dùng và SEO.
Những điều NÊN làm:
- ✅ Sử dụng cho dữ liệu dạng bảng: Đây là nguyên tắc vàng. Chỉ dùng
<table>khi bạn thực sự cần trình bày dữ liệu có cấu trúc hàng và cột rõ ràng. - ✅ Sử dụng
<th>cho tiêu đề: Luôn dùng<th>cho các ô tiêu đề cột hoặc hàng. Đừng quên thuộc tínhscope(scope="col"hoặcscope="row") để tăng cường ngữ nghĩa và khả năng truy cập. - ✅ Sử dụng
<caption>: Cung cấp một tiêu đề mô tả ngắn gọn cho bảng bằng thẻ<caption>. Nó giúp người dùng (và công cụ tìm kiếm) hiểu nhanh nội dung của bảng. - ✅ Sử dụng
<thead>,<tbody>,<tfoot>: Phân chia bảng thành các phần đầu, thân, và chân giúp cấu trúc rõ ràng hơn, hỗ trợ trình duyệt trong việc hiển thị (ví dụ: lặp lại tiêu đề khi in) và cũng tốt cho accessibility. - ✅ Sử dụng CSS để định dạng: Tuyệt đối ưu tiên CSS cho table HTML để kiểm soát giao diện (đường viền, màu sắc, khoảng cách…). Tránh các thuộc tính trình bày HTML đã lỗi thời.
- ✅ Chú ý đến Responsive: Bảng HTML có thể khó hiển thị đẹp trên màn hình nhỏ. Hãy cân nhắc các kỹ thuật CSS để làm cho bảng responsive hơn (ví dụ: cho phép cuộn ngang, thay đổi layout trên mobile). Đây là một phần quan trọng khi thiết kế website chuyên nghiệp.
Những điều KHÔNG NÊN làm:
- ❌ Sử dụng table cho layout trang: Đây là cách làm cũ và không còn phù hợp. Hãy dùng CSS Flexbox, Grid hoặc các kỹ thuật CSS khác để dàn trang.
- ❌ Lạm dụng
colspanvàrowspan: Mặc dù hữu ích, việc sử dụng quá nhiều hoặc quá phức tạp các thuộc tính này có thể làm bảng khó đọc, khó bảo trì và ảnh hưởng đến accessibility. - ❌ Bỏ qua Accessibility: Đừng quên
<th>,scope,<caption>. Đảm bảo bảng của bạn dễ hiểu đối với cả người dùng sử dụng trình đọc màn hình. - ❌ Để nội dung quá dài trong một ô: Nếu một ô chứa quá nhiều văn bản hoặc hình ảnh lớn, nó có thể làm vỡ layout bảng. Cân nhắc tóm tắt nội dung hoặc cung cấp liên kết đến trang chi tiết.
- ❌ Quên kiểm tra trên nhiều thiết bị: Luôn kiểm tra xem bảng của bạn hiển thị như thế nào trên các kích thước màn hình khác nhau.
Việc nắm rõ những điểm nên và không nên này sẽ giúp bạn khai thác tối đa sức mạnh của table HTML mà vẫn đảm bảo website hiện đại, dễ dùng và chuẩn SEO.
Tổng kết về Table HTML
Qua bài viết này, chúng ta đã cùng nhau đi từ khái niệm cơ bản table HTML là gì đến việc tìm hiểu cấu trúc bảng HTML với các thẻ <table>, <tr>, <td>, <th>, cũng như cách tạo bảng HTML một cách chi tiết. Chúng ta cũng đã khám phá các thuộc tính table HTML quan trọng như colspan html và rowspan html, đồng thời nhấn mạnh vai trò không thể thiếu của CSS cho table HTML trong việc định dạng và làm đẹp giao diện.
Hiểu rõ khi nào nên và không nên sử dụng bảng, cùng với việc áp dụng các kỹ thuật hiện đại như CSS để tạo kiểu và đảm bảo tính responsive, là chìa khóa để bạn tạo ra những bảng dữ liệu HTML hiệu quả, chuyên nghiệp và thân thiện với người dùng.
Table HTML, khi được sử dụng đúng mục đích, vẫn là một công cụ mạnh mẽ và cần thiết trong bộ công cụ của bất kỳ nhà phát triển web nào. Nó giúp biến những dữ liệu phức tạp trở nên dễ hiểu và trực quan hơn.
WiWeb hy vọng rằng những chia sẻ này hữu ích cho bạn trên con đường chinh phục HTML và thiết kế web. Nếu bạn đang tìm kiếm một đối tác tin cậy để thiết kế website với giao diện chuyên nghiệp, hiển thị dữ liệu hiệu quả, đừng ngần ngại liên hệ với chúng tôi. Chúng tôi luôn sẵn lòng tư vấn và hỗ trợ bạn!
