Table HTML là một bảng được tạo bằng cách sử dụng ngôn ngữ HTML. Về cơ bản, table HTML là một tập dữ liệu được tổ chức thành các hàng và cột, dùng để hiển thị mối liên hệ giữa các loại dữ liệu, như sản phẩm và giá thành, cách thức phân phối, ngày phân phối...
Trong bài viết này, hãy cùng Z.com tìm hiểu về table HTML và cách thức tạo một bảng như vậy.
Tặng miễn phí bộ Plugin 359$ giúp khách hàng tối ưu SEO website
Table HTML là gì?
Một table HTML được tạo bằng cách mở thẻ <table> và đóng thẻ </table> trong quá trình soạn thảo HTML. Bên trong hai thẻ này, dữ liệu được tổ chức thành các hàng và cột thông qua việc sử dụng các thẻ mở và đóng hàng <tr> và thẻ mở và đóng dữ liệu bảng <td>
Thẻ hàng trong table HTML <tr> được sử dụng để tạo một hàng dữ liệu. Bên trong các thẻ mở và đóng bảng <tr>, các thẻ mở và đóng dữ liệu bảng <td> được sử dụng để tổ chức dữ liệu thành các cột.
Để dễ hiểu hơn, bạn có thể xem ví dụ mã lệnh HTML dưới đây. Với đoạn mã này, chúng ta sẽ có một bảng gồm 2 hàng và 3 cột:
<table><tr> <td>Column 1</td><td>Column 2</td><td>Column 3</td></tr><tr> <td>Column 1</td><td>Column 2</td><td>Column 3</td></tr></table>
Để hiển thị bảng nói trên trong trình duyệt web, bạn có thể dán nó vào một tập tin index.html hoặc bất kỳ tập tin HTML nào.
Lưu và nạp lại tập tin trong trình duyệt để xem kết quả. Lúc này, trình duyệt sẽ hiển thị một bảng với 3 cột và 2 hàng khá đơn giản:
Muốn thêm một hàng nữa, chỉ cần thêm thẻ <tr> vào cuối bảng như sau:
<table><tr> <td>Column 1</td><td>Column 2</td><td>Column 3</td></tr><tr> <td>Column 1</td><td>Column 2</td><td>Column 3</td></tr><tr><td>Column 1</td><td>Column 2</td><td>Column 3</td></tr></table>
Lưu và nạp lại tập tin trong trình duyệt để xem kết quả:
Tương tự, muốn thêm một cột, chỉ cần thêm thẻ <td> vào trong mỗi hàng <tr>:
<table><tr> <td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td></tr><tr> <td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4 </td></tr><tr> <td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td></tr></table>
Ta có kết quả:
Những đặc điểm của table HTML
Table HTML là một công cụ mạnh mẽ và linh hoạt trong việc trình bày dữ liệu có cấu trúc trên trang web. Nó cho phép tổ chức thông tin thành các hàng và cột, tạo ra một giao diện trực quan và dễ đọc.
Đặc điểm nổi bật của table HTML:
- Cấu trúc rõ ràng: Table HTML được xây dựng dựa trên hệ thống các thẻ (`<table>`, `<tr>`, `<th>`, `<td>`) tạo nên một cấu trúc phân cấp rõ ràng. Điều này giúp trình duyệt dễ dàng hiểu và hiển thị bảng một cách chính xác.
- Trình bày dữ liệu có tổ chức: Bằng cách chia dữ liệu thành các hàng và cột, table HTML giúp người dùng dễ dàng nắm bắt thông tin một cách có hệ thống. Các tiêu đề cột (`<th>`) làm nổi bật nội dung của từng cột, giúp người dùng nhanh chóng xác định thông tin cần tìm.
- Linh hoạt trong tùy chỉnh: Table HTML cung cấp nhiều thuộc tính và thẻ hỗ trợ tùy chỉnh giao diện. Bạn có thể thay đổi kích thước, màu sắc, đường viền, căn chỉnh nội dung và nhiều yếu tố khác để bảng phù hợp với thiết kế tổng thể của trang web.
- Thích ứng với nhiều loại dữ liệu: Table HTML có thể hiển thị nhiều loại dữ liệu khác nhau, từ văn bản, số liệu, hình ảnh đến các liên kết. Điều này làm cho nó trở thành một công cụ hữu ích trong việc trình bày thông tin đa dạng.
- Hỗ trợ khả năng tiếp cận: Table HTML có thể được tối ưu hóa để hỗ trợ người dùng khuyết tật thông qua việc sử dụng các thuộc tính ARIA và chú thích rõ ràng. Điều này đảm bảo rằng mọi người đều có thể truy cập và hiểu nội dung của bảng.
- Tương thích với các thiết bị khác nhau: Table HTML được thiết kế để hiển thị tốt trên nhiều thiết bị khác nhau, từ máy tính để bàn đến điện thoại di động. Điều này giúp đảm bảo rằng thông tin được trình bày một cách nhất quán trên mọi nền tảng.
- Dễ dàng kết hợp với CSS: Table HTML có thể được tùy chỉnh sâu hơn bằng cách sử dụng CSS. Điều này cho phép bạn tạo ra các bảng có giao diện độc đáo và phù hợp với thương hiệu của bạn.
Tuy nhiên, cần lưu ý rằng table HTML không nên được sử dụng để tạo bố cục trang web. Thay vào đó, bạn nên sử dụng các công cụ bố cục như CSS Grid hoặc Flexbox để đảm bảo tính linh hoạt và khả năng đáp ứng của trang web.
Làm đẹp table HTML
Nếu chỉ sử dụng HTML đơn thuần, bảng cho ra sẽ khá đơn điệu. Đó là lý do tại sao phần lớn các nhà phát triển web kết hợp mã CSS để "làm đẹp" cho table HTML. Tuy nhiên trong trường hợp chưa biết về CSS, bạn vẫn có thể dùng HTML để thêm thuộc tính cơ bản cho bảng. Ví dụ, để thêm đường viền quanh bảng, bạn dùng thuộc tính border:
<table border="1"><tr> <td>Row 1</td><td>Row 2</td><td>Row 3</td></tr><tr> <td>Row 1</td><td>Row 2</td><td>Row 3</td></tr></table>
Bổ sung heading cho các cột và hàng sẽ giúp table HTML dễ nhìn hơn, bởi nội dung heading thường tự động được hiển thị dưới dạng in đậm và căn giữa nhằm phân biệt với dữ liệu trong bảng. Heading còn rất hữu ích với người khiếm thị khi sử dụng các công cụ đọc màn hình.
Heading được thêm vào bằng cách mở và đóng thẻ `<th>`. Để thêm header cho cột, bạn phải chèn một thẻ `<tr>` mới vào đầu bảng, rồi sau đó thêm tên cột bằng các thẻ `<th>`.
Bạn có thể tạo một tập tin index.html mới và thêm đoạn mã HTML dưới đây để xem kết quả:
<table border="1"><tr> <th></th><th>Column Header 1</th><th>Column Header 2</th><th>Column Header 3</th></tr></table>
Như bạn đã thấy, trình duyệt sẽ hiển thị một table HTML với một hàng header cho các cột.
Để thêm header cho các hàng, bạn cần thêm các thẻ mở và đóng `<th>` ngay sau mỗi thẻ hàng `<tr>`. Hãy thử thêm các header và dữ liệu cho từng hàng bằng cách thêm đoạn mã HTML sau vào giữa thẻ `</tr>` và thẻ `</table>` trong tập tin index.html nêu trên.
<table border="1"><tr> <th></th><th>Column Header 1</th><th>Column Header 2</th><th>Column Header 3</th></tr><tr><th>Row Header 1</th><td>Data</td><td>Data</td><td>Data</td></tr><tr> <th>Row Header 2</th><td>Data</td><td>Data</td><td>Data</td></tr><tr> <th>Row Header 3</th><td>Data</td><td>Data</td><td>Data</td></tr></table>
Kết quả, chúng ta có một table HTML khá dễ nhìn, với 3 header cho các cột và 3 header cho các hàng.
Tặng miễn phí bộ Plugin 359$ giúp khách hàng tối ưu SEO website
Bài liên quan
- So sánh chi tiết Wix và WordPress: Đâu là sự lựa chọn tốt nhất?
- Hướng dẫn cài đặt WordPress & những plugin thông dụng nhất
- Kinh nghiệm chống Spam WordPress hiệu quả cao cho người mới
- WordPress Multisite là gì? Hướng dẫn chi tiết cách cài đặt và thiết lập WordPress Multisite
- 7 thủ thuật cải thiện tốc độ website WordPress cho người mới
- Hướng dẫn test tốc độ website chi tiết và dễ thực hiện
- Litespeed là gì? Hướng dẫn tăng tốc website với Litespeed
- Check performance website là gì? Cách check nhanh nhất
- TTFB là gì? Hướng dẫn cải thiện TTFB cho website
- Một số công cụ Test Speed Website bạn không nên bỏ qua
- IP domain check là gì? Cách check nhanh IP của domain/website
- Xoá website
- Ping là gì? Ý nghĩa thông số Ping, cách kiểm tra tốc độ mạng
