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

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

За да направите отстъпи в клетка, използвайте атрибута клетъчна подложказа етикет

... Има обаче друг, по -предпочитан вариант: CSS.

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

Можете да зададете колко пиксела трябва да бъдат с отстъп. Ето пример къде ще бъде долният марж 20 пиксели, а всички останали ще бъдат 10 ... Такива CSS-кодът ще изглежда така:

Td (подложка: 10px; подложка отдолу: 20px;)

И пълният код на стилове на този етап:

Таблица (граница: плътно 1px синьо; граница-сгъване: срутване)

Резултат в браузъра:

Вдлъбнатина между клетките

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

Отстъпите в таблиците не са само вътре в клетките. Те могат да присъстват и между самите клетки.

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

  1. използвайки атрибута разпределение на клеткитеза етикет
.
  • използвайки CSS-Имоти разстояние между границите.

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

    Нека да разгледаме един пример:

    Таблица (граница: плътно 1px синьо; граница-сгъване: отделно; гранично разстояние: 5px;) td (граница: плътно 1px синьо; подложка: 10px; подложка-дъно: 20px;)

    И полученият резултат:

    Нека веднага уговорим, че не трябва да се опитвате да правите такива отстъпи с помощта границата-колапс: колапс... Наистина, когато използвате тази опция, клетките се „залепват“ една за друга.

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

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

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

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

    1. Граница на границата на таблицата

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    с помощта на етикета

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

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

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

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

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

    Можете да добавите заглавие към таблица, като използвате маркера

    и ... Не се препоръчва да фиксирате височината с помощта на свойството height.

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

    3. Как да зададете фона на таблицата

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

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

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

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

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

    6. Как да премахнем празнината между рамките на клетките

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

    Синтаксис

    Таблица (сгъване на границата: срив;)
    Ориз. 3. Пример за таблици със слети и разделени граници на клетки

    7. Как да увеличите пространството между границите на клетките

    С помощта на свойството за разстояние между границите можете да промените разстоянието между границите на клетките. Това свойство се отнася за таблицата като цяло. Наследени.

    Синтаксис

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

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

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

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

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

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

    Синтаксис

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

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

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

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

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

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

    Td (гранично дъно: 1px плътен #ccc; цвят: # 669; подложка: 9px 8px; преход: .3s линеен;) / * останалата част от кода е както в горния пример * /

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

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

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

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

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

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

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

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

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

    Таблица (семейство шрифтове: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; размер на шрифта: 14px; макс. ; 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; граница вдясно: 1px плътно #aabcfe; граница вляво: 1px плътно #aabcfe; цвят: # 669; подплънки: 8px ;)

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

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

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

    5. Стил на вестника

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

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

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

    Таблица (граница: 1px solid # 6cf;) th (font-weight: normal; font-size: 13px; color: # 039; text-transform: uppercase; border-right: 1px solid # 0865c2; border-top: 1px solid # 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); )

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

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

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

    Така че нека направим граници за масата. Например за този, който вече имаме:

    Горе лявата клеткаГорна дясна клетка
    Долна лява клеткаДолна дясна клетка

    Резултат в браузъра:

    Как да премахнете границите на таблицата

    На свой ред, за да премахнете границите на HTML таблицата или можете също да кажете да ги направите невидими, имате нужда от атрибута границазададена стойност 0 ... След тези прости действия рамката ще бъде премахната.

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

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

    Нека да разгледаме как да приложим CSS за създаване на външни и вътрешни граници на таблица.
    За да направите това, премахнете атрибута border от нашата таблица и добавете стилове:

    Примерна таблица

    Горе лявата клетка Горна дясна клетка
    Долна лява клетка Долна дясна клетка

    Резултат в браузъра:

    Сега нека добавим и граници за всяка клетка. За да направите това, просто добавете стиловете:

    Резултат в браузъра:

    Как да премахнете уплътненията между клетките в HTML таблицата

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

    Въпреки това е напълно възможно да се отървем от такива граници, които се наричат ​​двойни, ако използваме свойството CSS за сгъване на границата. На практика изглежда така:

    Таблица (граница: плътно 1px синьо; граница-сгъване: срив;) ...

    В резултат на това разстоянието между клетките се премахва:

    Стойността на свиването, присвоена на атрибута border, премахва двойните рамки. Както можете да видите, резултатът е срутване на съседни граници на клетки, както и граници на клетки и външна граница на таблицата. Що се отнася до последното, то може да бъде премахнато напълно. И ако има нужда да го покажете, трябва да увеличите ширината му. Така се отървахме от разделителите в таблицата. И в следващия урок ще говорим за това как можете да зададете вертикални и хоризонтални граници. Успех на всички!

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

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

    Вътре в етикета

    клетките на таблицата са разположени, представени с тагове можете да приложите само едно CSS свойство, background-color, но не можете директно да зададете цвета на фона при hover (псевдокласа: hover) към този елемент. В този пример ще разгледаме как да маркираме колона в таблица, използвайки само CSS.

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

    Рамка за маса

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

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

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

    Таблица, th, td (рамка: 1px плътно черно;) Опитайте "

    Сега и таблицата, и клетките имат граници, докато всяка клетка и таблица имат свои собствени граници. В резултат на това между кадрите се появи празно пространство; свойството border-spacing ви позволява да контролирате размера на това пространство, което е зададено за цялата таблица. С други думи, не можете да контролирате разликите между отделните клетки поотделно.

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

    • отделно: е по подразбиране. Клетките се показват на кратко разстояние една от друга, всяка клетка има своя собствена граница.
    • сгъване: свързва съседни рамки в едно, всички пропуски между клетките, както и между клетките и рамката на таблицата се игнорират.
    Име на документа
    ИмеФамилия
    ОмирСемейство Симпсън
    МарджСемейство Симпсън

    ИмеФамилия
    ОмирСемейство Симпсън
    МарджСемейство Симпсън
    Опитвам "

    Размер на масата

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

    Th, td (padding: 7px;) Опитайте "

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

    Таблица (ширина: 70%;) th (височина: 50px;) Опитайте "

    Подравняване на текста

    По подразбиране текстът в клетките в заглавката на таблицата е подравнен в центъра, а текстът в нормалните клетки е подравнен вляво, като използвате свойството text-align можете да контролирате хоризонталното подравняване на текста.

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

    • отгоре: текстът е подравнен в горната част на клетката
    • по средата: подравнява текста към центъра (по подразбиране)
    • отдолу: текстът е подравнен в долната част на клетката
    Име на документа
    ИмеФамилия
    ОмирСемейство Симпсън
    МарджСемейство Симпсън
    Опитвам "

    Редуване на цвета на фона на редовете на таблицата

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

    Име на документа

    ИмеФамилияПозиция
    ОмирСемейство Симпсънбаща
    МарджСемейство Симпсънмайка
    БартСемейство Симпсънсин
    ЛизаСемейство Симпсъндъщеря
    Опитвам "

    Добавянето на атрибут на клас към всеки втори ред е досадна задача. Псевдокласът: nth-child е добавен към CSS3 за решаване на този проблем по алтернативен начин. Сега ефектът от преплитане може да бъде постигнат изключително чрез CSS, без да се прибягва до промяна на HTML маркировката на документа. С псевдокласа: nth-child можете да изберете всички нечетни или четни редове в таблица, като използвате една от ключовите думи четни (четни) или нечетни (нечетни):

    Tr: nth-child (нечетно) (цвят на фона: # EAF2D3;) Опитайте "

    Промяна на фона на линията при задържане на курсора на мишката

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

    Прилагането на този ефект е много просто, за това трябва да добавите псевдокласа: hover към селектора на реда на таблицата и да зададете желания цвят на фона:

    Tr: hover (background-color: # E0E0FF;) Опитайте "

    Централно подравняване на масата

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

    Таблица (поле: 10px автоматично;) Опитайте "

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

    Таблица (поле: 10px автоматично 30px;)

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

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

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

    ("Долен колонтитул" на таблицата) цвят на фона - корал, за елемент ("Заглавка" на таблицата) задайте цвета на фона сребро.
  • За артикули
    • които са вътре в елемента (тяло на таблицата) задайте промяна на цвета на фона при задържане (псевдоклас: ховър) c бялна цвят каки(целият ред е маркиран).

    Резултатът от нашия пример:

    Ориз. 153 Пример за оформяне на редове в таблици

    Следващият пример показва как да приложите закръгляването на ъглите към клетките на таблицата (свойство).

    Пример за закръгляване на ъглите на клетка
    ЕтикетОписание
    .
    Определя съдържанието на таблицата.
    Указва името на таблицата.
    Дефинира заглавната клетка на таблицата.
    Определя ред в таблица.
    Определя клетката с данни на таблицата.
    Използва се за съдържане на заглавието на групата в таблицата (заглавие на таблица).
    Използва се за съдържане на „тялото“ на таблицата.
    Използва се за съдържане на „долния колонтитул“ на таблицата (долния колонтитул).
    Дефинира посочените свойства на колоната за всяка колона в таг
    Дефинира група колони в таблица.

    Работа с отстъпи на таблица

    Използване на подложка в таблица
    Отстъпи на таблицата
    1 2 3 4
    2
    3
    4

    В този пример ние:

    • Поставете масата в центъра, използвайки техниката на хоризонтално центриране с външни полета (поле: 0 автоматично).
    • За името на таблицата (таг
    ) задаваме долната подложка на 19 пиксела. Надявам се да не се объркате от неравномерните числа :)

    Резултатът от нашия пример:

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

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

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

    Променете разстоянието между таблиците
    разстояние между границите: 30px 10px;
    1 2 3
    2
    3
    разстояние между границите: 0;
    1 2 3
    2
    3
    разстояние между границите: 0.2em;
    1 2 3
    2
    3

    В този пример ние:

    • поплавък: вляво). Ако сте пропуснали темата за плаващите елементи, винаги можете да се върнете към нея в този урок - "".
    • Освен това задаваме подложката на масата вдясно на 30 пиксела и задаваме вертикалното подравняване на таблиците (горната част на елемента е подравнена с горната част на най -високия елемент). Ще се върнем към подробно обсъждане на този имот в тази статия.
    ) - удебелен.
  • За клетките на таблицата (заглавка и клетки с данни), ние задаваме 1 пикселна плътна граница с # F50 шестнадесетична и задаваме подложката на 19 пиксела за всички страни.
  • За първата маса с класа .първозадаваме разстоянието между клетките на таблицата (свойство на границата) 30px 10px, за втората таблица с класа .второравно на нула, за третата таблица с клас .третаравен на 0.2em.

    • Обръщам ви внимание на факта, че ако в свойството border-spacing е посочена само една стойност на дължината, тя показва разстоянието, както хоризонтално, така и вертикално, и ако са посочени две стойности на дължината, тогава първата определя хоризонталното разстояние , и втората вертикала. Разстоянието между границите на съседни клетки може да бъде посочено в CSS единици (px, cm, em и т.н.). Не се допускат отрицателни стойности.

    Резултатът от нашия пример:

    Показване на граници около клетките на таблицата

    Можеш да кажеш: - И така, премахнахме разстоянието между клетките, използвайки свойството border-spacing със стойност 0, но защо сега границите на клетките се пресичат?

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

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

    Помислете за сравнение на поведението на границата, когато използвате свойството за гранични интервали със стойност 0 и свойството за сгъване на границата със стойност на сгъване:

    Пример за показване на граници около клетките на таблицата
    разстояние между границите: 0;
    1 2 3
    2
    3
    срутване на границата: срутване;
    1 2 3
    2
    3

    В този пример ние:

    • Направихме таблиците ни плаващи и подравнени вляво (поплавък: вляво), зададохме дясната им подложка на 30px.
    • Задайте за името на таблицата (таг
    ) - удебелен.
  • За клетките на таблицата (заглавие и клетки с данни), ние задаваме 5px плътна граница с # F50 hex и задаваме фиксирана ширина 50px и височина 75px.
  • За първата маса с класа .първозадаваме разстоянието между клетките на таблицата на нула (разстояние между границите: 0;), а за втората таблица с класа .второзадайте свойството за сгъване на границата да се свие, което обединява границите на клетките в едно, когато е възможно.

    • Резултатът от нашия пример:

    Поведение на празни клетки

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

    Нека преминем към пример:

    Пример за показване на празни клетки от таблицата
    празни клетки: показване;
    1 2 3
    2 ☺
    3 ☺
    празни клетки: скрий;
    1 2 3
    2 ☺
    3 ☺

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

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

    Нека да разгледаме друго просто свойство за оформяне на таблици - caption -side, което задава позицията на надписа на таблицата (над или под таблицата). По подразбиране свойството на страната на надписа е зададено отгоре, което поставя надписа над таблицата. За да поставите заглавието под таблицата, трябва да използвате свойството с долната стойност.

    Нека да разгледаме пример за използване на това свойство:

    Пример за използване на свойството страна на надписа
    Заглавие над масата
    ИмеЦена
    Риба350 рубли
    Месо250 рубли

    Заглавие под таблицата
    ИмеЦена
    Риба350 рубли
    Месо250 рубли

    В този пример ние създадохме два класакоито контролират позицията на заглавката на таблицата. Първи клас ( .topCaption) поставя заглавието на таблицата над него, ние го приложихме към първата таблица и втория клас ( .bottomCaption) поставя заглавието на таблицата под него, ние го приложихме към втората таблица. Клас .topCaptionима свойство за надписи по подразбиране и е създадено за демонстрационни цели.

    Резултатът от нашия пример:

    Хоризонтално и вертикално подравняване

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

    За да зададете подравняване за съдържание в клетки, трябва да използвате специални ключови думи със свойството text-align. Нека разгледаме прилагането на ключовите думи на този имот в следния пример.

    Пример за хоризонтално подравняване в таблица
    ЗначениеОписание
    налявоПодравнява клетъчния текст вляво. Това е по подразбиране (ако посоката на текста е отляво надясно).
    надясноПодравнява клетъчния текст вдясно. Това е по подразбиране (ако посоката на текста е отдясно наляво).
    центърПодравнява клетъчния текст към центъра.
    оправдавамРазтяга линии, така че всеки ред да има еднаква ширина (разтяга текста на клетката, за да пасне на ширината).

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

    Резултатът от нашия пример:

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

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

    * -Стойностите sub, super, text-top, text-bottom, length и%, приложени към клетката на таблицата, ще се държат така, сякаш използват базовата стойност.

    Нека разгледаме пример за употреба:

    Пример за вертикално подравняване в таблица
    ЗначениеОписание
    базова линияПодравнява базовата линия на клетката с базовата линия на родителя. Това е по подразбиране.
    Горна частПодравнява съдържанието на клетката вертикално нагоре.
    среднаПодравнява съдържанието на клетката вертикално в средата.
    дъноПодравнява съдържанието на клетката вертикално към дъното.

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

    Алгоритъм за поставяне на оформлението на таблицата от браузъра

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

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

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

    Нека разгледаме приложението на това свойство със следния пример:

    Пример за използване на свойството table-layout
    оформление на таблица: автоматично;
    Име 2009 2010 2011 2012 2013 2014 2015 2016
    Пшеница 125 215 2540 33287 695878 1222222 125840000 125
    оформление на таблица: фиксирано;
    Име 2009 2010 2011 2012 2013 2014 2015 2016
    Пшеница 125 215 2540 33287 695878 1222222 125840000 125

    В този пример ние:

    Стилизиране на редове и колони в таблицата

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

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

    Пример за използване на: nth-child псевдоклас с таблици
    1 2 3 4 5 6 7 8 9 10 11 12 13 14
    2
    3
    4

    В този пример ние:

    Резултатът от нашия пример:

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

    Пример за оформяне на редове в таблици
    ОбслужванеЦена
    Сума 15 000
    1 1 000
    2 2 000
    3 3 000
    4 4 000
    5 5 000

    В този пример ние:

    • Задайте ширината на таблицата на 100% от ширината на родителския елемент, задайте заглавката и клетките с данни на 1px плътна граница.
    • Инсталиран за елемента
    1 2 3 4 5

    В този пример ние:

    • Центрирайте таблицата с подложки, задайте ширината и височината на заглавните клетки на 50px, посочени прозраченрамка 5 пиксела.
    • Установено е, че когато задържите (псевдоклас: hover) над клетката на заглавката, той получава фона синцветове, Оранжевоцвят на текста, рамка оранжевоцветове 5 пиксела и радиус 100%.
    • Прозрачна границае необходимо, за да се запази място за границата, което ще се покаже при задържане на курсора на мишката, ако това не бъде направено, таблицата ще "скочи".

    Резултатът от нашия пример:

    Следващият пример засяга използването на HTML елементи

    Номер на заявлениетоОбслужванецена, руб.Обща сума
    1Пеене 6 000 6 000
    2измиването 2 000 2 000
    3Почистване 1 000 1 000
    4Заяждане 1 500 1 500
    5Четене 3 000 3 000

    В този пример ние:

    Резултатът от нашия пример:

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

    В предишния пример разбрахме, че HTML елементът

    Номер на заявлениетоОбслужванецена, руб.Обща сума
    1Пеене 6 000 6 000
    2измиването 2 000 2 000
    3Почистване 1 000 1 000
    4Заяждане 1 500 1 500
    5Четене 3 000 3 000

    В този пример ние:

    • Зададохме нашата таблица да заема 100% от родителския елемент, клетките на таблицата заемат 25% от родителския елемент и имат 1 пиксел зелена плътна граница, заглавките и клетките с данни са с височина 45 пиксела. Премахнахме пролуката между клетките, като използваме свойството border-crash със стойността
    .
  • И така, използвайки псевдоелемента :: after, добавете съдържание след всеки елемент.
    		• при задържане на курсора на мишката. Псевдоелементът :: after се използва задължително заедно със свойството content, благодарение на което вмъкваме блоков елемент, който има цвят на фона горскозелени има абсолютно позициониране.
  • Абсолютното позициониране тук е необходимо за изместване на елемента спрямо посочения ръб на неговия предшественик, докато предшественикът трябва да има стойност на позиция, различна от статичната по подразбиране, в противен случай броят ще бъде спрямо посочения ръб на прозореца на браузъра, поради тази причина подредихме за масата относително позициониране(относително).
  • Зададохме за нашия генериран блок горното свойство, което показва посоката на изместване на позиционирания елемент от горния ръб, и долното свойство, което показва посоката на изместване на позиционирания елемент от долния ръб. И за двете свойства е посочена стойността 0, така че блокът ще заема изцяло елемента от дъното и отгоре на таблицата, ширината на този блок е зададена на 25%, тази стойност съответства на стойността на ширината на клетката себе си.
  • И последното свойство, което зададохме за този блок: z-index със стойност "-1", той определя реда на позиционираните елементи от Оста Z... Това свойство е необходимо, така че текстът да е пред този блок, а не зад него, ако не зададете стойност по -малка от нула, тогава блокът ще затвори текста.

    • Резултатът от нашия пример:

    Ако на този етап от изследването не разбирате процеса на позициониране на елементи, тогава не се обезсърчавайте, това е трудна за разбиране тема, която също не разгледахме, но определено ще я разгледаме в следващата статия на урок "Елементи за позициониране в CSS".

    Въпроси и задачи по темата

    Завършете практическата дейност, преди да преминете към следващата тема:


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


    2016-2020 Денис Болшаков, можете да изпращате коментари и предложения относно работата на сайта на [email protected]

    Сходни артикули

    Препоръчва се

    Авторско право 2021 - Ремонт на компютри и лаптопи. Видеокарти, твърди дискове, интернет, монитори.