CSS: thiết kế bảng. ví dụ về đăng ký

Làm bảng với CSS - bài học thú vị và có trách nhiệm. Cách tiếp cận để kinh doanh này cần phải thành thạo, với kiến thức của tất cả các phong cách có thể. Bên cạnh đó, nó là cần thiết để có một cảm giác về cái đẹp để không sợ hãi ra khỏi khách sự sáng tạo của họ.

Các bảng có thể chuyển đổi gần như tất cả mọi thứ. thiết kế đẹp liên quan đến việc sử dụng các ranh giới bảng CSS thiết kế, nền bảng, tế bào nền, khoảng cách giữa họ và nhiều hơn nữa. Hãy xem xét những cơ bản nhất.

table border

CSS thiết kế bảng phong cách luôn luôn liên quan đến một trò chơi với một biên giới (frame). Tất cả các bảng mặc định không đường viền khung. Có nghĩa là, nó là bằng 0 pixel. Nhưng điều này có thể được sửa chữa bằng cách biên giới bất động sản.

Bạn có thể chỉ định khung bên ngoài cho toàn bộ bảng:

bảng {border: 3px rắn đen; }

Nhờ có dòng này ở tất cả các bảng trên trang web sử dụng phong cách này là khung màu đen. Lưu ý rằng biên giới chỉ trên các cạnh, nhưng không phải bên bàn. Đối với dòng tế bào và khung quy định khác.

thứ, td {border: 3px rắn đen;}

Độ dày và màu sắc, bạn có thể chỉ định bất kỳ. Hãy ghi nhớ rằng ranh giới không được nhân đôi khi splicing tế bào.

Từ biểu thị một đăng ký liên tục vững chắc. Bạn có thể chỉ định các giá trị khác.

nó thường được sử dụng khung vững chắc, vì nó trông hấp dẫn hơn và không đánh lạc hướng sự chú ý từ các nội dung chính của trang web.

tài sản biên giới có thể được xác định cũng trên diễn đàn. Ranh giới chỉ có thể được thiết lập cho đỉnh, dưới, trái hoặc bên phải. Bởi vì trong một số trường hợp nó không phải là một lựa chọn khả thi với khung cho toàn bộ bảng cùng một lúc.

table {border-top: 1px solid red; }

Vì vậy, bạn có thể thiết lập các khung phía trên cùng của bảng chỉ. Tương tự như vậy cho bất kỳ bên khác, thay vì ghi chỉ đầu: phải, trái hoặc phía dưới.

tiêu đề bảng

tiêu đề bảng có thể được xác định bằng cách sử dụng thẻ . Thẻ này có thể nằm trong CSS để đăng ký rất nhiều bất động sản cho tinh chỉnh. Thiết kế bảng CSS là tốt vì nó có thể cơ động các yếu tố theo cách bạn muốn.

Danh hiệu này được hiển thị trong cùng một cách như một tiêu chuẩn trong sách (chẳng hạn như "Bảng 1").

Bạn có thể xác định vị trí của tiêu đề và tài sản caption-side (trên hoặc dưới). Canh lề bên trái hoặc phải được xác định bởi thuộc tính text-align.

bảng nền

Bối cảnh của bảng có thể là bất kỳ màu hoặc mẫu. Màu đặt thuộc tính background-color. Tên của các thuộc tính hoàn toàn phù hợp với mục đích sử dụng trong bài phát biểu. Nó tạo điều kiện lưu trữ nhiều lần.

Màu sắc có thể được quy định như tên, và mã hóa khác nhau. Ngoài ra, bạn có thể xác định như sau:

• Transparent - minh bạch.
• Kế thừa - màu là giống như của các yếu tố phụ huynh.
• Ban đầu - mặc định.

Tùy chọn với tính minh bạch có thể được sử dụng trong những trường hợp tất cả các bảng trong văn bản trong file CSS được thực hiện trong một màu, nhưng trong trường hợp này không có nhu cầu.

Bên cạnh đó, nền có thể là một hình ảnh. Để làm điều này, theo phong cách quy định tài sản background-image. Đường dẫn là như thế này:

url ( 'URL')

Đường dẫn đến tập tin này có thể là tương đối hoặc tuyệt đối.

điền phức tạp có thể được thực hiện với một gradient:

• linear gradient ();
• bố trí hình tròn gradient ();
• lặp đi lặp lại tuyến tính gradient () và lặp đi lặp lại-radial gradient () - gradient lặp đi lặp lại.

tế bào nền

Ngoài nền nói chung, bạn có thể chỉ định một nền sọc trong các cột hoặc các hàng. Trường hợp đăng ký tài sản được sử dụng rất thường xuyên, bởi vì việc tách hình ảnh của các dòng dễ dàng hơn để đọc thông tin.

Ngoài những thay đổi luân phiên, và bạn có thể xác định số lượng của một cột hoặc hàng cụ thể. Ví dụ như thế này:

• tr: nth-con (thậm chí) {...} - định interlaced;
• tr: nth-con (1) {...} - dấu hiệu cho thấy các thuộc tính của một hàng cụ thể;
• td: nth-con (thậm chí) {...} - một dấu hiệu của cột xen kẽ;
• td: nth-con (1) {...} - một dấu hiệu của các thuộc tính của một cột cụ thể.

Bên cạnh đó trình tự và con số có thể được xác định - là người đầu tiên (td: first-child) hoặc cuối cùng (td: cuối cùng con).

Khoảng cách giữa các tế bào

Trong CSS, thiết kế bảng cho phép bạn loại bỏ các khoảng trống giữa các tế bào. Theo mặc định họ đang có. Ví dụ, nếu bạn thiết lập các khung trong bảng mà không cần thiết lập khoảng cách giữa ranh giới, nó sẽ có mặt ở đây kết quả này.

Đồng ý, có vẻ không phải là rất tốt đẹp và nó không phải là thuận tiện để đọc. Người dùng sẽ có gợn trong mắt vì điều này. Di chuyển những khoảng trống có thể bằng cách viết chỉ như một dòng trong phong cách bảng:

border-collapse: sự sụp đổ

Nhưng nó cũng sẽ xảy ra rằng khoảng cách, trái lại, nên được tăng lên. Hơn nữa, kích thước của các lỗ hổng có thể được quy định như giữa cột và giữa các dòng. Để cho biết rằng một giá trị (thay vì sụp đổ):

border-collapse: riêng

Nhưng hành động như vậy sẽ chỉ ra rằng nó là cần thiết để tách các tế bào. Như nó đã được chia sẻ của họ, chỉ additional property:

border-spacing: 20px.

Nếu bạn muốn chỉ định một khoảng cách khác nhau giữa các hàng và cột, nó cho thấy hai điều:

border-spacing: 10px20px.

Sự khác biệt trong các trình duyệt

Hãy ghi nhớ rằng trong CSS bảng thiết kế có thể trông khác nhau, tùy thuộc vào trình duyệt. Đặc biệt xấu là trường hợp với phiên bản cũ, rằng những đổi mới trong CSS không được hỗ trợ.

Trên đây là một ví dụ về độ dày khung để các giá trị số.

Trong ví dụ này, độ dày của khung cho các hằng số.

kiểu viền cũng khác nhau rất nhiều.

Do đó, sự phát triển luôn luôn nhìn thấy kết quả trong các trình duyệt khác nhau.

Trong CSS bảng thiết kế khuyến khích để kiểm tra các loại trình duyệt. Đặc biệt là vấn đề lớn sử dụng đến người dùng với các phiên bản cũ của trình duyệt Internet Explorer.

phát triển rất tiên tiến có thể, tùy thuộc vào trình duyệt để kết nối các file CSS hoàn toàn khác nhau. Và ai đó làm cho một tấm séc trong từng hoặc một số phong cách đặc biệt (lớp).

Hầu hết các vấn đề phát sinh từ bóng tối.

CSS: Bảng Format Ví dụ

Đăng ký doanh nghiệp có thể được khá đa dạng. Tất cả đều phụ thuộc vào toàn bộ trang web và thiết kế của nó. Tất cả nên được kết hợp và màu sắc loang lổ. Ngoài ra nó làm cho một nhà phát triển vai trò và hương vị tuyệt vời. Cảm nhận cái đẹp là tất cả khác nhau.

Chúng tôi đưa ra một số ví dụ về các bảng khác nhau. Con số trên cho thấy việc sử dụng nghiêng và chơi với màu nền và biên giới.

Nhiều người sẽ có ví dụ thú vị về thiết kế gọn gàng đẹp đó sẽ không cắt giảm người sử dụng mắt. thân này là thích hợp trong hầu hết các tình huống.

Các cạnh có thể được làm tròn. Có vẻ khá tốt đẹp.

phần kết luận

Như bạn thấy, đối với sự xuất hiện của các bảng trong CSS có nhiều công cụ. Mỗi tham số cũng là một số lượng lớn các tùy chọn giá trị. Nếu bạn sử dụng nó tất cả cùng một lúc, bạn có thể tạo những kiệt tác. Đặc biệt nếu bạn làm thiết kế thích ứng cho tất cả các trình duyệt.

Điều quan trọng trong việc thiết kế - đừng lạm dụng nó với các hiệu ứng. Tất cả mọi thứ nên được thực hiện một cách chừng mực. Lúc đầu, bố trí thích thử nghiệm và sử dụng tất cả kiến thức của họ ngay lập tức. Như một kết quả của bảng là tài sản bão hòa. Cố gắng tránh các lỗi này.

Hơn nữa, một số thông số có thể ảnh hưởng lẫn nhau. Ví dụ, không có nhu cầu để xác định màu nền của bảng, trong khi nếu có vẫn thiết lập hình nền, mà sẽ chồng lên màu quy định.