Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Bảng (Table) trong HTML

5/5 - (6 bình chọn)

Trong số chúng ta chắc hẳn đã ít nhất một lần làm việc hoặc nghe tới  khái niệm “bảng” rồi đúng không? Ví dụ như bảng lương, bảng điều tra dân số, bảng kê khai… Vậy bảng là gì? Và vì sao nó lại được ứng dụng nhiều vào đời sống đến như vậy? Tất cả chúng sẽ được giải đáp trong bài học này. Các bạn chú ý xem kĩ nhé.

Bảng là gì? Bảng được tạo nên bởi một số hữu hạn các hàng và cột, chúng kết hợp với nhau để nhằm lưu trữ dữ liệu một cách rất trực quan và khoa học. Trong đời sống bạn được nghe về bảng rất nhiều rồi vậy trong ngôn ngữ lập trình, đặc biệt là HTML thì liệu có bảng không? Và chúng được tạo nên như thế nào?

Bảng (Table) trong HTML bang-html

Ở bài trước chúng ta đã tìm hiểu về danh sách trong HTML rồi thì hôm nay mình sẽ giới thiệu các bạn về việc tạo ra một bảng và cách sử dụng chúng ra sao? Để tạo một 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 ở ngay dưới đây. Để tiện cho việc học cũng như tiếp thu kiến thức thì mình xin chia thành hai loại chính là: Nhóm thẻ table – tr – th – td và nhóm thẻ thead – tbody – tfoot

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

Để hiểu hơn về các cặp thẻ thì mình xin đưa ra ví dụ cho các bạn dễ hiểu và có cái nhìn trực quan  hơn.

Bảng (Table) trong HTML bang-trong-html-nhom-the-table-th-tr-tdKhi chạy lên trên trình duyệt sẽ được kết quả là một bảng gồm 3 dòng và 3 cột như sau:

Bảng (Table) trong HTML kq-nhom-the-table-th-tr-tdTrong đó:

  • <table> là thẻ khai báo bảng trong HTML
  • <tr> là thẻ khai báo hàng trong HTML
  • <th> là thẻ khai báo tiêu đề của bảng
  • <td> là thẻ khai báo cột trong HTML
  • Border = “1” là đường viền cho bảng. Nếu bạn không thích đường viền thì có thể để nó bằng 0 nhé.

Nhóm thẻ thead – tbody – tfoot

Nhìn vào tên các cặp thẻ trên chắc hẳn các bạn cũng đã hiểu chúng có tác dụng gì rồi phải không nào? Chúng được tạo ra để sắp xếp bố cục của bảng theo 3 phần chính đó là phần đầu (thead), phần thân (tbody) và phần cuối (tfoot). Và để hiểu rõ hơn về các cặp thẻ này thì mình xin đưa ra ví dụ cho các bạn dễ hiểu và dễ học nhé:

Bảng (Table) trong HTML bang-trong-html-nhom-the-thead-tbody-tfoot

Bảng (Table) trong HTML kq-nhom-the-thead-tbody-tfoot

Bạn thấy đấy, nó cũng tương tự như nhóm thẻ table-th-tr-td phải không? cũng hiển thị ra một bảng và có viền bao quanh. Vậy tại sao chúng lại được phân chia ra như vậy. Chúng ta thử xáo trộn vị trí của cặp thẻ <thead> và cặp thẻ <tbody> xem có hiện tượng gì xảy ra không nhé.

Mình sẽ có đoạn code như sau

Bảng (Table) trong HTML doi-cho-thead-va-tbody-trong-nhom-the-thead-tbody-tfoot

Các bạn thử chạy xem có thay đổi gì không nhé. Kết quả là không thay đổi gì mặc dù chúng ta đã thay đổi vị trí của các cặp thẻ cho nhau. Qua đây chúng ta thấy tác dụng của nhóm thẻ thead – tbody – tfoot rồi chứ. Rất thú vị và dễ hiểu phải không nào?

Thuộc tính colspan và rowspan trong table

Để hiểu rõ hơn về bảng chúng ta sẽ tìm hiểu hai thuộc tính khá hữu ích của bảng đó là thuộc tính rowspan và colspan.

Thuộc tính colspan: Dùng để gộp hai hay nhiều cột gần sát nhau thành một cột

VD: Chúng ta gộp 2 ô Họ tên và Điểm thành 1 ô là Họ và tên nhé. (thay th thành td cho đẹp)

Bảng (Table) trong HTML colspan-trong-tabl

Kết quả chúng ta sẽ được là:

Bảng (Table) trong HTML kq-colspan-trong-tableThuộc tính rowspan: dùng để gộp 2 hay nhiều hàng gần sát lại với nhau thành 1 hàng. Tương tự như ví dụ về colspan, các bạn thay colspan thành rowspan nhé.

Bảng (Table) trong HTML rowspan-trong-table

Bảng (Table) trong HTML kq-rowspan-trong-tableQua bài viết này mình mong các bạn hiểu cấu trúc của bảng (table) trong HTML là như thế nào, và cách tạo ra một bảng, cách gộp hàng, gộp cột lại như thế nào. Bài viết của mình còn nhiều thiếu sót, mong các bạn góp ý. Hẹn gặp lại các bạn ở bài sau: Form trong HTML

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Bạn có biết là có khá nhiều blog đề cập về tính năng thay đổi tốc độ cho VideoPad hay...
    17 giây trước
  2. Hiện nay trên thế giới có rất nhiều nền tảng mạng xã hội thu hút được người dùng từ mọi...
    17 giây trước
  3. Xây dựng cấu trúc bài viết là một kỹ năng cần thiết để bài viết trên blog của bạn hấp...
    15 giây trước
  4. Là một người làm về SEO, một trong những cách tốt nhất để làm việc chính là tìm kiếm các kỹ thuật...
    18 giây trước
  5. Cấu trúc website là một khía cạnh quan trọng và cốt lõi trong suốt một chiến lược SEO của bạn....
    8 giây trước
  6. Việt Nam Google Adsense livestream: Mẹo giúp phát triển doanh nghiệp trực tuyến của bạn với Google Adsence. Cảm ơn...
    29 giây trước
  7. Trên các diễn đàn SEO năm 2017, backlink trở lại có những thay đổi rõ rệt. Từ xưa tới nay...
    28 giây trước
  8. Tạo một trang web tuyệt đẹp chỉ là bước đầu tiên để bắt đầu kinh doanh trực tuyến. Để có thể...
    15 giây trước
  9. Google Analytics là gì? Hướng dẫn cài đặt Google Analytics? 4 báo cáo Analytics mà bạn không thể bỏ qua...
    28 giây trước
  10. Có hai loại người: Những người nghĩ rằng họ có thể viết và những người nghĩ rằng họ không thể....
    26 giây trước