Цвят на реда на CSS таблицата. Забележка: отрицателен офсет

Признаци на бременност след имплантиране на ембрион

С помощта на атрибута BGCOLOR можете да промените цвета на съдържанието на клетка, ред, група колони, група редове или цяла таблица.

Цветът може да бъде определен или чрез името на цвета, или чрез шестнадесетичната стойност на кода на цвета със знака #.

Пример:

HTML код:


Дисплей на браузъра:


1 2
3 4

Графична фонова таблица html страница

С помощта на атрибута BACKGROUND можете да зададете графичния фон на клетка или цяла таблица. Ако дадено изображение е по-голямо от клетката или таблицата, за която е предназначено, браузърът изрязва изображението, за да се побере в съответния обект.

Пример:

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

Първо ще разгледаме атрибутите, които са присъщи на таговете

HTML код:


11111 22222 33333 44444

Дисплей на браузъра:


11111 22222
33333 44444

Подравняване на данни в таблица на html страници

Атрибутите ALIGN и VALIGN се използват за подравняване на данните в таблицата.

Атрибутът ALIGN е за хоризонтално подравняване. По подразбиране съдържанието на заглавката е центрирано, а съдържанието на клетката е подравнено вляво.

Атрибутът VALIGN подравнява данните вертикално. По подразбиране информацията е подравнена в средата. Инструментите за подравняване могат да се използват в отделна клетка, ред, група колони или група редове. Атрибутът за подравняване в клетките на таблицата има най-висок приоритет.

Ако ограничите разстоянието между съдържанието на клетка и нейните краища с помощта на атрибута CELLPADDING, това се отразява на резултата от подравняването. Например, с CELLPADDING=3 и ALIGN="top", данните ще бъдат поставени на три пиксела от горната граница на клетката.

Пример:

който е отговорен за създаването на низове и етикета, отговорен за създаването на клетки.

За да видим как всичко работи на практика, нека създадем таблица, състояща се от два реда и четири клетки. Кодът за нашата таблица ще бъде както следва:

HTML код:


1111
2222		 22222 Долна клетка Долна клетка

Дисплей на браузъра:


1111
2222 		22222
Долна клетка Долна клетка

Преоразмеряване на таблица на HTML страница

Ширината на таблицата се определя от атрибута WIDTH. Стойността може да бъде зададена както в абсолютни единици (WIDTH=250), така и в относителни единици (WIDTH="80%"). Например, като зададете ширината на 600 пиксела, можете да сте сигурни, че таблицата ще се побере в прозореца на браузъра при всяка резолюция на монитора.

Същото може да се направи с височината на таблицата с помощта на атрибута HEIGHT.

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

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

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

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

Тази практика се използва много често при стилизиране на таблици, когато искат да увеличат видимостта на информацията, показвана в тях. Докато търсих решение, се оказа, че този проблем може да бъде решен съвсем просто само с CSS.

Няма нужда да маркирате четни и нечетни елементи от списък с класове (дясното меню работи на моя база). Просто трябва да добавите няколко реда код използвайки псевдо-класа nth-child в CSS файл, който отговаря за стила на сайта. Въпреки това, nth-child има много други приложения, които също няма да пропусна да спомена в публикацията.

Възможности на псевдокласа nth-child и използването му в сайта

Всъщност, след като обявих псевдокласа nth-child, мога да прекратя публикацията, защото вие сами можете да потърсите в Google много информация за него. Но това не е нашият път, затова ще продължим. И така, първо ще опиша стъпките си, за да превърна дясното меню в „раирано“. Достатъчно беше да разберете с помощта на инструментите за разработчици, вградени в браузърите (извиквани от контекстното меню на желания елемент на уеб страницата чрез избиране на елемент като „Преглед на кода на елемента“), къде във файла със стилове външният вид на редовете на този списъкът е зададен.

Принципът на работа с инструменти за разработчици е подобен на този, който описах в статията за . Щракнете с десния бутон върху който и да е елемент в лявото меню на моя блог и вижте получения отчет в панела, който се отваря:

Вляво ще видите Html кода на този елемент (интересуваме се от елемента с LI тагове - редът на списъка), а в дясната колона са CSS правилата, които браузърът използва, за да го стилизира. Можете веднага да разберете къде се намира стиловият файл, като преместите курсора на мишката до името му.

В моя случай това ще бъде файл, който може да бъде отворен чрез свързване към сайта чрез FTP и следване на следния път (не бих препоръчал редактиране на шаблонни файлове от административната област на WordPress, защото няма начин да направите крачка назад, както е възможно, например).

/wp-съдържание/теми

Всъщност в лентата с инструменти за разработчици в областта на CSS стиловете дори ще намерите ред, на който желаното правило е написано във файла със стилове. В моя случай е 281 реда. Следователно, след като отворих style.css в Notepad (имам го назначен като редактор по подразбиране за всички файлове, които се появяват в двигателя на сайта), веднага се преместих на този ред.

И точно под него добавих още няколко правила с (това правило отговаря за промяната на цвета на фона на дясната лента с менюта, когато курсорът на мишката е точно над нея - това прави менюто по-„живо“ или нещо подобно) и с n-то -детски псевдо-клас, споменат по-горе. Ако вече сме говорили за hovver (вижте връзката точно по-горе), тогава ще говорим за nth-child сега. Ако сте забелязали, че параметърът 2n е написан в скоби за този псевдо-клас.

N-то дете (2n)

Общо взето стойността на този псевдо-клас n-то детесе дава с помощта на израза: an+b, където a и b са цели числа, а n е брояч, който приема цели числа от 0 и повече: 0,1,2,3... В нашия случай при промяна на брояча n ще получим числата 0 , 2, 4, 6 и т.н. Това означава, че свойството, посочено за този псевдоклас (в нашия случай, това е правилото за настройка на фона на ред от списък с помощта на ) е в списъка на #E4F2FA.

Този шестнадесетичен е най-често срещаният. За да намеря подходящи цветове, използвах програмата Contrast Analyzer 2.0, описана в предоставената връзка. Позволява ви да уловите цвят от екрана и да съпоставите по-светлите му тонове, точно това направих аз.

За фон на лентата с менюта, когато задържам курсора върху нея с курсора на мишката (псевдокласово задържане), избрах още по-светъл нюанс от същия ред.

Други примери за използване на n-то дете

Ако искате да промените фона или по друг начин да повлияете на външния вид (например да добавите подложка, да увеличите шрифта или да направите нещо друго по-неприлично), тогава използвайте израз. Можете да проверите, че като заместите цели числа, започващи от нула с n, ще получите само нечетни числа като резултат. Можете да използвате и двете опции едновременно (за четни и нечетни редове от списъци, таблици или нещо друго).

| Повече ▼ някои примери за използване на n-то детеза маркиране на различни редове от списъци, таблици и подобни елементи:

  1. За да имитирате нечетни елементи, можете да използвате n-то дете (нечетен) вместо израза, показан по-горе, и n-то дете (четен) за четни елементи.
  2. Ами ако искате да промените само четвъртия ред? след това добавете към CSS правилото псевдокласа nth-child (4), разделен с двоеточие.
  3. Искате ли да промените външния вид на редовете, започвайки от деветия? Няма проблем - n-то дете (n+9).
  4. Ако искате, напротив, да изберете само първите девет елемента, тогава използвайте конструкцията nth-child (-n+9).
  5. Ако искате да изберете елементи от девети до осемнадесети, добавете съставен псевдоклас:n-то дете (n+9):n-то дете (-n+18). Чиста логика.
  6. Искате ли да направите същото като в предишния параграф, но да маркирате само четните редове в този диапазон? Няма проблем - :nth-child (n+9):nth-child (-n+18):nth-child (четно).

Е, това е мястото. Нещото може да се окаже доста полезно. Във всеки случай ми беше полезно.

Късмет! Ще се видим скоро на страниците на сайта на блога

Може да се интересувате

Селектори на псевдо-класове и псевдо-елементи в CSS (hover, first-child, first-line и други), връзки между Html код тагове
Display (block, none, inline) в CSS - задайте типа на показване на Html елементите на уеб страницата
CSS свойства text-decoration, vertical-align, text-align, text-indent за декориране на текст в Html
Стил на списък (тип, изображение, позиция) - Css правила за персонализиране на външния вид на списъци в Html код
Как да намерите и премахнете неизползваните стилови линии (допълнителни селектори) в CSS файла на вашия сайт
Позиция (абсолютна, относителна и фиксирана) - начини за позициониране на Html елементи в CSS (правила отляво, отдясно, отгоре и отдолу) Различен стил за вътрешни и външни връзки чрез CSS
Приоритети в Css и тяхното увеличаване поради Важно, комбинация и групиране на селектори, потребителски и авторски стилове
Правила за шрифт (тегло, семейство, размер, стил) и височина на реда за стилизиране на шрифтове в CSS
Плаване и изчистване в CSS - инструменти за блоково оформление
За какво е CSS, как да свържете каскадни стилови таблици към Html документ и основния синтаксис на този език
Таг, клас, Id и универсални селектори, както и селектори на атрибути в съвременния CSS

- 4.7 от 5 на базата на 6 гласа

Когато създавате уеб страници, често е необходимо да представите част от съдържанието на страницата под формата на таблици.

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

За тази цел е най-добре да използвате CSS инструменти. Но в някои случаи таблиците са незаменими и удобни за предоставяне на информация.

Тагът отговаря за създаването на таблици в HTML

и затварящ етикет
. Но вероятно вече знаете, че таблиците се състоят от редове и клетки. Следователно, за да създадем таблица, имаме нужда от още два тагова: това е тагът
1 - клетка 2 - клетка
3 - клетка 4 - клетка

За да видите какво се получава от това, създайте HTML страница, като използвате кода по-долу. Ако не знаете как да създадете HTML страница, гледайте урока.

Таблица

1 - клетка 2 - клетка
3 - клетка 4 - клетка

Трябва да получите следното:

Както можете да видите, нашата маса все още изобщо не прилича на маса. Всичко това е така, защото нашите тагове

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

И така маркирайте

има следните атрибути:

border - задава ширината на границата на таблицата в пиксели, написана така:

.

bordercolor – цвят на границата на таблицата; този атрибут не се поддържа от всички браузъри, така че може да не видите определения цвят на границата:

Задаваме ширината на рамката на 2 пиксела, синьо, таблицата ще изглежда така:

ширина – задава ширината на таблицата в пиксели или проценти:

височина – височина на таблицата в пиксели или проценти:

Ширината на таблицата ще бъде 250 пиксела и височината 150 пиксела, таблицата ще изглежда така:

align – подравняване на таблица;

align=left – таблицата ще бъде подравнена вляво;

align=right – таблицата ще бъде подравнена надясно:

Нашата таблица трябва да е подравнена вдясно.

bgcolor – цвят на фона на таблицата, bgcolor=#FFC000 – цветът на фона на таблицата ще бъде жълт:

Таблицата ще изглежда така:

фон – чрез този атрибут можете да посочите изображение, което да служи като фон на таблицата.

Като пример, запазете малкото изображение, което виждате в скоби () в папката, където имате страницата с таблицата, и към етикета

добавете background="fon.gif" целия код:

Таблицата ще изглежда така:

cellpadding – атрибут, който определя лявата, дясна, горната и долната подложка в клетката. Например, ако към нашия таг

add cellpadding=10, тогава текстът, написан вътре в клетките, ще бъде с отстъп.

cellpacing – задава разстоянието между клетките на таблицата.

Ако погледнете по-отблизо нашата таблица, ще видите, че между рамките на клетките има малко пространство; това е отстъпът между клетките, той е зададен по подразбиране. За да го премахнете, е достатъчно в етикета

задайте интервал между клетките=0. Всички кодове:

В резултат нашите клетки бяха притиснати една към друга и текстът вътре в клетките беше вдлъбнат:

hspace - задава разстоянието от таблицата отляво и отдясно в пиксели, изписано така: hspace=20

nowrap – забранява обвиването на думи в клетката, написано просто nowrap

Последните два атрибута се използват изключително рядко, затова не показвам примерен код с тях.

Сега нека да разгледаме атрибутите на етикета

, някои от тях са същите като атрибутите на таговете

width - ширина на клетката в пиксели или проценти.

височина – височина на клетката в пиксели или проценти.

Например, нека зададем ширината на първата клетка от първия ред на 30% - width=30% и височината на първата клетка от втория ред на 100px. Кодът ще бъде така:

1 - клетка 2 - клетка
3 - клетка 4 - клетка

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

align – подравнява съдържанието на клетките, има следните стойности:

align="lef" – съдържанието на клетката ще бъде подравнено вляво;

align="right" – съдържанието ще бъде подравнено надясно;

align="center" – съдържанието ще бъде подравнено към центъра на клетката.

Нека добавим тези атрибути и стойности към нашия код и подравняваме съдържанието на първата клетка вляво (съдържанието е подравнено вляво по подразбиране, но в някои случаи този атрибут е необходим), съдържанието на втората клетка е подравнено вдясно и 4-то в центъра.

1 - клетка 2 - клетка
3 - клетка 4 - клетка

bgcolor – чрез този атрибут можете да зададете цвета на клетката.

фон – задава изображението като фон на клетката.

Вече се сблъскахме с тези атрибути, когато разглеждахме атрибутите на таговете

. Те работят по същия начин, само че в този случай задават фона на клетката. Например, нека зададем цвета на фона на 2-ра клетка на жълто и да зададем следното изображение () като фон на 4-та клетка.

За да направим това, ще добавим необходимите атрибути към нашия код, за нашите клетки bgcolor="#FFFF00" за 2-ра клетка и background="fon.jpg" за 4-та клетка. В резултат нашата таблица ще изглежда така:

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

bordercolor – задава цвета на рамката на клетката.

Също така срещнахме този атрибут, когато разглеждахме атрибутите на таговете

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

използване на етикет

Можете да зададете фон за произволен брой колони;

с помощта на селекторната таблица td:first-child , table td:last-child можете да задавате стилове за първата или последната колона на таблицата (с изключение на първата клетка от заглавката на таблицата);

Използвайки селектора на таблица td:nth-child (правило за избор на колони), можете да зададете стилове за всякакви колони на таблица.

Можете да прочетете повече за CSS селекторите.

5. Как да добавите заглавие на таблица

Можете да добавите заглавие към таблица с помощта на таг

Няма атрибут border, указващ границата на клетката. Нека зададем цвета на рамката на втората клетка на червено; за да направите това, добавете атрибута bordercolor="#FF0000" към втората клетка

Има още един атрибут, предназначен да подравнява съдържанието на клетките:

valign – подравнява съдържанието на клетките вертикално.

Има следните значения:

valign="top" – подравняване на съдържанието на клетката към горния ръб;

valign="bottom" – подравнява съдържанието на клетката към долния ръб;

valign="middle" – подравняване в средата на клетката;

valign="baseline" – подравнява съдържанието на клетката по основната линия.

Нека добавим тези атрибути към всяка от нашите 4 клетки.

1 - клетка 2 - клетка
3 - клетка 4 - клетка

Нашата таблица ще изглежда така:

Последното нещо, което трябва да разгледаме в този урок, е сливането на клетки на таблица. За да обедините няколко клетки подред, има атрибут colspan="", където броят клетки, които трябва да бъдат обединени, е посочен в кавички.

От автора: CSS има селектори за намиране на елементи въз основа на тяхната позиция в дървото на документа. Те се наричат ​​индексни псевдо-класове, защото разглеждат позицията на елемента, а не неговия тип, атрибути или ID. Те са общо пет.

:първо дете и :последно дете

Както може би се досещате от името, псевдо-класовете :first-child и :last-child избират първото и последното дете във възел (елемент). Както при други псевдо-класове, :first-child и :last-child имат минимални странични ефекти при използване на прости селектори.

Нека разгледаме HTML и CSS по-долу:

:първо дете и:последно дете

Списък с плодове

  • Ябълки
  • Банани
  • Боровинки
  • портокали
  • ягоди

< ! DOCTYPE html >

< html lang = "en-US" >

< head >

< meta charset = "utf-8" >

< title >: първо - дете и : последно - дете< / title >

< / head >

< body >

< h2 >Списък с плодове< / h2 >

< ul >

< li >Ябълки< / li >

< li >Банани< / li >

< li >Боровинки< / li >

< li >портокали< / li >

< li >ягоди< / li >

< / ul >

< / body >

< / html >

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

Заглавието h2 и първият li са оцветени в розово, защото:first-child не е обвързано с конкретни елементи. Тагът h2 е първото дете на тага body, а li е първото дете на елемента ul. Но защо останалите елементи li са зелени? Тъй като:last-child също не е свързан с конкретен елемент, а ul е последният дъщерен елемент в етикета body. Всъщност в стиловете по-горе ние написахме *:first-child и *:last-child.

Добавянето на прост селектор към :first-child и :last-child ги прави по-специфични. Нека ограничим нашия избор само до елементи от списъка. Заменете :first-child с li:first-child и :last-child с li:last-child. Екранната снимка по-долу показва резултата.

:nth-child() и :nth-last-child()

Не е лоша идея да можете да изберете първия и последния дъщерен елемент в документа. Ами ако трябва да изберете четни или нечетни елементи? Може би трябва да изберем шестия елемент в дървото или да приложим стилове към всеки трети дъщерен елемент. Псевдо-класовете:nth-child() и:nth-last-child() ще ни помогнат тук.

Подобно на :not, :nth-child() и :nth-last-child() също са функционални псевдо-класове. Те приемат един аргумент, който трябва да бъде:

ключова дума odd;

ключова дума даже;

цяло число от тип 2 или 8;

аргумент във формата An+B, където A е стъпката, B е отместването и n е променлива с положително цяло число.

Последният аргумент е малко по-сложен от останалите. Ще го разгледаме малко по-късно.

Каква е разликата между :nth-child() и :nth-last-child()? Те се различават по началната точка: :nth-child() брои напред, а :nth-last-child() брои назад. CSS индексите използват естествени числа и започват от 1, а не от 0.

С помощта на псевдо-класовете:nth-child() и:nth-last-child() е удобно да се създават редуващи се модели. Раираната маса е перфектен случай за използване. CSS по-долу дава на четните редове в таблицата светъл синкаво-сив фон, резултатът може да се види на екранната снимка по-долу:

tr:nth-child(even) (фон: rgba(96, 125, 139, 0.1); )

tr : nth - дете (четно) (

фон: rgba(96, 125, 139, 0.1);

Ако превключите от:nth-child на:nth-last-child, лентите се обръщат, защото броенето започва отдолу. Вижте екранната снимка по-долу.

Искате ли нещо по-сложно, с по-сложни аргументи? Нека създадем документ с 20 елемента, както е показано по-долу.

С помощта на :nth-child() и :nth-last-child() можете да изберете един конкретен елемент. Можете да изберете всички дъщерни елементи след дадена позиция или можете да изберете елементи с кратно отместване. Нека променим фона на шестия елемент:

Елемент:nth-child(6) ( фон: #e91e63; )

Още веднъж, А е стъпка. Това е фактор за n, започващ от 1. Тоест, ако A = 3, тогава 3n ще избере третия, шестия и деветия елемент и т.н. Точно това се вижда на екранната снимка по-долу.

Тук всичко е малко по-интересно. С помощта на :nth-child() и :nth-last-child() можете да изберете всички елементи след дадена точка. Нека изберем всички елементи с изключение на първите седем:

Елемент:nth-child(n+8) ( фон: #e91e63; )

Елемент: n-то - дете (n + 8) (

фон: #e91e63;

Тук няма посочена стъпка. В резултат на това n+8 избира всички елементи от n, започвайки с осмия. Вижте екранната снимка по-долу.

Забележка: отрицателен офсет

Отрицателните стойности и диапазони също са валидни. Запис като:nth-child(-n+8) обръща селекцията и избира първите осем елемента.

Използвайки отместване и стъпка, можете да изберете всеки трети елемент, като започнете с петия:

Елемент:nth-child(3n+5) ( фон: #e91e63; )

Елемент: nth - дете (3n + 5) (

фон: #e91e63;

Резултат.

единствено дете

Псевдокласът единствено дете избира елемент само ако е единственият дъщерен елемент. По-долу има два списъка с водещи символи. Първият има един елемент, вторият има три:

  • Ябълка
  • портокал
  • банан
  • Малина

< ul >

< li >Ябълка< / li >

< / ul >

< ul >

< li >портокал< / li >

< li >банан< / li >

< li >Малина< / li >

< / ul >

Селекторът li:only-child(color: #9c27b0;) ще избере

  • Ябълка
    • , тъй като е единственото дете на първия списък. Елементите от втория списък не са включени в селекцията, тъй като има три съседни елемента. Резултатът е показан по-долу.

    : празно

    Можете да използвате псевдокласа :empty, за да изберете елементи, които нямат деца. Псевдокласът:empty говори сам за себе си (empty от английското „празен“). За да бъде включен в селекцията:empty, елементът трябва да е напълно празен, без дори интервали. Тоест попада в пробата, но не.

    Понякога WYSIWYG редакторите вмъкват празни p тагове във вашето съдържание. Можете да използвате :empty и :not, за да предотвратите прилагането на стилове към тези елементи. Например p:not(:empty).

    Избор на елементи от определен тип по техния индекс

    Псевдокласовете, описани в предишния раздел, избират елементи, ако заемат определена позиция в дървото на документа. Например p:nth-last-child(2) ще избере всички p тагове преди последния в родителския блок.

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

    Има пет такива псевдокласове, чиито имена са точно противоположни на техните нетипизирани двойници:

    nth-last-of-type()

    Има тънка линия между тях и дъщерните индексни псевдокласове. Записът p:nth-child(5) намира само петия таг p, докато записът p:nth-of-type(5) намира всички тагове p и избира петия.

    Нека създадем друг документ. Той също има 20 елемента, само някои са p тагове, а други са div. p тагове със заоблени ъгли, вижте екранната снимка по-долу.

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

    Ширината на клетките на таблицата се определя от ширината на тяхното съдържание, така че ширината на колоните на таблицата може да варира. Височината на всички клетки в редицата е еднаква и се определя от височината на най-високата клетка.

    Форматиране на таблици

    1. Граници на масата

    По подразбиране таблицата и клетките в нея се показват в браузъра без видими граници. Граници на таблицатаса посочени от свойството border:

    Таблица ( border-collapse: collapse; /*премахнете празните пространства между клетките*/ border: 1px плътно сиво; /*задайте външната граница на таблицата на сив цвят с дебелина 1px*/ )

    Граници на заглавни клеткивсяка колона е посочена за елемента th:

    Th (контура: 1px плътно сиво;)

    Граници на клеткитетелата на таблиците са посочени за елемента td:

    Td (контура: 1px плътно сиво;)

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

    Th, td (граница: 1px плътно сиво;)

    Можете да подчертаете външната граница на таблица, като й придадете увеличена ширина:

    Таблица (контур: 3px плътно сиво;)

    Границите могат да бъдат определени частично:

    /* задайте сива външна граница с дебелина 3px за таблицата */ table (border-bottom: 3px плътно сиво; ) /* задайте сива граница с дебелина 1px за клетката на тялото на таблицата */ td (border-bottom: 1px плътно сиво ;)

    Можете да прочетете повече за граничния имот.

    2. Как да настроите ширината и височината на масата

    По подразбиране ширина и височина на масатаопределя се от съдържанието на клетките му. Ако ширината не е посочена, тогава тя ще бъде равна на ширината на най-широкия ред (ред).

    Ширина на таблицата и колонатасе задава с помощта на свойството width. Ако таблица (width: 100%;) е посочена за таблица, тогава ширината на таблицата ще бъде равна на ширината на контейнерния блок, в който се намира.

    Ширината на таблицата и колоните обикновено се определя в px или %, например:

    Таблица (ширина: 600px;) th (ширина: 20%;) td:първо дете (ширина: 30%;)

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

    		И . Фиксирането на височината с помощта на свойството height не се препоръчва.

    Th, td (подложка: 10px 15px;)

    3. Как да настроите фона на масата

    По подразбиране фон на масатаи клетките са прозрачни. Ако страницата или блокът, съдържащ таблицата, има фон, той ще се покаже през таблицата. Ако фонът е зададен както за таблицата, така и за клетките, тогава на места, където фонът на таблицата и клетките се припокриват, ще се вижда само фонът на клетките. Фонът на таблицата като цяло и нейните клетки може да бъде:
    пълнеж,
    ,
    .

    4. Колони на таблицата

    CSS моделът на таблицата е фокусиран главно върху редове (редове), формирани с помощта на тага

    и с помощта на свойството caption-side може да бъде поставен пред или под таблицата. За да подравните хоризонтално текста на заглавието, използвайте свойството text-align. Наследени.

    ...
    Таблица №1
    Компания Q1 Q2 Q3 Q4
    надпис (от страната на надписа: отдолу; подравняване на текста: отдясно; подложка: 10px 0; размер на шрифта: 14px; ) Ориз. 2. Пример за показване на заглавка под таблица

    6. Как да премахнете пространството между клетъчните рамки

    По подразбиране рамките на клетките на таблицата са разделени с малък интервал. Ако зададете border-collapse: collapse за таблицата, празнината ще бъде премахната. Имотът е наследен.

    Синтаксис

    Таблица (border-collapse: collapse;)
    Ориз. 3. Пример за таблици със сливащи и отделни клетъчни рамки

    7. Как да увеличим разстоянието между клетъчните рамки

    Използвайки свойството border-spacing, можете да промените разстоянието между клетъчните рамки. Това свойство се отнася за таблицата като цяло. Наследени.

    Синтаксис

    Таблица (border-collapse: отделно; border-spacing: 10px 20px;) таблица (border-collapse: отделно; border-spacing: 10px;) Ориз. 4. Пример за таблици с увеличени интервали между клетъчните рамки

    8. Как да скриете празните клетки на таблицата

    Свойството празни клетки скрива или показва празни клетки. Засяга само клетки, които не съдържат съдържание. Ако клетка е настроена на фон и таблица е настроена на таблица (border-collapse: collapse;) , тогава клетката няма да бъде скрита. Наследени.

    Компания Q1 Q2 Q3
    Microsoft 20.3 30.5
    Google 50.2 40.63 45.23
    таблица ( граница: 1px плътна #69c; border-collapse: отделно; празни клетки: скрий; ) th, td (граница: 2px плътна #69c;) Ориз. 5. Пример за скриване на празна клетка от таблица

    9. Оформете таблица, като използвате свойството table-layout

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

    Синтаксис

    Таблица (оформление на таблица: фиксирано;)

    10. Най-добри оформления на маса

    1. Хоризонтален минимализъм

    Хоризонталните таблици са таблици, в които текстът се чете хоризонтално. Всеки обект е отделен ред. Можете да придадете на таблици като тази минималистичен вид, като поставите граница от два пиксела под заглавката th.

    служителЗаплатаБонусРъководител
    Стивън К. Кокс$300$50Боб
    Жозефин Тан$150-Ани
    Джойс Минг$200$35Анди
    Джеймс А. Пентел$175$25Ани
    таблица ( семейство шрифтове: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; размер на шрифта: 14px; фон: бял; максимална ширина: 70%; ширина: 70%; border-collapse: collapse; текст -подравняване: ляво; ) th ( тегло на шрифта: нормално; цвят: #039; граница-отдолу: 2px плътно #6678b1; подложка: 10px 8px; ) td ( цвят: #669; подложка: 9px 8px; преход: .3s линеен;) tr:hover td (цвят: #6699ff;)

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

    Td ( border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; conversion: .3s linear; )/*останалата част от кода е като в примера по-горе*/

    Добавянето на ефект :hover към елемента tr ще направи таблиците, проектирани в минималистичен стил, по-лесни за четене. Когато задържите курсора на мишката върху клетка, останалите клетки в същия ред се маркират едновременно, което улеснява проследяването на информация, ако таблиците имат няколко колони.

    Th ( тегло на шрифта: нормално; цвят: #039; подложка: 10px 15px; ) td ( цвят: #669; border-top: 1px solid #e8edff; подложка: 10px 15px; ) tr:hover td (фон: #e8edff ;)

    2. Вертикален минимализъм

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

    Th (тегло на шрифта: нормално; граница-отдолу: 2px плътно #6678b1; граница-дясно: 30px плътно #fff; border-left: 30px плътно #fff; цвят: #039; подложка: 8px 2px; ) td ( граница- дясно: 30px плътно #fff; граница-ляво: 30px плътно #fff; цвят: #669; подложка: 12px 2px; )

    3. Стил в кутия

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

    Th (размер на шрифта: 13px; тегло на шрифта: нормален; фон: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; цвят: #039; padding: 8px; ) td (фон : #e8edff; border-bottom: 1px плътен #fff; цвят: #669; border-top: 1px плътен прозрачен; padding: 8px; ) tr:hover td (фон: #ccddff;)

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

    Таблица ( семейство шрифтове: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; размер на шрифта: 14px; максимална ширина: 70%; ширина: 70%; подравняване на текст: център; свиване на границата: свиване ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th (font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border- отляво: 1px плътен #9baff1; цвят: #039; подложка: 8px; ) td (фон: #e8edff; border-right: 1px плътен #aabcfe; border-left: 1px плътен #aabcfe; цвят: #669; подложка: 8px ;)

    4. Хоризонтална зебра

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

    Th ( тегло на шрифта: нормално; цвят: #039; подложка: 10px 15px; ) td ( цвят: #669; border-top: 1px плътен #e8edff; подложка: 10px 15px; ) tr:nth-child(2n) ( фон: #e8edff;)

    5. Вестникарски стил

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

    Таблица (контур: 1px плътен #69c;) th ( тегло на шрифта: нормален; цвят: #039; border-bottom: 1px пунктиран #69c; подложка: 12px 17px; ) td ( цвят: #669; подложка: 7px 17px; ) tr: hover td (фон: #ccddff;)

    Таблица (контур: 1px плътен #69c;) th (тегло на шрифта: нормален; цвят: #039; подложка: 10px; ) td (цвят: #669; граница отгоре: 1px прекъснато #fff; подложка: 10px; фон: #ccddff; ) tr:hover td (фон: #99bcff;)

    Таблица (контур: 1px плътен #6cf;) th ( тегло на шрифта: нормален; размер на шрифта: 13px; цвят: #039; преобразуване на текст: главни букви; border-right: 1px плътен #0865c2; border-top: 1px плътен #0865c2; граница отляво: 1px плътна #0865c2; граница отдолу: 1px плътна #fff; подложка: 20px; ) td ( цвят: #669; граница отдясно: 1px прекъсната #6cf; подложка: 10px 20px; )

    6. Фон на масата

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

    Png") 98% 86% без повторение; ) th ( тегло на шрифта: нормално; размер на шрифта: 14px; цвят: #339; подложка: 10px 12px; фон: бял; ) td ( цвят: #669; граница- отгоре: 1px плътно бяло; подложка: 10px 12px; фон: rgba(51, 51, 153, .2); преход: .3s; ) tr:hover td (фон: rgba(51, 51, 153, .1); )

    Публикации по темата