1. Giới thiệu

Trong HTML, bảng (table) là một công cụ mạnh mẽ giúp tổ chức và trình bày thông tin dưới dạng hàng và cột. HTML table được sử dụng phổ biến trong việc hiển thị dữ liệu có cấu trúc, như bảng số liệu, danh sách sản phẩm, lịch biểu, hoặc bất kỳ thông tin nào cần hiển thị có thứ tự và rõ ràng. Việc sử dụng đúng cách bảng HTML sẽ giúp dữ liệu của bạn dễ đọc và dễ hiểu hơn.

Bài viết này sẽ hướng dẫn bạn chi tiết về cách tạo bảng trong HTML, các thẻ và thuộc tính liên quan, cùng với những ví dụ cụ thể giúp bạn hiểu rõ hơn về cách sử dụng HTML table hiệu quả.

2. HTML Tables là gì?

HTML table là một tập hợp các hàng và cột, được tạo thành bởi các thẻ đặc biệt để định dạng và trình bày dữ liệu dưới dạng bảng. Mỗi bảng bao gồm các hàng (<tr>), trong đó mỗi hàng chứa các ô dữ liệu (<td>) hoặc tiêu đề cột (<th>).

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

<table>
  <tr>
    <th>Tiêu đề 1</th>
    <th>Tiêu đề 2</th>
    <th>Tiêu đề 3</th>
  </tr>
  <tr>
    <td>Dữ liệu 1</td>
    <td>Dữ liệu 2</td>
    <td>Dữ liệu 3</td>
  </tr>
  <tr>
    <td>Dữ liệu 4</td>
    <td>Dữ liệu 5</td>
    <td>Dữ liệu 6</td>
  </tr>
</table>

Trong ví dụ trên, bảng có ba cột và hai hàng dữ liệu, với hàng đầu tiên là tiêu đề của các cột.

3. Các thẻ cơ bản trong HTML Table

Để tạo bảng trong HTML, bạn cần sử dụng một số thẻ cơ bản:

• <table>: Thẻ này dùng để khai báo một bảng. Mọi nội dung bảng phải nằm trong cặp thẻ <table></table>.
• <tr>: Thẻ dùng để tạo một hàng trong bảng. Mỗi hàng có thể chứa các ô dữ liệu hoặc tiêu đề.
• <th>: Thẻ này tạo tiêu đề cột (header) cho bảng. Thông thường, nội dung của <th> sẽ được bôi đậm và căn giữa.
• <td>: Thẻ dùng để tạo các ô dữ liệu (table data). Đây là nơi bạn đặt nội dung cụ thể cho từng hàng và cột.

Ví dụ cụ thể với bảng có 3 hàng và 2 cột:

<table>
  <tr>
    <th>Tên sản phẩm</th>
    <th>Giá</th>
  </tr>
  <tr>
    <td>Máy tính xách tay</td>
    <td>20,000,000 VND</td>
  </tr>
  <tr>
    <td>Điện thoại</td>
    <td>10,000,000 VND</td>
  </tr>
</table>

a. Thẻ <caption>

Thẻ <caption> được sử dụng để đặt tiêu đề cho bảng, thường được hiển thị phía trên hoặc dưới bảng, tùy theo trình duyệt. Nó giúp người dùng hiểu được nội dung của bảng.

Ví dụ:

<table>
  <caption>Bảng giá sản phẩm</caption>
  <tr>
    <th>Tên sản phẩm</th>
    <th>Giá</th>
  </tr>
  <tr>
    <td>Máy tính</td>
    <td>20,000,000 VND</td>
  </tr>
</table>

b. Thẻ <thead>, <tbody> và <tfoot>

• <thead>: Chứa phần tiêu đề của bảng (các thẻ <th>).
• <tbody>: Chứa nội dung chính của bảng, nơi mà các hàng dữ liệu (<tr> và <td>) được đặt.
• <tfoot>: Chứa phần cuối bảng, thường dùng để tổng hợp hoặc tóm tắt dữ liệu.

Ví dụ sử dụng các thẻ này:

<table>
  <caption>Bảng doanh thu sản phẩm</caption>
  <thead>
    <tr>
      <th>Tên sản phẩm</th>
      <th>Doanh thu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Máy tính</td>
      <td>50,000,000 VND</td>
    </tr>
    <tr>
      <td>Điện thoại</td>
      <td>30,000,000 VND</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Tổng cộng</td>
      <td>80,000,000 VND</td>
    </tr>
  </tfoot>
</table>

4. Các thuộc tính quan trọng của bảng

HTML table còn có một số thuộc tính quan trọng giúp định dạng bảng và hiển thị đẹp hơn:

a. border: Thuộc tính này xác định độ dày của viền bảng.

Ví dụ:

<table border="1">
  <tr>
    <th>Tên sản phẩm</th>
    <th>Giá</th>
  </tr>
  <tr>
    <td>Máy tính</td>
    <td>20,000,000 VND</td>
  </tr>
</table>

b. cellpadding và cellspacing

• cellpadding: Khoảng cách giữa viền ô và nội dung bên trong ô.
• cellspacing: Khoảng cách giữa các ô trong bảng.

Ví dụ:

<table border="1" cellpadding="10" cellspacing="5">
  <tr>
    <th>Tên sản phẩm</th>
    <th>Giá</th>
  </tr>
  <tr>
    <td>Máy tính</td>
    <td>20,000,000 VND</td>
  </tr>
</table>

c. colspan và rowspan

• colspan: Kéo dài một ô ngang qua nhiều cột.
• rowspan: Kéo dài một ô xuống nhiều hàng.

Ví dụ sử dụng colspan và rowspan:

<table border="1">
  <tr>
    <th>Họ tên</th>
    <th colspan="2">Điểm thi</th>
  </tr>
  <tr>
    <td>Nguyễn Văn A</td>
    <td>Toán</td>
    <td>9</td>
  </tr>
  <tr>
    <td>Nguyễn Thị B</td>
    <td>Văn</td>
    <td>8</td>
  </tr>
</table>

5. Mẹo tối ưu hóa bảng cho SEO và trải nghiệm người dùng

Khi tạo bảng trên trang web, bạn cần tối ưu hóa cho cả SEO và trải nghiệm người dùng:

a. Cung cấp tiêu đề bảng

Sử dụng thẻ <caption> để mô tả ngắn gọn nội dung bảng, giúp công cụ tìm kiếm và người dùng hiểu rõ hơn về nội dung bảng.

b. Sử dụng thẻ <th>

Thẻ <th> không chỉ định nghĩa tiêu đề cột mà còn giúp công cụ tìm kiếm hiểu rõ hơn cấu trúc của bảng. Ngoài ra, trình đọc màn hình cho người khiếm thị cũng có thể nhận dạng thẻ <th> và cung cấp thông tin chi tiết cho họ.

c. Đảm bảo bảng thân thiện với thiết bị di động

Khi hiển thị trên thiết bị di động, bảng cần phải điều chỉnh để không bị tràn màn hình. Bạn có thể sử dụng CSS để làm cho bảng cuộn ngang nếu nội dung quá rộng:

table {
  width: 100%;
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

d. Tránh quá nhiều thông tin trong một bảng

Nếu có quá nhiều dữ liệu, hãy cân nhắc chia nhỏ bảng hoặc nhóm các thông tin có liên quan với nhau. Điều này giúp người dùng dễ dàng nắm bắt thông tin hơn.

6. Kết luận

HTML Tables là một phần quan trọng trong việc trình bày dữ liệu trên trang web một cách có tổ chức và trực quan. Khi sử dụng bảng, cần chú ý đến cấu trúc, định dạng và tối ưu hóa cho cả người dùng và công cụ tìm kiếm. Bằng cách sử dụng các thẻ như <caption>, <th>, và các thuộc tính như colspan, rowspan, bạn có thể tạo ra các bảng dữ liệu linh hoạt và rõ ràng.

Hy vọng qua bài viết này, bạn đã hiểu được cách tạo bảng HTML và cách tối ưu hóa chúng để có trải nghiệm tốt nhất cho người dùng. Hãy áp dụng ngay các kiến thức này vào dự án của bạn để nâng cao chất lượng trang web!