Giới thiệu về HTML Table

Trong bài viết này, chúng ta sẽ cùng nhau khám phá về HTML Table, một công cụ đã xuất hiện trong HTML từ lâu nhưng vẫn được sử dụng rất nhiều trong trang web hiện đại. Nào bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

1. HTML Table là gì?

Hãy tưởng tượng bạn đang đi chợ và đang phân vân về việc nên mua loại trái cây nào nên bạn quyết định tạo ra một danh sách so sánh giá của các loại trái cây khác nhau:

• Táo: 30.000 VNĐ/kg
• Cam: 25.000 VNĐ/kg
• Chuối: 15.000 VNĐ/kg
• Xoài: 40.000 VNĐ/kg

Tuy nhiên, danh sách này không được trực quan và khó so sánh. Do đó bạn sử dụng bảng để trình bày thông tin:

Chúng ta có thể xem tables như một bảng tính (spreadsheet) quen thuộc, với các hàng (rows) và cột (columns) giúp sắp xếp thông tin một cách trực quan.

Khi nào nên sử dụng thẻ table HTML

• Khi bạn có dữ liệu dạng bảng: Đây là trường hợp sử dụng phổ biến nhất. Ví dụ: bảng giá sản phẩm, bảng thống kê doanh thu, bảng xếp hạng học sinh, v.v.
• Khi bạn muốn so sánh các mục dữ liệu theo nhiều tiêu chí: Bảng cho phép bạn dễ dàng so sánh các mục dữ liệu theo hàng và cột.
• Khi bạn muốn trình bày dữ liệu một cách rõ ràng và dễ đọc: Bảng giúp bạn sắp xếp dữ liệu một cách logic, giúp người xem nhanh chóng nắm bắt thông tin.

2. Lịch sử phát triển của Table HTML

Trong những ngày đầu phát triển web, bảng được sử dụng rộng rãi để tạo bố cục (layout) cho trang web. Các nhà thiết kế web sử dụng tính năng bảng để sắp xếp các phần tử trên trang, tạo ra các cột và hàng để chứa nội dung.

Tuy nhiên, việc sử dụng bảng cho mục đích layout có một số hạn chế:

• Khó bảo trì: Khi trang web trở nên phức tạp hơn, việc chỉnh sửa và bảo trì bố cục bảng trở nên rất khó khăn.
• Khả năng truy cập kém: Bảng được thiết kế để hiển thị dữ liệu, không phải để tạo bố cục. Do đó, việc sử dụng bảng cho layout có thể gây khó khăn cho người dùng sử dụng trình đọc màn hình (screen reader).
• Mã nguồn phức tạp: Bố cục bảng thường đòi hỏi mã HTML phức tạp và khó hiểu.

Ngày nay, với sự phát triển của CSS (Cascading Style Sheets), chúng ta có nhiều công cụ mạnh mẽ hơn để tạo bố cục trang web, chẳng hạn như Flexbox và Grid. Do đó, việc sử dụng bảng cho mục đích layout không còn được khuyến khích.

3. Cấu trúc cơ bản của một bảng HTML

Một bảng HTML bao gồm các thành phần sau:

• <table>: Phần tử gốc, khai báo một bảng.
• <tr>: Định nghĩa một hàng trong bảng (table row).
• <th>: Định nghĩa một tiêu đề cột (table header).
• <td>: Định nghĩa một ô dữ liệu trong bảng (table data cell).

Đây là một ví dụ đơn giản về cấu trúc của một bảng HTML:

See the Pen
bảng html by haycuoilennao19 (@haycuoilennao19)
on CodePen.

4. Các thành phần của table HTML

Bây giờ, chúng ta sẽ đi sâu vào từng thành phần cốt lõi của bảng HTML.

4.1. <table>: Khai báo một bảng

Phần tử <table> là phần tử gốc, được sử dụng để khai báo một bảng HTML. Tất cả các thành phần khác của bảng (như <tr>, <th>, <td>) phải nằm bên trong phần tử <table> nhé!

Ví dụ:

<table></table>

4.2. <tr>: Định nghĩa một hàng trong bảng

Phần tử <tr> được sử dụng để định nghĩa một hàng trong bảng. Mỗi hàng có thể chứa một hoặc nhiều ô dữ liệu (<td>) hoặc tiêu đề cột (<th>).

Ví dụ:

See the Pen
thẻ tr hhtml by haycuoilennao19 (@haycuoilennao19)
on CodePen.

4.3. <th>: Định nghĩa một tiêu đề cột

Phần tử <th> được sử dụng để định nghĩa một tiêu đề cột trong bảng. Tiêu đề cột thường được in đậm và căn giữa theo mặc định.

Ví dụ:

See the Pen
the th html by haycuoilennao19 (@haycuoilennao19)
on CodePen.

4.4. <td>: Định nghĩa một ô dữ liệu trong bảng

Phần tử <td> được sử dụng để định nghĩa một ô dữ liệu trong bảng. Ô dữ liệu chứa nội dung thực tế của bảng, chẳng hạn như văn bản, số, hình ảnh, hoặc các phần tử HTML khác.

Ví dụ:

See the Pen
thẻ td html by haycuoilennao19 (@haycuoilennao19)
on CodePen.

4.5. <thead>, <tbody>, <tfoot>

Các phần tử <thead>, <tbody>, và <tfoot> được sử dụng để chia bảng thành các phần đầu, thân và chân.

• <thead>: Chứa các hàng tiêu đề của bảng.
• <tbody>: Chứa các hàng dữ liệu chính của bảng.
• <tfoot>: Chứa các hàng tổng kết hoặc thông tin bổ sung ở cuối bảng.

Việc sử dụng các phần tử này giúp chúng ta cấu trúc bảng một cách rõ ràng hơn, và cũng có lợi cho khả năng truy cập (accessibility).

Ví dụ:

See the Pen
<thead>, <tbody>, <tfoot> by haycuoilennao19 (@haycuoilennao19)
on CodePen.

4.6. <caption>: Chú thích cho bảng

Phần tử <ç> được sử dụng để cung cấp một chú thích hoặc tiêu đề cho bảng. Chú thích này thường được hiển thị phía trên hoặc phía dưới bảng.

Ví dụ:

See the Pen
caption trong bảng html by haycuoilennao19 (@haycuoilennao19)
on CodePen.

4.7. <colgroup>, <col>: Định dạng cột

Các phần tử <colgroup> và <col> được sử dụng để định dạng các cột trong bảng. <colgroup> được sử dụng để nhóm các cột lại với nhau, và <col> được sử dụng để định dạng một cột cụ thể.

Ví dụ:

See the Pen
<colgroup>, <col> by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Trong ví dụ này, chúng ta đã sử dụng <colgroup> để định dạng hai cột của bảng. Cột đầu tiên có màu nền là #f2f2f2, và cột thứ hai có chiều rộng là 200px.

4.8. colspan: Gộp nhiều cột thành một cột

Thuộc tính colspan được sử dụng để gộp nhiều cột thành một. Thuộc tính này được đặt trên phần tử <th> hoặc <td>.

Ví dụ:

See the Pen
colspan by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Trong ví dụ này, tiêu đề “Thông tin cá nhân” sẽ chiếm hai cột.

4.9. rowspan: Gộp nhiều hàng thành một

Thuộc tính rowspan được sử dụng để gộp nhiều hàng thành một. Thuộc tính này được đặt trên phần tử <th> hoặc <td>.

Ví dụ:

See the Pen
rowspan by haycuoilennao19 (@haycuoilennao19)
on CodePen.

5. Các thuộc tính CSS cơ bản cho bảng

Dưới đây là một số thuộc tính CSS cơ bản thường được sử dụng để định dạng bảng:

• border: Đặt đường viền cho bảng và các ô.
• padding: Đặt khoảng cách giữa nội dung của ô và đường viền.
• margin: Đặt khoảng cách giữa bảng và các phần tử khác trên trang.
• color: Đặt màu chữ cho nội dung của bảng.
• background-color: Đặt màu nền cho bảng và các ô.
• font-size: Đặt kích thước phông chữ cho nội dung của bảng.
• text-align: Đặt căn chỉnh văn bản cho nội dung của ô.

Kết luận

Trong bài viết này, chúng ta đã cùng nhau khám phá mọi thứ về HTML Tables, mình hy vọng rằng bạn đã học được nhiều điều mới và có thể áp dụng những kiến thức này vào thực tế. Chúc bạn trở thành nhà lập trình viên web trong tương lai nhé.