Khi bạn kết xuất mã mà chúng tôi đã viết ở trên, chúng tôi sẽ có mã đó trong trình duyệt của mình;
Thuộc tính CSS được sử dụng để tạo kiểu cho bảng
Bảng chúng tôi tạo ở trên có đầy đủ chức năng. Tuy nhiên, nó để lại nhiều điều đáng mong đợi vì nó không được tạo kiểu tốt. Để đạt được kiểu dáng mong muốn và làm cho bảng trở nên hấp dẫn về mặt hình ảnh, chúng ta sẽ sử dụng CSS.
Bạn có nhớ tệp CSS mà chúng tôi đã tạo không? Đã đến lúc sử dụng nó. Tuy nhiên, để kiểu dáng hoạt động, trước tiên bạn phải nhập tệp CSS vào tệp HTML. Chúng tôi đặt tên tệp CSS là styles.css. Tại phần
thêm các phần tử sau vào tài liệu HTML;
Bây giờ chúng ta đã sẵn sàng tạo kiểu cho bảng của mình. Chúng ta có thể tạo kiểu cho nó như sau;
# 1. Ranh giới
Chúng ta có thể thêm đường viền xung quanh các ô trong bảng của mình. Để đạt được điều này, chúng ta sẽ xác định thuộc tính đường viền cho các phần tử
th, td {
border: 2px solid orange;
}Chúng tôi đặt giá trị đường viền thành 2 và chúng tôi đã thêm màu cam làm màu của mình.
Bạn sẽ thấy những điều sau đây khi hiển thị một trang mới;
#2. Sự sụp đổ của biên giới
Nếu nhìn vào ảnh chụp màn hình ở trên, bạn sẽ nhận thấy có khoảng cách giữa các cạnh của mỗi ô. Thuộc tính thu gọn đường viền chỉ định xem các ô liền kề trong bảng có nên chia sẻ đường viền hay không.
Nếu bạn muốn các ô có chung đường viền, hãy thêm mã này vào tệp CSS;
table {
border-collapse: collapse;
}Khi kết xuất trang của mình, bạn có thể thấy các ô có chung đường viền như sau;
Nếu bạn muốn các ô có đường viền khác nhau, hãy thêm phần này vào tệp CSS của bạn;
table {
border-collapse: separate;
}Trang được hiển thị sẽ trông như thế này;
#3. Khoảng cách giữa các đường viền
Sử dụng thuộc tính border-space, chúng ta có thể tạo một khoảng trống nhỏ giữa các ô trong bảng. Chúng tôi đặt quy tắc bên trong lớp bảng trong tệp CSS của mình.
Để thuộc tính này hoạt động, chúng ta cần sử dụng border-collapse: Riêng biệt; tài sản.
Chúng ta có thể có lớp bảng như sau;
table {
border-collapse: separate;
border-spacing: 3px;
}Đường viền ô có khoảng cách 3 điểm ảnh.
Khi bạn kết xuất bảng, nó sẽ trông như thế này;
#4. Bố trí bảng
Thuộc tính Table-layout xác định tính chất của bảng. Bạn có thể có các bảng luôn có cùng độ dài. Mặt khác, bạn cũng có thể tạo các bảng thay đổi dựa trên nội dung.
Nếu muốn các ô có kích thước tương tự nhau, chúng ta có thể đặt thuộc tính bố cục bảng làm hằng số.
bố trí bảng: cố định;
Mã bảng cuối cùng của chúng tôi sẽ như sau;
table {
border-collapse: collapse;
border-spacing: 3px;
table-layout: fixed;
}Nếu muốn các ô thay đổi tùy theo nội dung thì chúng ta có thể thay đổi thuộc tính table-layout thành auto.
bố trí bảng: tự động;
Lớp bảng cuối cùng trong mã CSS của chúng ta sẽ là;
Kiểm tra ô cuối cùng trong bảng và nhận thấy rằng tôi đã thêm những từ này; MailChimp và nhiều hơn nữa.
Bây giờ bạn có thể thấy các ô ở hàng cuối cùng lớn hơn các ô còn lại vì cách bố trí bảng linh hoạt tùy theo nội dung.
Kiểu dáng mà chúng ta đã trình bày cho đến nay đã tập trung vào toàn bộ chiếc bàn. Bây giờ chúng ta có thể tập trung vào các lớp riêng lẻ bằng cách thay đổi màu nền, phông chữ và các thuộc tính căn chỉnh văn bản cho hàng, ô hoặc tiêu đề.
Chúng ta có thể định kiểu các thuộc tính này như sau;
#5. Màu nền
Chúng ta có thể thay đổi nền của hàng trên cùng thành màu vàng-xanh. Chúng ta có thể sử dụng bộ chọn lớp giả :first-child để đạt được mục tiêu của mình.
Thêm mã này vào mã CSS của bạn;
tr:first-child {
background-color: yellowgreen;
}Mã hiển thị cuối cùng sẽ trông như thế này;
#6. Nét chữ
Chúng ta có thể thay đổi kiểu phông chữ hoặc kích thước phông chữ của các hàng, cột hoặc ô cụ thể trong bảng của mình.
Chúng tôi sẽ hướng nội dung của cột cuối cùng trên trang của chúng tôi (Sử dụng Công ty) để thay đổi kiểu phông chữ.
Chúng tôi sẽ in nghiêng toàn bộ nội dung của cột này, nhắm mục tiêu bộ chọn lớp td:last-child. Bạn có thể thêm đoạn mã sau vào tệp CSS của mình;
td:last-child {
font-style: italic;
}Kết quả cuối cùng sẽ có sau khi tải lại trang được hiển thị;
Chúng ta cũng có thể thay đổi màu sắc và cỡ chữ của cột đầu tiên để tạo sự độc đáo.
Thêm mã sau vào tệp CSS của bạn;
tr td:first-child {
color: red;
font-size: x-large;
font-weight: bolder;
}Bạn sẽ nhận thấy những điều sau khi hiển thị trang; nội dung cột đầu tiên (Ngôn ngữ) có cỡ chữ lớn hơn, màu đỏ và đậm.
Cách làm cho bảng phản hồi nhanh
Bảng chúng tôi tạo có thể không phù hợp với màn hình nhỏ. Để kiểm tra xem mã của bạn có phản hồi hay không, bạn có thể sử dụng Công cụ dành cho nhà phát triển Chrome hoặc công cụ của bên thứ ba như thế này.
Có một số cách tiếp cận bạn có thể thực hiện, nhưng nó sẽ chỉ bao gồm một cách.
Thực hiện theo các bước sau;
- Đặt chiều rộng của phần tử
trong mã của bạn;
table { width: 100%; border-collapse: collapse; table-layout: fixed; }- Đặt ngắt từ thành td và th để tạo từ dài trong ô.
th, td { border: 2px solid orange; word-break: break-word; }Các phương pháp thực hành tốt nhất cho kiểu bảng
CSS có thể rất thú vị, đặc biệt là khi bạn biết điều đó. Dưới đây là một số phương pháp hay nhất để đảm bảo bạn có được kiểu dáng bảng tốt nhất;
- Sử dụng biểu định kiểu bên ngoài: Chúng tôi có tùy chọn sử dụng kiểu nội tuyến, nhưng chúng tôi đã chọn biểu định kiểu bên ngoài. Chúng tôi có thể sử dụng lại kiểu dáng của mình trên các bảng, giảm thời gian thiết kế.
- Hãy đơn giản hóa: bạn có thể bị cuốn theo và tạo kiểu quá mức cho bảng của mình. Tuy nhiên, hãy luôn giữ thiết kế đơn giản và làm cho bảng của bạn có thể quét và đọc được.
- Thêm đường viền vào bảng của bạn: Đường viền giúp bảng của bạn dễ đọc và quét hơn.
- Sử dụng màu sắc nhất quán: Nếu bạn có nhiều bảng trên trang web của mình, hãy đảm bảo bạn sử dụng màu sắc và phông chữ nhất quán. Sử dụng màu sắc thương hiệu của bạn có thể cải thiện khả năng hiển thị thương hiệu của bạn.
- Làm cho bảng của bạn phản hồi nhanh: bạn có thể không bao giờ biết kích thước màn hình của thiết bị người dùng cuối.
- Sử dụng chú thích để mô tả bảng của bạn: Chú thích mô tả ngắn gọn nội dung của bảng.
- Sử dụng khoảng trắng để phân tách các bảng: nếu có nhiều bảng liên tiếp nhau, hãy thêm một số khoảng trắng và gắn nhãn cho chúng một cách thích hợp.
Ứng dụng
Tôi tin rằng bây giờ bạn có thể tạo và tạo kiểu cho một bảng HTML cơ bản. Chúng tôi có thể chưa đề cập đến mọi thứ vì HTML và CSS rất rộng. Bạn có thể tạo các bảng nhỏ hơn hoặc lớn hơn tùy thuộc vào tính chất của dữ liệu bạn muốn thu thập.
Hãy xem bảng tóm tắt CSS nếu bạn muốn tìm hiểu thêm về CSS và cách sử dụng nó để cải thiện giao diện người dùng của mình.
Bạn nghĩ gì về bài báo này?
bài chuyển hướng
tìm kiếm
Muộn nhất
Chúng tôi sử dụng cookie để đảm bảo mang đến cho bạn trải nghiệm tốt nhất trên trang web của chúng tôi. Nếu bạn tiếp tục sử dụng trang web này, chúng tôi sẽ cho rằng bạn hài lòng với nó. Chính sách bảo mậtOk
