Cách tạo bảng biểu trong HTML

Ví dụ sau đây minh họa cấu trúc cơ bản nhất của một bảng.

Các bảng không có bất kỳ đường viền nào theo mặc định. Bạn có thể sử dụng thuộc tính border trong CSS để thêm đường viền cho các bảng. Ngoài ra, các ô trong bảng có kích thước vừa đủ lớn để phù hợp với nội dung theo mặc định. Để thêm không gian xung quanh nội dung trong các ô của bảng, bạn có thể sử dụng thuộc tính padding trong CSS.

Các style CSS sau đây thêm đường viền 1 pixel vào bảng và thêm không gian 10 pixel xung quanh nội dung vào các ô của bảng.table, th, td { border: 1px solid black; } th, td { padding: 10px; }

Theo mặc định, các đường viền xung quanh bảng và các ô của chúng được ngăn cách với nhau. Nhưng bạn có thể thu gọn chúng thành một bằng cách sử dụng thuộc tính border-collapse trên phần tử

Ngoài ra, văn bản bên trong các phần tử được hiển thị bằng phông chữ đậm, căn chỉnh theo chiều ngang ở giữa ô theo mặc định. Để thay đổi căn chỉnh mặc định, bạn có thể sử dụng thuộc tính text-align trong CSS.

Các style CSS sau đây thu gọn đường viền bảng và căn chỉnh văn bản tiêu đề bảng sang trái.table { border-collapse: collapse; } th { text-align: left; }

Vui lòng xem hướng dẫn về bảng CSS để tìm hiểu chi tiết về cách tạo style CSS cho bảng HTML.

Lưu ý:

Gộp nhiều hàng và cột

Gộp cho phép bạn mở rộng các hàng và cột của bảng trên nhiều hàng và cột khác.

Thông thường, một ô trong bảng không thể chuyển vào khoảng trống bên dưới hoặc bên trên một ô trong bảng khác. Tuy nhiên, bạn có thể sử dụng thuộc tính rowspan hoặc colspan để gộp nhiều hàng hoặc cột trong bảng.

Hãy thử ví dụ sau để hiểu cơ bản colspan hoạt động như thế nào :

Tương tự, bạn có thể sử dụng thuộc tính rowspan này để tạo một ô kéo dài nhiều hơn một hàng. Hãy thử một ví dụ để hiểu cách hoạt động của việc kéo dài hàng về cơ bản:

Thêm chú thích vào bảng

Bạn có thể định nghĩa chú thích [hoặc tiêu đề] cho các bảng của mình bằng cách sử dụng phần tử .

Phần tử phải được đặt ngay sau thẻ mở

Ví dụ sau đây cho thấy cách sử dụng phần tử chú thích trong một bảng.

Định nghĩa header, body và footer của bảng

HTML cung cấp một loạt các thẻ