Bạn đang tìm cách tạo bảng trong HTML nhanh chóng, chuẩn cú pháp và dễ hiểu? Bài viết này sẽ giúp bạn nắm vững từng bước để tạo bảng từ cơ bản đến nâng cao, kèm ví dụ thực tế áp dụng ngay. Dù bạn là người mới học lập trình hay đang thiết kế giao diện web, việc hiểu rõ cách dùng thẻ <table> sẽ giúp hiển thị dữ liệu chuyên nghiệp, dễ quản lý. Đừng bỏ lỡ hướng dẫn chi tiết và mẹo tối ưu bảng HTML cho SEO ngay sau đây!

Sơ lược về Table trong HTML

Trong HTML, table (bảng) là cấu trúc dùng để hiển thị dữ liệu theo dạng hàng (row) và cột (column), giúp nội dung trở nên dễ đọc và có tổ chức hơn. Thẻ <table> là thành phần chính để tạo bảng, thường kết hợp với các thẻ con như <tr> (hàng), <td> (ô dữ liệu), và <th> (ô tiêu đề). Việc sử dụng bảng HTML rất phổ biến trong việc trình bày dữ liệu thống kê, thông tin sản phẩm hoặc bảng giá dịch vụ.

Ngoài yếu tố thẩm mỹ, bảng còn hỗ trợ cải thiện trải nghiệm người dùng và có thể được tối ưu cho SEO nếu sử dụng đúng cách. Đặc biệt, khi kết hợp với CSS, bạn có thể thiết kế bảng linh hoạt, từ đơn giản đến phức tạp, phù hợp với nhiều loại giao diện web khác nhau.

Thẻ (tag) của Table HTML

Để tạo bảng trong HTML một cách chính xác và dễ quản lý, bạn cần nắm rõ các thẻ cấu thành bảng. Mỗi thẻ đảm nhiệm một vai trò riêng, từ việc tạo hàng, cột đến định nghĩa tiêu đề hoặc nhóm dữ liệu. Bảng thẻ table HTML dưới đây sẽ là những thẻ phổ biến, thường được sử dụng trong thiết kế web:

Tạo cấu trúc dữ liệu bảng bằng HTML

Để tạo bảng HTML hoàn chỉnh và đúng chuẩn, bạn chỉ cần thực hiện theo các bước sau:

Bước 1: Tạo bảng với thẻ <table>

Để tạo bảng HTML hoàn chỉnh và đúng chuẩn, bạn chỉ cần thực hiện theo các bước sau:

<table>

  <!– Nội dung bảng nằm ở đây –>

</table>

Bước 2: Tạo các hàng bằng thẻ <tr>

Mỗi hàng dữ liệu hoặc tiêu đề trong bảng sẽ được đặt trong một thẻ <tr> (table row).

<tr>

  <!– Các ô nằm trong hàng –>

</tr>

Bước 3: Thêm ô tiêu đề bằng thẻ <th>

Dùng thẻ <th> để tạo tiêu đề cho cột, thường nằm trong phần đầu bảng. Nội dung thẻ này mặc định được in đậm và căn giữa.

<tr>

  <th>STT</th>

  <th>Sản phẩm</th>

  <th>Giá</th>

</tr>

Bước 4: Thêm ô dữ liệu bằng thẻ <td>

Thẻ <td> dùng để hiển thị nội dung dữ liệu trong từng ô.

<tr>

  <td>1</td>

  <td>Áo thun</td>

  <td>200.000đ</td>

</tr>

Bước 5: (Tùy chọn) Nhóm các phần bằng <thead>, <tbody>, <tfoot>

Để bảng dễ quản lý và hỗ trợ CSS, bạn có thể nhóm các hàng theo từng phần:

<table>

  <thead>

    <tr><th>STT</th><th>Sản phẩm</th><th>Giá</th></tr>

  </thead>

  <tbody>

    <tr><td>1</td><td>Áo thun</td><td>200.000đ</td></tr>

    <tr><td>2</td><td>Quần jeans</td><td>400.000đ</td></tr>

  </tbody>

</table>

LANIT minh họa cấu trúc tổng thể của một nền tảng để bạn có cái nhìn trực quan và dễ hiểu hơn.

<table>

  <thead>

    <tr>

      <th>STT</th>

      <th>Tên sản phẩm</th>

      <th>Giá</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>1</td>

      <td>Áo thun</td>

      <td>200.000đ</td>

    </tr>

    <tr>

      <td>2</td>

      <td>Quần jeans</td>

      <td>400.000đ</td>

    </tr>

  </tbody>

</table>

Cách định dạng bảng trong HTML

Mặc định, bảng HTML hiển thị khá đơn giản và thô. Để bảng trông đẹp mắt, dễ đọc và chuyên nghiệp hơn, bạn cần định dạng bảng bằng CSS. Dưới đây là một số cách định dạng cơ bản thường dùng:

Thêm đường viền cho bảng và ô

Sử dụng thuộc tính border để tạo viền cho bảng và các ô dữ liệu.

<style>

  table, th, td {

    border: 1px solid #000;

    border-collapse: collapse; /* Gộp viền */

  }

</style>

Them-duong-vien-cho-bang-va-o.jpg

Thêm đường viền cho bảng để tạo điểm nhấn

Kích thước và chiều rộng bảng

<style>

  table {

    width: 100%;

    max-width: 800px;

    margin: 0 auto; /* Căn giữa bảng */

  }

</style>

Căn giữa nội dung và canh lề

Dùng text-align và padding để canh chỉnh nội dung cho dễ nhìn.

style>

  th, td {

    text-align: center;

    padding: 8px;

  }

</style>

Định dạng màu nền và tiêu đề

Bạn có thể làm nổi bật tiêu đề và các hàng xen kẽ bằng màu sắc.

<style>

  thead {

    background-color: #f2f2f2;

  }

  tbody tr:nth-child(even) {

    background-color: #f9f9f9;

  }

</style>

Sử dụng Table HTML đúng cách

Để sử dụng bảng HTML hiệu quả, bạn cần hiểu rõ mục đích trình bày và cách viết cú pháp phù hợp. Dưới đây là ví dụ về bảng dữ liệu đơn giản được cấu trúc đúng chuẩn.

Ví dụ sử dụng thẻ Table HTML 1

Nội dung bảng thể hiện theo các thẻ HTML trên:

Bảng điểm học sinh 

Chú thích:

• Thẻ <td>: Dùng để hiển thị dữ liệu trong từng ô của bảng. Mỗi thẻ <td> nằm trong một hàng <tr> và chứa nội dung cụ thể như văn bản, số liệu hoặc liên kết.
• Thẻ <tr>: Đại diện cho một hàng trong bảng, bao gồm cả hàng tiêu đề và các hàng dữ liệu. Mỗi hàng sẽ chứa một hoặc nhiều ô thông qua các thẻ <th> hoặc <td>.
• Thẻ <th>: Dùng để tạo ô tiêu đề cột hoặc hàng trong bảng. Nội dung trong <th> được trình bày in đậm, căn giữa mặc định, giúp phân biệt rõ với ô dữ liệu thường. Thường nằm trong hàng đầu tiên hoặc cột đầu tiên.

Ví dụ sử dụng thẻ Table HTML 2

Giải thích cấu trúc bảng:

• Hàng tiêu đề đầu tiên: Bao gồm các cột chính là “Họ và Tên”, “Tuổi”, “Kinh nghiệm làm việc”, và “Chứng chỉ chuyên môn”. Trong đó, phần “Kinh nghiệm làm việc” được tách thành hai cột nhỏ nên sử dụng thuộc tính colspan=”2″ để gộp ô tiêu đề.
• Các tiêu đề cột đơn: Những tiêu đề như “Họ và Tên”, “Tuổi”, và “Chứng chỉ chuyên môn” được hiển thị xuyên suốt hai hàng đầu tiên của bảng bằng cách sử dụng thuộc tính rowspan=”2″ nhằm gộp ô theo chiều dọc.
• Phần dữ liệu: Mỗi hàng đại diện cho thông tin của một cá nhân. Thẻ <th scope=”row”> được dùng để đặt tên từng người trong cột đầu, đóng vai trò như tiêu đề hàng, giúp tăng khả năng truy cập. Các thông tin chi tiết như tuổi, vị trí công việc, số năm kinh nghiệm… được đặt trong các thẻ <td> tương ứng.

Việc thành thạo cách tạo và định dạng bảng trong HTML không chỉ giúp bạn trình bày dữ liệu rõ ràng, dễ theo dõi mà còn góp phần nâng cao trải nghiệm người dùng và hỗ trợ SEO hiệu quả. Khi sử dụng bảng HTML đúng cách bạn sẽ dễ dàng xây dựng giao diện web chuyên nghiệp và tối ưu hóa nội dung cho công cụ tìm kiếm. Hãy áp dụng linh hoạt các thẻ HTML cùng CSS để thiết kế bảng đẹp, dễ đọc và thân thiện với người dùng ngay từ hôm nay.