Trong HTML, bảng (table) được sử dụng để trình bày dữ liệu một cách có cấu trúc dưới dạng các hàng và cột. Bảng đặc biệt hữu ích khi bạn muốn hiển thị thông tin dạng lưới, so sánh dữ liệu hoặc tổ chức dữ liệu phức tạp một cách rõ ràng và dễ hiểu.
Cấu trúc cơ bản của một bảng HTML bao gồm các thẻ sau:
- <table>: Thẻ gốc, định nghĩa một bảng HTML.
- <thead>: Định nghĩa phần tiêu đề của bảng, thường chứa các tiêu đề cột.
- <tbody>: Định nghĩa phần thân chính của bảng, chứa dữ liệu.
- <tfoot>: Định nghĩa phần chân của bảng, thường chứa các tóm tắt hoặc thông tin bổ sung.
- <tr>: Định nghĩa một hàng trong bảng.
- <th>: Định nghĩa một ô tiêu đề trong hàng tiêu đề (<thead>). Nội dung thường được in đậm và căn giữa theo mặc định.
- <td>: Định nghĩa một ô dữ liệu trong hàng (<tbody> hoặc <tfoot>).
Chèn, trình bày và định dạng bảng chi tiết
Chèn bảng có tiêu đề bảng (headers) và các dòng dữ liệu
Để tạo một bảng cơ bản với tiêu đề và dữ liệu, bạn sử dụng các thẻ <table>, <thead>, <tbody>, <tr>, <th>, và <td>.
Ví dụ:
Giải thích:
- Thẻ <table> bao bọc toàn bộ bảng.
- <thead> chứa hàng tiêu đề (<tr>).
- Mỗi tiêu đề cột được đặt trong thẻ <th>.
- <tbody> chứa các hàng dữ liệu.
- Mỗi hàng dữ liệu là một thẻ <tr>.
- Mỗi ô dữ liệu trong hàng là một thẻ <td>.
Kẻ viền bảng
Để kẻ viền cho bảng, bạn có thể sử dụng thuộc tính border trực tiếp trong thẻ <table> (cách cũ, không khuyến khích trong HTML5) hoặc sử dụng CSS.
Cách 1: Sử dụng thuộc tính border (HTML – không khuyến khích):
Cách 2: Sử dụng CSS (khuyến khích):
Giải thích:
- border-collapse: collapse; gộp đường viền của bảng và các ô thành một đường duy nhất, giúp bảng trông gọn gàng hơn.
- border: 1px solid black; thêm viền 1 pixel, kiểu liền nét, màu đen cho cả thẻ table, th, và td. Bạn có thể tùy chỉnh kích thước, kiểu dáng (dashed, dotted, double), và màu sắc của viền.
Kích thước bảng
Bạn có thể thiết lập chiều rộng và chiều cao của bảng bằng thuộc tính width và height trong CSS.
Ví dụ:
Giải thích:
- width: 50%; đặt chiều rộng của bảng bằng 50% chiều rộng của phần tử chứa nó. Bạn cũng có thể sử dụng các đơn vị khác như pixel (px), em, rem,…
- height: 200px; (đã comment) đặt chiều cao cố định cho bảng. Tuy nhiên, việc cố định chiều cao thường không được khuyến khích vì có thể làm nội dung bị cắt nếu không đủ chỗ. Bảng thường tự động điều chỉnh chiều cao dựa trên nội dung.
Định dạng padding và spacing
- Padding: Khoảng trắng bên trong ô giữa nội dung và đường viền ô. Thuộc tính CSS padding được sử dụng cho thẻ th và td.
- Spacing: Khoảng trắng giữa các ô. Thuộc tính CSS border-spacing được sử dụng cho thẻ table khi border-collapse được đặt là separate (giá trị mặc định).
Ví dụ:
Giải thích:
- border-spacing: 10px; tạo khoảng cách 10 pixel giữa các ô.
- padding: 15px; tạo khoảng trắng 15 pixel xung quanh nội dung bên trong mỗi ô th và td.
Cách nối ghép cột (colspan) và nối ghép dòng (rowspan)
- colspan: Thuộc tính của thẻ <th> hoặc <td>, chỉ định số cột mà ô này sẽ chiếm.
- rowspan: Thuộc tính của thẻ <th> hoặc <td>, chỉ định số hàng mà ô này sẽ chiếm.
Ví dụ sau cho kết quả:
Giải thích:
- <th colspan=”3″>Thông tin liên hệ</th> làm cho ô tiêu đề “Thông tin liên hệ” chiếm 3 cột.
- <th rowspan=”2″>Địa chỉ</th> làm cho ô tiêu đề “Địa chỉ” chiếm 2 hàng. Lưu ý rằng bạn cần bỏ bớt một ô <td> ở hàng thứ tư để tránh thừa ô trong hàng.
Định dạng bảng, cột và dòng (table styling)
Bạn có thể sử dụng CSS để định dạng giao diện của toàn bộ bảng, các cột cụ thể hoặc các dòng cụ thể.
Ví dụ:
Giải thích:
- CSS được sử dụng để thiết lập chiều rộng, căn giữa, font chữ cho bảng.
- thead được định kiểu màu nền.
- th được định kiểu màu nền, màu chữ, padding, viền dưới và căn lề.
- tbody tr:nth-child(even) chọn các hàng chẵn trong <tbody> và áp dụng màu nền khác.
- tbody td định kiểu padding và viền dưới cho các ô dữ liệu.
- tbody tr:last-child td loại bỏ viền dưới ở hàng cuối cùng.
- tfoot được định kiểu font chữ đậm và màu nền.
Bạn có thể sử dụng các bộ chọn CSS khác nhau để nhắm mục tiêu đến các cột hoặc dòng cụ thể hơn nếu cần. Ví dụ, bạn có thể thêm class cho các cột hoặc dòng và sau đó định kiểu chúng.
Cách nhóm cột (colgroup) trong bảng
Thẻ <colgroup> được sử dụng để nhóm các cột lại với nhau, cho phép bạn áp dụng các thuộc tính (chủ yếu là CSS) cho toàn bộ nhóm cột một cách dễ dàng. Bên trong <colgroup>, bạn có thể sử dụng thẻ <col> để định nghĩa các thuộc tính cho từng cột trong nhóm.
Ví dụ:
Giải thích:
- Thẻ <colgroup> được đặt ngay sau thẻ <table>.
- Mỗi thẻ <col> bên trong <colgroup> đại diện cho một cột hoặc một nhóm cột.
- Chúng ta sử dụng thuộc tính class trên thẻ <col> để áp dụng các kiểu CSS đã định nghĩa cho nhóm cột đó.
- Trong ví dụ thứ hai, <col span=”2″ …> nhóm hai cột đầu tiên lại với nhau và áp dụng cùng một kiểu. Sau đó, <col style=”background-color:#f8d7da;”> áp dụng kiểu riêng cho cột thứ ba.
Việc sử dụng <colgroup> giúp bạn quản lý và định kiểu các cột trong bảng một cách hiệu quả, đặc biệt là đối với các bảng lớn và phức tạp.
Giảng viên Cao Đăng Khoa
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
