Thuộc tính opacity
chỉ định độ mờ/độ trong suốt của một phần tử. Nó có thể nhận giá trị từ 0. 0 - 1. 0. Giá trị càng thấp, càng minh bạch
Ghi chú. Khi sử dụng thuộc tính opacity
để thêm độ trong suốt cho nền của một phần tử, tất cả các phần tử con của nó sẽ thừa hưởng cùng một độ trong suốt. Điều này có thể làm cho văn bản bên trong một phần tử hoàn toàn trong suốt khó đọc
Minh bạch sử dụng RGBA
Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, như trong ví dụ của chúng tôi ở trên, hãy sử dụng các giá trị màu RGBA. Ví dụ sau đặt độ mờ cho màu nền chứ không phải văn bản
Bạn đã học được từ Chương Màu sắc CSS của chúng tôi rằng bạn có thể sử dụng RGB làm giá trị màu. Ngoài RGB, bạn có thể sử dụng giá trị màu RGB với kênh alpha [RGBA] - chỉ định độ mờ cho màu
Giá trị màu RGBA được chỉ định với. rgba [đỏ, lục, lam, alpha]. Tham số alpha là một số trong khoảng từ 0. 0 [hoàn toàn trong suốt] và 1. 0 [đục hoàn toàn]
Bạn thường xuyên sử dụng bảng để trình bày dữ liệu, vậy bạn đã biết cách cải thiện diện mạo cho nó chưa? . Trong bài viết dưới đây, FUNiX sẽ hướng dẫn bạn cách vận dụng CSS để định dạng cho bảng. Thân mời các bạn cùng tham khảo
>> Cách áp dụng CSS cho liên kết thẻ
>> Cách áp dụng CSS cho thẻ ảnh, ảnh nền
>> Cách áp dụng CSS tạo danh sách
>> Cách áp dụng CSS cho menu thẻ
1. Lý do cần tạo kiểu cho bảng với CSS?
Những lý do bạn cần tạo kiểu cho bảng với CSS
- Hiển thị dữ liệu như báo cáo tài chính, thống kê, kế toán… một cách khoa học, dễ nhìn, dễ tìm kiếm
- Tạo đường viền, màu nền,… giúp phân biệt các thông tin, dữ liệu hiển thị giá trị trong bảng
- Có thể kiểm tra giám sát tổ chức cục bộ và trình bày các thành phần của bảng một cách rõ ràng, chuyên nghiệp
Như vậy, việc định dạng bảng bằng cách áp dụng CSS sẽ giúp mang lại trải nghiệm tốt hơn cho người dùng
Tạo bảng chuyên nghiệp bằng cách áp dụng CSS2. Cách áp dụng CSS cho bảng thẻ để định dạng bảng
Dưới đây là một số cách áp dụng CSS để tạo nên một bảng đẹp và chuyên nghiệp
Chỉnh kích thước cho bảng và các ô bên trong bảng
Muốn thay đổi kích thước cụ thể là chiều rộng hoặc chiều cao cho bảng, bạn thiết lập thuộc tính chiều rộng [chiều cao] cho phần tử. Còn nếu chỉnh chiều rộng hay chiều cao cho ô thì ta thiết lập thuộc tính chiều rộng [chiều cao] cho phần tử
||.Ví dụ
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cách tạo đường viền và các ô bên trong bảng
Để tạo đường viền cho bảng, bạn sử dụng thuộc tính đường viền cho phần tử. Để tạo đường viền cho tiêu đề ô, bạn chọn thuộc tính đường viền cho phần tử
Còn muốn tạo đường viền cho ô bình thường, bạn thiết lập đường viền thuộc tính cho phần tửVí dụ.
bàn{
ranh giới. 1px màu đen đặc;
}
thứ tự{
ranh giới. 1px màu đen đặc;
}
td{
ranh giới. 1px màu đen đặc;
}
Khoảng cách giữa các đường viền lại với nhau
Sử dụng đường viền thuộc tính, bạn sẽ thiết lập đường viền cho các phần tử ,
,kết quả nhận được là mỗi phần tử sẽ có một đường viền riêng biệt. Trường hợp bạn không thích thì có thể tùy chỉnh lại bằng cách thiết lập thuộc tính border-collapse với giá trị thu gọn cho phần tử để các đường viền bên trong bảng lại với nhauVí dụ.
bảng, th, td{
ranh giới. 1px màu đen đặc;
}
bàn{
sụp đổ biên giới. sụp đổ;
}
Kiểm tra khoảng cách giữa đường viền và nội dung
Để kiểm tra khoảng cách giữa đường viền và nội dung trong bảng bằng cách áp dụng CSS, bạn sử dụng thuộc tính phần đệm trên các phần tử < td > và < th >
Ví dụ
thứ, td {
đệm. 15px;
căn chỉnh văn bản. bên trái;
}
Chỉnh màu nền cho bảng và các ô bên trong bảng
You used property background-color for element
để chỉnh sửa màu nền cho toàn bộ bảng. Để chỉnh sửa màu nền cho tất cả các ô trên hàng, bạn thiết lập thuộc tính màu nền cho phần tửNgoài ra, để chỉnh sửa màu nền cho một ô, bạn sử dụng thuộc tính background-color cho phần tử
Ví dụ.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Muốn tạo vùng đệm bên trong ô, bạn thiết lập thuộc tính đệm cho ô đó. Được biết, việc sử dụng phần đệm thuộc tính để thiết lập vùng đệm cho một ô cũng tương tự như khi sử dụng phần đệm thuộc tính để thiết lập vùng đệm cho một phần thông tin điện tử thông thường
Ví dụ
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cách áp dụng CSS để xác định tiêu đề vị trí với các giá trị. top at on, bottom at bottom table, you have to used thuộc tính caption-side
Ví dụ
MỘT SỐ CHỦ Chủ đềTên chủ đềSố bài viếtSố câu hỏiHTML38119CSS70174
Thực tế cho thấy, với cách áp dụng CSS cho bảng thông số qua các thuộc tính sẽ giúp nó trở nên thân thiện với người dùng hơn. Mong rằng những thông tin chia sẻ trên đây của FUNiX sẽ giúp ích cho bạn trong việc định dạng bảng. Chúc bạn thành công