Bài 3: trang web có bảng biểu

Kẻ khung, bảng biểu là một việc thường thấy trong nhiều loại tài liệu khác nhau. Do đó, bảng biểu dùng thẻ TABLE cũng là một thứ thường sử dụng đến trong tài liệu HTML.

Tạo ngay một bảng đơn giản

Mô tả: dùng thẻ TABLE để tạo bảng, nhưng bản thân thẻ này không là gì nhiều, bên trong nó phải có thẻ TR, TD để tạo ra các dòng, cột.

Khi xem kết quả, nhìn lại code, sớm nhận ra các thẻ TR để tạo dòng, các thẻ TD để tạo cột. Lúc này, các dòng có số lượng cột bằng nhau. Muốn bao nhiêu dòng có bấy nhiêu cặp thẻ mở, đóng TR.

Thử cải tiến bảng trên bằng cách thêm cột Stt (số thứ tự) nằm trước cột tên, cũng thêm vài người nữa vào danh sách và đó đánh số thứ tự bạn nhé. Kết quả như sau:

Ở trên là để tạo bảng đơn giản, ít phải trang trí gì cho bảng. Những bảng biểu đầy đủ, phức tạp hơn, có thể có tiêu đề khác màu chữ, màu nền, chân bảng cũng khác. Ta cần phải sử dụng một TABLE đầy đủ.

Một table hoàn chỉnh cần phải có phần thead, tbody, tfoot

Trong thực tế, chỉ cần có thead, tbody là đã khá đầy đủ nếu không có phần tfoot cũng không sao. Nhưng nếu có nhu cầu in ấn khi bảng dài, có đầy đủ các phần sẽ giúp cho thuận lợi.

Về sau, khi học nâng cao thêm về TABLE, thêm thẻ cần dùng đến như COL, COLGROUP, CAPTION.

Một table có cột (column) được ghép

Để ý dòng TD có thuộc tính colspan kèm giá trị để thấy rằng ghép bao nhiêu cột với nhau.

Một table có dòng (row) được ghép

Tương tự, trong bảng người ta có thể ghép dòng với nhau. Xem mã sau:

Cần chú ý: sau khi ghép dòng, dòng tiếp theo số cột giảm đi 1.

Bạn có thể tự thực hành ghép dòng, ghép cột trên cùng một TABLE như bài tập thực hành.

Tham gia thảo luận để hiểu bài hơn, làm được các bảng biểu phức tạp hơn.