Gộp cột trong HTML 2024

Mã Code HTML

 
 
Tên học sinh
 
Môn thể thao
 
 
 
Nguyễn Văn A
 
Đá banh
 
 
 
Nguyễn Văn B
 
Cầu lông
 
 
 
Nguyễn Văn C
 
Bóng chuyền
 
 

Hiện thị trên Web

Tên học sinhMôn thể thaoNguyễn Văn AĐá banhNguyễn Văn BCầu lôngNguyễn Văn CBóng chuyền

Các bạn có thể thấy một bảng trong HTML khá là đơn giản và rất khó nhìn vì vậy bây giờ chúng ta sẽ đi vào các thuộc tính trong bảng giúp cho nó sinh động và hữu ích hơn.

Thuộc tính style trong bảng:

Giá trị thuộc tính border trong thuộc tính style giúp chúng ta có thể tạo đường viền xung quanh bảng giúp cho nó dễ nhìn hơn. Chúng ta đã học thuộc tính style trong bài đoạn văn với cấu trúc như sau:

Nội dung

Thì các bạn thấy là thuộc tính này được đặt trực tiếp vào thẻ HTML. Nhiều khi có quá nhiều giá trị thuộc tính CSS trong thuộc tính style sẽ làm cho chúng ta sau này nhìn vào code dễ bị rối và khó khăn trong việc sữa lỗi. Vậy nên chúng ta có một cách nữa là đặt thẻ này nằm ở trong thẻ

. Cũng với ví dụ thẻ

nhưng mình sẽ đặt thuộc tính style nằm trong thẻ

:

 
 
 
 
 
 
Nội Dung

 
 

Ta có thể thấy là ở trong thẻ

thì thuộc tính style đã được chuyển sang thẻ

Hiện thị trên Web

Như các bạn thấy thì mình đã có đường viền cho bảng. Còn các giá trị thuộc tính CSS trong thẻ style này thì mình sẽ nói rõ hơn trong khi học CSS nhé. Sẽ có vài bạn học qua thì sẽ nói tại sao mình phải làm rắc rối như vậy vì thẻ

Mã Code HTML

Hiện thị trên Web

Tên học sinhMôn thể thaoNguyễn Văn AĐá banhNguyễn Văn BCầu lôngNguyễn Văn CBóng chuyền

Các thuộc tính như vậy trong bảng HTML thì không khuyến khích sử dụng vì bây giờ thì nó không được hỗ trợ trong HTML5. Nên chúng ta phải dùng giá trị thuộc tính CSS để xét đường viền cho bảng. Cũng có các thuộc tính khác mà cũng không được sử dụng trong bảng nữa là align, bgcolor, cellpadding, cellspacing, width... Các thuộc tính này nếu các bạn muốn tìm hiểu để đọc và hiểu các thuộc tính bảng trong HTML cũ thì có thế truy cập vào đây xem nhé Thuộc tính cũ trong table.

Cách gộp cột trong bảng HTML:

Trong bảng có thuộc tính cho phép chúng ta gộp cột có tên là colspan được sử dụng trong hai thẻ là

Mã Code HTML

 
 
 
7h đến 8h
 
8h đến 9h
 
9h đến 10h
 
 
 
Thứ hai
 
Toán
 
Văn
 
Anh
 
 
 
Thứ ba
 
Thể Dục
 
Lịch Sử
 
 

Hiện thị trên Web

7h đến 8h8h đến 9h9h đến 10hThứ haiToánVănAnhThứ baThể DụcLịch Sử

Ở đây thì các bạn thấy ở ô thể dục thì mình đã gộp hai cột với nhau bằng thuộc tính là colspan="2". Bằng cách thay đổi giá trị thuộc tính này thì có thể gộp được hai hay nhiều cột như colspan="3",colspan="4"... Nhưng các bạn phải để ý là giá trị thuộc tính gộp cột lúc nào cũng nhỏ hơn so với số cột có trong bảng nhé. Một lưu ý nhỏ nữa là mình ghi trực tiếp thuộc tính style vào các thẻ th, td để các bạn dễ nhìn và đỡ mất công phải ghi thêm một file HTML để cài đặt thẻ

Cách gộp dòng trong bảng HTML:

Thì cũng như gộp cột thì trong bảng HTML cho phép chúng ta có thể gộp nhiều dòng lại với nhau bằng thuộc tính rowspan được sử dụng trong hai thẻ

Mã Code HTML

 
 
 
Đài VTV2
 
Đài VTV3
 
 
 
7h đến 8h
 
Phim tài liệu
 
Ca nhạc
 
 
 
8h đến 9h
 
Phim truyền hình
 
 

Hiện thị trên Web

Đài VTV2Đài VTV37h đến 8hPhim tài liệuCa nhạc8h đến 9hPhim truyền hình

Mình đã gắn thuộc tính rowspan="2" vào ô Phim tài liệu các bạn cũng có thể thay đổi số ô được gộp như trong tính chất của gộp cột vậy.

Chú thích trong bảng HTML:

Khi nhìn vào một bảng thì người dùng cũng khó có thể hiểu được dữ liệu của nó thể hiện mục đích gì ? Vì thế HTML cung cấp cho chúng ta một tiêu đề chú thích cho bảng với thẻ là