Gộp cột trong HTML

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 WebTê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.

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

 
 
 
 p {color:red;}
 
 
 
 
Nội Dung

 
 

Ta có thể thấy là ở trong thẻ thì thuộc tính style đã được chuyển sang thẻ . Trong thẻ này thì ta sẽ có cú pháp như sau:

Tên Thẻ{ giá trị thuộc tính CSS }

Sau này các bạn học sâu hơn thì ta ngoài lựa chọn phần tử theo tên thẻ thì mình cũng có thể chọn theo Class hay Id. Mình sẽ có một bài nói riêng về vấn đề này nhé.
Lưu ý là khi ta dùng phương pháp chọn tên thẻ này thì nó sẽ chọn tất cả các thẻ

có trong file HTML hiện tại và như ví dụ trên là tất cả thẻ này đều có chữ màu đỏ nhé!

Bây giờ thì chúng ta thử tạo đường viền cho bảng bằng đoạn code sau nhé:

Mã Code HTML

 
 HTML bài 6
 
 
 td, th {
 border: 1px solid black;
 padding: 16px; 
}
 
 
 
 

 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 WebTê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

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 WebTê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.

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 Web7h đế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ẻ trong .

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ẻ và

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.

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à . Cái này thì mình cũng có thể dùng các thẻ tiêu đề để chú thích bảng nhưng để SEO tốt hơn thì mình khuyên các bạn nên dùng thẻ này. Thẻ chú thích luôn được đặt nằm đầu tiên trong các thẻ của bảng HTML. Bây giờ mình hãy tìm hiểu thông qua ví dụ nhé:

See the Pen HTML caption bảng by haycuoilennao19 [@haycuoilennao19] on CodePen.

Nãy giờ chúng ta đã tìm hiểu được cách xây dựng bảng trong HTML nhưng đối với người lập trình thì ngoài việc tạo ra và hiển thị bảng trên trình duyệt thì họ cũng quan tâm đến khuôn mẫu cách hiện thị code làm sao cho người lập trình khác khi nhìn vào code của chúng ta thì có thể hiểu được và dễ sửa chữa. Thì cũng giống như cấu trúc file HTML thì bảng cũng cung cấp cho chúng ta một cấu trúc để xây dựng bảng làm cho việc quản lý code dễ dàng hơn, còn về khả năng hiển thị theo mình thấy nó cũng giống như những bảng mình đã tạo ở trên. Để rõ hơn thì mình đi vào tìm hiểu ví dụ sau đây nhé các bạn:

Mã Code HTML

 Tên Trái Cây
 Số Tiền


















 
 
 
 
 
 
 
Táo
 
15.000
 
 
 
Ổi
 
10.000
 
 
  
 
Tổng
 
25.000
 
  

Hiện thị trên WebTên Trái CâySố TiềnTáo15.000Ổi10.000Tổng25.000

Như các bạn thấy thì mình đã tạo ra một bảng với cấu trúc file là :

• Header [Tiêu đề] của bảng tương ứng với thẻ