Bài 9: Thẻ Table trong HTML – Thẻ tạo bảng trong HTML

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:

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:

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:

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ụ:

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ụ:

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!

Bài 9: Thẻ Table trong HTML – Thẻ tạo bảng trong HTML
5 5 votes

Tìm bài viết bằng cú pháp: từ khóa + nguyenhung

  • the table trong html

Để lại ý kiến của bạn

Hãy trở thành người đầu tiên bình luận!

avatar
wpDiscuz
Hello! Tôi là Nguyễn Hùng, blog này tôi xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức về máy tính và làm web Wordpress, SEO, SEM, MMO,... mà tôi biết cho tất cả mọi người. Cảm ơn bạn đã ghé qua và đọc blog, nếu thấy bài viết hay hãy chia sẻ nó thay cho lời cảm ơn nhé. → Xem tiếp"