Chúng ta có thể đã quen thuộc với việc tạo bảng trên Microsoft Word, không có gì khó, chỉ cần điền số cột và số dòng là có thể tạo ra bảng biểu một cách dễ dàng.
Trong HTML, tạo bảng biểu có phức tạp hơn đôi chút nhưng bạn hoàn toàn có thể “vẽ” được một bảng biểu đẹp mặt với HTML và CSS
Đầu tiên, để tạo bảng chúng ta tạo đoạn HTML sau
Kết quả
Trong đó chúng ta sử dụng các thẻ <table> để khai báo bảng, <tr> để khai báo các dòng từ trên xuống dưới,<th> để khai báo tiêu đề của bảng (vd: Họ tên, địa chỉ, công việc…) và <td> để khai báo dữ liệu của từng đối tượng theo hàng ngang.
Thật sự mình thấy cái bảng này xấu quá. Bây giờ chúng ta sẽ dùng CSS tạo viền cho bảng và cho nó có kích thước 100%
Kết quả:
Để phân chia 1 cột thành 2 cột con chúng ta sử dụng atribute colspan khi khai báo <th>
Kết quả
Thêm một chút thẩm mĩ bằng cách chỉnh sửa CSS ta sẽ được bảng biểu đẹp mắt
Kết quả
Họ và tên
Địa chỉ
Công việc
Nguyễn Văn A
Hà Nội
Kĩ sư
Nguyễn Thị B
Bắc Ninh
Giáo viên
Nguyễn Văn C
Hải Dương
Bộ đội
Nguyễn Thị D
Thái Bình
Bác sĩ
