Задаваме нашата таблица да заема 100% от родителския елемент, клетките на таблицата да заемат 25% от родителския елемент и да имат плътна рамка от 1 пиксел в зелено, височината на заглавката и клетките с данни е 45px. Премахнахме празнината между клетките с помощта на свойството граница-колапссъс смисъл .
И така, използвайки псевдо-елемент ::следдобавете съдържание след всеки елемент | при задържане. Псевдо елемент ::следтрябва да се използва заедно с имота съдържание, благодарение на което вмъкваме блоков елемент, който има фонов цвят горскозелени има абсолютно позициониране.
Абсолютното позициониране тук е необходимо за изместване на елемента спрямо дадения ръб на неговия предшественик, докато предшественикът трябва да има стойността позицияразлично от стандартното - статичен, в противен случай броят ще бъде спрямо посочения край на прозореца на браузъра, поради тази причина сме задали за таблицата относително позициониране(относително).
Задаваме свойството за нашия генериран блок Горна част, което указва посоката на отместване на позиционирания елемент от горния ръб, и свойството отдолу A, който указва посоката, в която позиционираният елемент е изместен от долния ръб. И двете свойства бяха зададени на 0, така че блокът ще заема изцяло елемента от долната и горната част на таблицата, ширината на този блок беше зададена на 25%, тази стойност съответства на стойността на ширината на самата клетка.
И крайното свойство, което задаваме за този блок: z-индекссъс стойност "-1" определя реда, в който са подредени позиционираните елементи Z ос. Това свойство е необходимо, така че текстът да е пред този блок, а не зад него, ако не зададете стойност по-малка от нула, тогава блокът ще затвори текста.
Резултатът от нашия пример:
Ако на този етап от проучването не разбирате процеса на позициониране на елементи, тогава не се обезсърчавайте, това е трудна за разбиране тема, която също не разгледахме, но определено ще я разгледаме в следващата статия на урок " Позициониране на елементи в CSS ".
Въпроси и задачи по темата
Преди да преминете към следващата тема, изпълнете практическата задача:
 Ако се затруднявате да направите практическа задача, Винаги можете да отворите примера в отделен прозорец и да прегледате страницата, за да видите какъв CSS е използван.
2016-2020 Денис Болшаков, можете да изпращате коментари и предложения в сайта на [email protected]
Самите таблици изглеждат доста "бедни", освен това браузърите показват някои характеристики на таблиците по свой начин, по-специално рамки. Въпреки това, тези недостатъци са лесни за коригиране с помощта на силата на стиловете. В същото време инструментите за проектиране на таблици са значително разширени, което ви позволява успешно да вписвате таблици в дизайна на сайта и да представяте таблични данни по-ясно.
Цвят на фона на клетката
Цветът на фона на всички клетки на таблицата едновременно се задава чрез свойството background, което се прилага към селектора TABLE. В същото време трябва да запомните правилата за използване на стилове, по-специално наследяването на свойствата на елемента. Въпреки че свойството на фона не е наследено, фоновата стойност по подразбиране за клетките е прозрачна, т.е. прозрачност, така че ефектът на запълване на фона се получава и за клетките. Ако посочите цвят за селектора TD или TH едновременно с TABLE, тогава този цвят ще бъде зададен като фон на клетката (пример 2.3).
Пример 2.3. Цвят на фона
маси
| Заглавие 1 | Заглавие 2 |
|---|
| Клетка 3 | Клетка 4 |
В този пример получаваме син фонов цвят за клетките (tag | ) и червено в заглавието (таг | ). Това е така, защото стилът за селектора TH не е дефиниран, така че фонът на родителя, в този случай селектора TABLE, се "показва". А цветът за TD селектора е посочен изрично, така че клетките са „запълнени“ със синьо.
Резултатът от този пример е показан на фиг. 2.4.
Ориз. 2.4. Промяна на цвета на фона
Полета вътре в клетките
Полето е разстоянието между ръба на съдържанието на клетката и нейната граница. Обикновено за тази цел се използва атрибутът cellpadding на тага. . Той определя стойността на полето в пиксели от всички страни на клетката. Можете да използвате свойството padding style, като го добавите към TD селектора, както е показано в Пример 2.4.
Пример 2.4. Полета в таблици
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
маси
| Заглавие 1 | Заглавие 2 |
|---|
| Клетка 3 | Клетка 4 |
В този пример, чрез групиране на селектори, полетата се задават едновременно за селектора TD и TH. Резултатът от примера е показан на фиг. 2.5.
Ориз. 2.5. Полета в клетките
Ако свойството стил на подплънка се прилага към клетките на таблицата, тогава ефектът на атрибута cellpadding на тага игнориран.
Разстояние между клетките
За да промените разстоянието между клетките, използвайте атрибута cellspacing на тага . Ефектът от този атрибут е ясно видим, когато използвате рамки около клетките или когато клетките се запълват с цвят, който се откроява на фона на страницата. Cellspacing се заменя със свойството за стил на border-spacing, което задава разстоянието между границите на клетките. Една стойност задава както вертикалното, така и хоризонталното разстояние между границите на клетката. Ако това свойство има две стойности, тогава първата определя хоризонталното разстояние (т.е. отляво и отдясно на клетката), а втората определя вертикалното (отгоре и отдолу).
Свойството border-spacing има ефект само ако селекторът TABLE няма border-collapse, зададен на collapse (Пример 2-5).
Пример 2.5. Разстояние между границите на клетката
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Подмяна на разстоянието между клетките
| Леонардо | 5 | 8 |
| Рафаел | 4 | 11 |
| Микеланджело | 24 | 9 |
| Донатело | 2 | 13 |
Резултатът от този пример е показан на фиг. 2.6.
Ориз. 2.6. Външен вид на таблицата при използване на граници
интернет браузър Explorer до и включително версия 7 не поддържа свойството border-spacing, така че този браузър ще използва стойността за cellpacing по подразбиране за таблици (обикновено 2px).
Когато добавите свойство за свиване на границата със стойност за свиване към селектора TABLE, атрибутът на cellpacing се игнорира и стойността на границата се задава на нула.
Граници и рамки
По подразбиране първоначално няма рамка в таблицата и тя се добавя с помощта на атрибута border на тага . Браузърите показват такава граница по различен начин, така че е по-добре изобщо да не посочвате този атрибут и да присвоите чертането на границата на стиловете. Нека разгледаме два метода, пряко свързани със стиловете.
Използване на атрибута cellpacing
Известно е, че атрибутът cellpacing на тага задава разстоянието между клетките на таблицата. Ако използвате различен фонов цвят за таблицата и клетките, тогава между клетките ще се появи решетка от линии, чийто цвят съответства на цвета на таблицата, а дебелината е равна на стойността на атрибута cellspacing в пиксели. Пример 2.3 по-горе показва този ефект, така че няма да го повтарям.
Имайте предвид, че това не е много удобен начин за създаване на граници, тъй като има ограничен обхват. По този начин можете да получите само едноцветна мрежа, а не вертикална или хоризонтални линиина правилните места.
Прилагане на граничното свойство
Свойството за стил на границата едновременно задава цвета на рамката, нейния стил и ширината около елемента. Когато искате да създадете отделни редове на различни страни, по-добре е да използвате производни - border-left , border-right , border-top и border-bottom , тези свойства съответно определят границата отляво, отдясно, отгоре и отдолу.
Чрез прилагане на свойството border към селектора TABLE добавяме граница около таблицата като цяло, а към селектора TD или TH добавяме граница около клетките (Пример 2-6).
Пример 2.6. Добавяне на двойна рамка
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
маси
| Заглавие 1 | Заглавие 2 |
|---|
| Клетка 3 | Клетка 4 |
Този пример използва черна двойна рамка около самата таблица и плътна бяла рамка около всяка клетка. Резултатът от примера е показан на фиг. 2.7.
Ориз. 2.7. Рамка около таблицата и клетките
Обърнете внимание, че там, където клетките се съединяват, се образуват двойни линии. Те се получават отново поради действието на атрибута cellspacing на тага . Въпреки че този атрибут не се появява никъде в примерния код, браузърът го използва по подразбиране. Ако зададете , тогава получаваме не двойни, а единични линии, но с удвоена дебелина. За да промените тази функция, приложете свойството за стил на свиване на границата със стойността свиване, която се добавя към селектора TABLE (Пример 2-7).
Пример 2.7. Създаване на единична рамка
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
маси
| Заглавие 1 | Заглавие 2 |
|---|
| Клетка 3 | Клетка 4 |
Този пример създава плътна зелена линия между клетките и черна линия около таблицата. Всички граници в една таблица имат еднаква дебелина. Резултатът от примера е показан на фиг. 2.8.
Ориз. 2.8. Граница около масата
Подравняване на съдържанието на клетките
По подразбиране текстът в клетка на таблица е подравнен вляво. Изключението от това правило е етикетът , то дефинира заглавие, което е центрирано. За да промените метода на подравняване, приложете стил свойство за подравняване на текст(пример 2.8).
Пример 2.8. Подравнете съдържанието на клетката хоризонтално
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
маси
| Заглавие 1 | Клетка 1 | Клетка 2 |
|---|
| Заглавие 2 | Клетка 3 | Клетка 4 |
|---|
В този пример съдържанието на тага | е подравнен вляво и съдържанието на етикета | - В центъра. Резултатът от примера е показан по-долу (Фигура 2.9).
Ориз. 2.9. Подравняване на текст в клетки
Вертикалното подравняване в клетка винаги е центрирано, освен ако не е указано друго. Това не винаги е удобно, особено за таблици, чието съдържание на клетки варира по височина. В този случай подравняването е зададено към горния край на клетката с помощта на свойството vertical-align, както е показано в Пример 2-9.
Пример 2.9. Подравнете съдържанието на клетката вертикално
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
маси
| Заглавие 1 | Заглавие 2 |
|---|
| Клетка 1 | Клетка 2 |
Този пример задава височината на заглавката | като 40 пиксела и подравняването на текста е отдолу. Резултатът от примера е показан на фиг. 2.10.
Ориз. 2.10. Подравняване на текст в клетки
Празни клетки
Браузърите по различен начин показват клетка, която няма нищо вътре. „Нищо“ в този случай означава, че в клетката не е добавена нито картина, нито текст и пространството не се взема предвид. Естествено, външният вид на клетките се различава само ако около тях е поставена рамка. Когато използвате невидима граница, външният вид на клетките, независимо дали имат нещо в тях или не, е един и същ.
По-старите браузъри не показваха цвета на фона на празните клетки за преглед | | , така че в случай, когато се изискваше клетката да се остави без съдържание, но да се покаже фоновият цвят, вътре в клетката беше добавен неразделен интервал (). Интервалът не винаги е подходящ, особено когато трябва да зададете височината на клетката на 1-2 пиксела, поради което прозрачният чертеж с един пиксел е широко разпространен. Наистина, такава картина може да бъде мащабирана по ваша преценка, но не се показва на уеб страницата.
За щастие, ерата на еднопикселните рисунки и всички видове разделители, базирани на тях, отмина. Браузърите работят доста коректно с таблици без присъствието на съдържанието на клетките.
За да контролирате външния вид на празните клетки, се използва свойството празни клетки; когато е зададено да се скрие, рамката и фонът в празните клетки не се показват. Ако всички клетки в един ред са празни, тогава целият ред е скрит. Една клетка се счита за празна в следните случаи:
- изобщо няма символи;
- клетката съдържа само нов ред, табулатор или интервал;
- стойността за видимост е зададена на скрито.
Добавянето на непрекъснат интервал се третира като видимо съдържание, т.е. клетката вече няма да е празна (пример 2.10).
Пример 2.10. Празни клетки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Използване на празни клетки
| Леонардо | 5 | 8 |
| Рафаел | | 11 |
| Микеланджело | 24 | |
| Донатело | | 13 |
Изгледът на таблицата в браузъра Safari е показан на фиг. 2.11а. Същата таблица в IE7 е показана на фиг. 2.11б.
а. В браузър Safari, Firefox, Opera, IE8, IE9
b. В браузъра IE7
Ориз. 2.11. Табличен изглед с празни клетки
| | 
