Thẻ Table Trong HTML - Thẻ Tạo Bảng Trong HTML

4.4/5 - (7 đánh giá)

Tạo bảng trong HTML là trường hợp rất hay gặp khi bạn muốn tạo bảng dữ liệu gồm cột và hàng. Với thẻ Table trong HTML bạn có thể tạo bảng để chèn thêm văn bản, hình ảnh hoặc 1 bảng khác vào mỗi hàng, mỗi cột.

Cách tạo bảng trong HTML như thế nào thì trong bài viết này chúng ta sẽ đi tìm hiểu về các thẻ tạo bảng trong HTML nhé.

Hướng dẫn dùng thẻ Table trong HTML – Các thẻ tạo bảng trong HTML

Để tạo bảng trong HTML chúng ta sẽ sử dụng các thẻ table, tr, th, td, tbody, thead, tfoot. Chúng ta sẽ tìm hiểu về các thẻ tạo bảng chi tiết ở dưới đây.

Nhóm thẻ table – tr – th – td

Để tạo một bảng đơn giản với hàng và cột chúng ta viết đoạn code HTML như sau:

<table border="1">
    <tr>
        <th>STT</th>
        <th>Họ tên</th>
        <th>Quê quán</th>
    </tr>
    <tr>
        <td>1</td>
      	<td>Nguyễn Hùng</td>
        <td>Hà Nam</td>
    </tr>
	<tr>
        <td>2</td>
        <td>Nguyễn Phong</td>
        <td>Hà Nội</td>
    </tr>
</table>

Trong đó:

Thẻ <table> là thẻ khai báo bảng trong HTML
Thẻ <tr> là thẻ khai báo hàng trong HTML
Thẻ <th> thường sử dụng trong hàng đầu tiên của mỗi cột để khai báo tiêu đề của bảng
Thẻ <td> là thẻ khai báo cột trong HTML
Thuộc tính border=”1″ giúp khai báo đường viền cho bảng

Tham khảo thêm

Nhóm thẻ thead – tbody – tfoot

Nhóm thẻ này giúp sắp xếp bố cục của bảng theo 3 phần lần lượt là phần đầu (thead), phần thân (tbody), phần cuối (tfoot).

Để các bạn dễ hiểu trước hết mình sẽ có đoạn code về bảng như sau:

<table border="1">
    <thead>
        <tr>
            <th>
                Họ tên
            </th>
            <th>
                Quê quán
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Nguyễn Hùng
            </td>
            <td>
                Hà Nam
            </td>
        </tr>
        <tr>
            <td>
                Nguyễn Phong
            </td>
            <td>
                Hà Nội
            </td>
        </tr>
    </tbody>
    <tfood>
        <tr>
            <td>
                Thông tin
            </td>
            <td>
                Địa chỉ
            </td>
        </tr>
    </tfood>
</table>

Các bạn chạy code lên sẽ thấy bố cục sắp xếp của bảng vẫn hiển thị như bình thường không có gì khác đúng không nào.

Để thấy được ý nghĩa của các thẻ chúng ta sửa đoạn code trên bằng cách đưa cụm thẻ <thead> xuống dưới cụm thẻ <tfoot> như sau:

<table border="1">
    <tbody>
        <tr>
            <td>
                Nguyễn Hùng
            </td>
            <td>
                Hà Nam
            </td>
        </tr>
        <tr>
            <td>
                Nguyễn Phong
            </td>
            <td>
                Hà Nội
            </td>
        </tr>
    </tbody>
    <tfood>
        <tr>
            <td>
                Thông tin
            </td>
            <td>
                Địa chỉ
            </td>
        </tr>
    </tfood>
  	<thead>
        <tr>
            <th>
                Họ tên
            </th>
            <th>
                Quê quán
            </th>
        </tr>
    </thead>
</table>

Chúng ta chạy đoạn code đó lên thì thấy nó hiển thị cũng không khác gì so với code trên đúng không nào. Vậy bạn có thể thấy các thẻ <thead>, <tbody>, <tfoot> giúp định dạng bố cục của bảng theo quy luật là <thead> – <tbody> – <tfoot> cho dù bạn có đặt vị trí của nó ở đâu trong code.

Thuộc tính colspan và rowspan trong bảng HTML

Thuộc tính Colspan: Dùng để gộp 2 hoặc nhiều cột gần nhau tính từ cột đặt thuộc tính colspan tiến sang bên phải.

Ví dụ:

<table border="1">
    <tr>
        <td colspan="3">Gộp 3 cột 1 + 2 + 3</td>
    </tr>
    <tr>
        <td>Cột 1</td>
        <td>Cột 2</td>
        <td>Cột 3</td>
    </tr>
</table>

Thuộc tính Rowspan: Dùng để gộp 2 hoặc nhiều hàng gần nhau tính từ hàng đặt thuộc tính rowspan xuống bên dưới.

Ví dụ:

<table border="1">
    <tr>
        <td rowspan="3">Gộp 3 hàng 1 + 2 + 3</td>
        <td>Hàng 1</td>
    </tr>
    <tr>
        <td>Hàng 2</td>
    </tr>
    <tr>
        <td>Hàng 3</td>
    </tr>
</table>

Lời kết

Trong bài này, Nguyễn Hùng đã hướng dẫn cho các bạn cách sử dụng các thẻ tạo bảng trong HTML rất chi tiết. Việc tạo thẻ trong HTML rất thường xuyên gặp nên các bạn cố gắng nắm chắc kiến thức về các thẻ table này nhé.

Nếu có vấn để gì cần giải đáp các bạn cứ để lại comment ở bên dưới mình sẽ giải đáp giúp. Hi vọng với những gì mình chia sẻ các bạn có thể tự học HTML ngay tại nhà. Chúc các bạn thành công!