CSS: дизайн на таблици. Примери за дизайн

Създаването на таблици с помощта на CSS е интересна и отговорна дейност. Подходът към този бизнес трябва да бъде компетентен, като се познават всички възможности на стиловете. Освен това, трябва да притежавате чувство за красота, за да не изплашите посетителите с творчеството си.

В масите можете да трансформирате почти всичко. Красивият дизайн на CSS таблиците включва използването на дизайна на границите, фона на масата, фона на клетките, разликата между тях и много други. Нека да разгледаме най-основните.

Граница на таблицата

Стилът на дизайна на CSS винаги означава да играете с граница. Всички таблици по подразбиране не са заобиколени от граница. Това означава, че е 0 пиксела. Но това може да бъде коригирано с помощта на собствеността на границата.

Можете да зададете външна граница за цялата таблица:

маса {border: 3px solid black}

Благодарение на тази линия всички таблици на сайта, където се използва този стил, ще имат черна граница. Имайте предвид, че границата е само в краищата, но не и в таблицата. За клетки и редове рамката се определя по различен начин.

ти, td {border: 3px solid black}

Дебелината и цветът могат да бъдат посочени. Имайте предвид, че границите не се удвояват, когато се присъедините към клетките.

Думата твърдо означава твърд дизайн. Можете да зададете други стойности.

Най-често се използва твърдата рамка, защото изглежда по-привлекателна и не отклонява вниманието от основното съдържание на сайта.

Границата може също да бъде определена в указанията. Границата може да бъде зададена само за горната, долната, лявата или дясната страна. Тъй като в някои случаи опцията с рамката за цялата маса не е подходяща веднага.

маса {border-top: 1px solid red-}

Така че можете да зададете рамката само в горната част на таблицата. По същия начин, за всички други партии, просто вместо нагоре пишете: надясно, наляво или отдолу.

Заглавие на таблицата

Заглавието на таблицата може да бъде определено чрез използването на маркера . Този маркер може да бъде зададен в CSS много свойства за по-фина настройка. В CSS, дизайнът на таблици е добър, защото можете да маневрирате елементи, както искате.

Този заглавие се показва по същия начин, по който е стандарт в книгите (например "Таблица 1").

Можете също така да посочите местоположението на този хедър със собствеността на страницата с надписи (отгоре или отдолу). Лявото или дясното подравняване се определя от свойството text-align.

Таблица за фон

Фонът на таблицата може да бъде всеки цвят или модел. Цветът се определя от цвета на фона. Имената на свойствата напълно съответстват на тези, използвани в речта. Това прави много по-лесно запаметяването.

Цветът може да бъде зададен чрез име или различни кодировки. Освен това можете да посочите следното:

• Прозрачно - прозрачността на елемента.
• Наследяване - цветът е същият като родителския елемент.
• Първоначалната стойност е по подразбиране.

Вариант с прозрачност може да се използва в случаите, когато всички таблици в текста в CSS файла са направени в един цвят, но в този случай няма такава нужда.

Освен това фонът може да бъде изображение. За да направите това, собствеността на фона е зададена в стила. Пътят е посочен по следния начин:

url ("URL")

Пътят до файла може да бъде относително или абсолютно.

По-сложно запълване може да се направи с градиент:

• линеен градиент ();
• радиален градиент ();
• повтарящ се линеен градиент () и повтарящ се радиален градиент () - повтаряне на градиента.

Клетъчен фон

В допълнение към фона като цяло, можете да посочите променлив фон в колони или редове. За регистрация тази собственост се използва много често, тъй като визуалното разделяне на линиите улеснява четенето на информация.

В допълнение към ротация можете да посочите номера на конкретна колона или ред. Така например:

• tr: nth-child (четно) {...} - укажете редуването на линиите;
• tr: nth-child (1) {...} - определя собствеността на даден низ;
• td: nth-child (четно) {...} - индикация за преплитането на колоните;
• td: nth-child (1) {...} - определя собствеността на конкретна колона.

В допълнение към вмъкването и номерата можете да зададете първото (td: first-child) или последното (td: last-child).

Разстояние между клетките

В CSS дизайна на таблици ви позволява да премахнете пропуските между клетките. По подразбиране те са. Например, ако зададете рамка в таблица без да определяте разстоянието между границите, това е резултатът.

Съгласен съм, не изглежда много приятен и не е удобен за четене. Потребителите ще бъдат в окото на оръфаното заради това. Можете да премахнете тези пропуски, като напишете в стила на таблицата тук този ред:

граничен колапс: свиване

Но също така се случва, че разстоянието, напротив, трябва да се увеличи. Размерът на интервалите може да бъде посочен както между колони, така и между редовете. За да направите това, посочете следната стойност (вместо свиване):

граничен колапс: отделно

Но това действие ще покаже, че трябва да отделите клетките. Как да ги разделите, е обозначено с допълнителна собственост:

гранично разстояние: 20px.

Ако искате да зададете различно разстояние между редове и колони, тогава са посочени две стойности:

разстояние между границите: 10px20px.

Разлика в браузърите

Имайте предвид, че в CSS изглеждането на таблици може да изглежда различно в зависимост от браузъра. Ситуацията е особено лоша при по-старите версии, които иновациите в CSS не поддържат.

По-горе е пример за дебелината на рамката за цифровите стойности.

Ето един пример за дебелината на рамката за константи.

Стиловете на рамки също са много различни.

Ето защо, когато се развивате, винаги гледайте към резултата в различни браузъри.

В CSS се препоръчва да направите дизайн на таблицата с проверка на браузъра. Най-големият проблем беше с потребителите с по-стари версии на Internet Explorer.

Много напреднали разработчици могат да свързват напълно различни CSS файлове в зависимост от браузъра. И някой прави чекове във всеки или в определен стил (клас).

Повечето от проблемите възникват със сенки.

CSS: дизайн на таблици, примери

Дизайнът може да бъде много разнообразен. Всичко зависи от сайта като цяло и от неговия дизайн. Всичко трябва да се комбинира, а не цветно. Също така, вкусът на разработчика също играе голяма роля. Усещането за красота е различно за всички.

Даваме примери на различни таблици. Фигурата по-горе показва използването на наклона и играта с фон и цвят.

Много от тях ще се интересуват от примерен красив дизайн, който няма да спре очите на потребителите. Тази опция е подходяща за почти всяка ситуация.

Краищата могат да бъдат закръглени. Изглежда доста красива.

заключение

Както можете да видите, за да създадете вид на таблици в CSS, има огромен брой инструменти. Всеки параметър има и огромен брой варианти на стойности. Ако използвате всичко това наведнъж, можете да създадете шедьоври. Особено, ако го направите адаптивен дизайн под всички браузъри.

Основното нещо в регистрацията е да не прекалявате с ефекти. Всичко трябва да се прави с умереност. Първоначално дизайнерите на оформлението искат да експериментират и да използват всичките си знания наведнъж. В резултат на това таблиците са свръхнаситени свойства. Опитайте се да избегнете тези грешки.

Освен това някои параметри могат да се намесват помежду си. Например, няма нужда да се уточнява цвят на фона ако в същото време има инсталирана фонова снимка, която ще се припокрие със зададения цвят.