| ” ghi rõ nội dung tiêu đề.
Bảng đã tạo hiện có dạng như sau: Hãy tiếp tục để xem cách tạo kiểu cho bảng này. Bước 2: Yếu tố “body” tạo kiểu thân thể {họ phông chữ: Verdana, Geneva, Tahoma, sans-serif; lai lịch- màu : rgb ( 233 , 233 , 233 ) ; } Phần tử được áp dụng với các thuộc tính tạo kiểu CSS sau:
Bước 3: Tạo kiểu cho phần tử 'chú thích' đầu đề {nét chữ- kích thước : 25px; chữ- căn chỉnh : trung tâm; lai lịch- màu : #1C6758; màu : râu ngô; } Phần tử
Đây là đầu ra của mã được cung cấp ở trên: Bước 4: Thêm đường viền vào bảng Hãy áp dụng đường viền, cùng với phần đệm và lề cho bảng: bảng, th, td {ranh giới : 2px rắn #1C6758; phần đệm: 1px 6px; lề: xe hơi; } Đây:
đầu ra Ghi chú : Nếu chúng ta không muốn khoảng cách giữa các đường viền của bảng, hãy sử dụng thuộc tính thu gọn đường viền. Bước 5: Thu gọn khoảng cách đường viền khỏi bảng Bước 6: Điều chỉnh kích thước bảng chiều rộng : 160px; } Việc thêm vào “ chiều rộng ” với phần tử sẽ tự động điều chỉnh kích thước bảng theo nó::
| Chúng ta cũng có thể áp dụng các kiểu cho ô bảng cụ thể. Hãy thảo luận về chúng! Bước 7: Tạo kiểu cho các ô trong bảng cụ thể Bây giờ, hãy truy cập ô bằng tên lớp trong tệp CSS: .Điểm nổi bật {lai lịch- màu : #0f90d5; } Các ' .Điểm nổi bật ” đề cập đến phần nổi bật của phần tử . Yếu tố này được áp dụng với “ màu nền ” để chỉ định màu trên nền.
| Như chúng ta có thể thấy, ô của bảng đã chỉ định được tạo kiểu thành công: Bước 8: Đặt họ phông chữ và kích thước của bảng cái bàn {họ phông chữ: chữ thảo; nét chữ- kích thước : 18px; chữ- căn chỉnh : trung tâm; } Các thuộc tính CSS sau được áp dụng cho phần tử bảng:
Đây là đầu ra: Bước 9: Tô màu các hàng trong Sequence tbody tr:nth-con ( thậm chí ) { lai lịch- màu : #FFB200; } Đây:
Có thể thấy rằng màu nền được áp dụng thành công cho các hàng chẵn: Đó là tất cả về cách tạo kiểu bảng với CSS Phần kết luậnBảng là một công cụ quan trọng để sắp xếp dữ liệu. Bảng có thể được tạo bằng cách sử dụng các phần tử HTML
|
|---|
