Таблиците са широко използван елемент за представяне на различни данни в презентации, лекции, флаери и др. Поради своята яснота, гъвкавост и простота, таблиците се използват широко и в уебсайтове, за да предадат по-добре необходимия материал на читателя. Като добавите пълната мощ на стиловете към таблиците, можете много успешно да вместите таблици в дизайна на уебсайта и да представите таблични данни ясно и красиво.
Ширина на масата
По подразбиране ширината на таблицата се задава от самия браузър въз основа на количеството таблични данни в нея. Ако има много текст в клетките, тогава таблицата ще заеме цялата достъпна за нея ширина и ако няма достатъчно текст, тогава ширината на таблицата автоматично ще намалее. Ако на една страница има няколко таблици, различните им ширини понякога изглеждат небрежни. Така че е по-добре изрично да зададете ширината на таблицата в проценти, пиксели, ems или всякакви други CSS единици, както е показано в пример 1.
Пример 1: Ширина на таблицата в проценти
Таблица (ширина: 100%;) .tbl-среден (ширина: 60%;) .tbl-малък (ширина: 200px;)
В този пример ширина от 100% се прилага към всички таблици. Отново, класовете помагат да се зададе ширината за избрани таблици, като се използва предварително създаден клас. За да зададете ширина на таблицата от 200 пиксела, трябва да добавите към елемента
В този пример всички таблици на страницата са настроени на централно подравняване.
Цвят на фона
Цветът на фона на всички клетки на таблицата едновременно се задава чрез свойството background, което се прилага към селектора на таблицата. В този случай трябва да запомните правилата за използване на стилове, по-специално наследяването на свойствата на елемента. Ако едновременно с таблицата зададете цвят за td или th селектор, тогава той ще бъде зададен като фон (пример 3).
Пример 3: Цвят на фона
| Тип връзка | ||
|---|---|---|
| Вал | Ръкав | |
| Безплатно | H9 | D10 |
| нормално | N9 | аз с 9 |
| Плътен | P9 | |
Резултатът от този пример е показан на фиг. 1.
Ориз. 1. Променете цвета на фона
Ако искаме да направим зебра, което е името, дадено на редуващи се линии с различни цветове, тогава трябва да използваме псевдокласа :nth-child, като го добавим към селектора tr. За да може зебрата да се простира само до тялото на таблицата, а не до нейната заглавка, ние ги отделяме един от друг с помощта на елементи И
(пример 4).Пример 4: Създаване на зебра
| Размерни интервали, мм | IT толеранс, µm, за квалификации | |||
|---|---|---|---|---|
| 5 | 6 | 7 | 8 | |
| До 3 | 4 | 6 | 10 | 14 |
| Св. 3 до 6 | 5 | 8 | 12 | 18 |
| Св. 6 до 10 | 6 | 9 | 15 | 22 |
| Св.10 до 18 | 8 | 11 | 18 | 27 |
| ул. 18 до 30 | 9 | 13 | 21 | 33 |
| Св. 30 до 50 | 11 | 16 | 25 | 39 |
| Св. 50 до 80 | 13 | 19 | 30 | 46 |
Резултатът от този пример е показан на фиг. 2.
Ориз. 2. Зебра
Четната стойност на селектора :nth-child прилага стила към всички четни редове и задава цвета на фона им. След това можете също да го промените на нечетен сивоНечетните редове ще бъдат маркирани.
По същия начин колоните, а не редовете, се маркират с цвят; за това трябва да използвате селектора tbody td:nth-child(even).
Полета вътре в клетките
Полето е разстоянието между границата на клетката и нейното съдържание. Без полета текстът в таблица „залепва“ за рамката, като по този начин влошава възприемането му, но добавянето на полета подобрява четливостта на текста. За тази цел се използва свойството padding style, което работи със селектора td или th, както е показано по-горе в примери 3 и 4. Обикновено се посочва една стойност, която след това задава празното пространство около съдържанието на клетката на всички страни наведнъж. Две стойности се записват, когато трябва да зададете различни полета вертикално (първа стойност) и хоризонтално (втора стойност).
Разстояние между клетките
Между клетките има малко празно пространство, което не се вижда, освен ако не зададете рамка или цвят на фона за клетките. Това разстояние първоначално е 2px и може да бъде променено чрез свойството border-spacing, като го добавите към селектора на таблицата (Пример 5).
Пример 5: Използване на border-spacing
Таблица ( border-spacing: 3px; /* Разстояние между клетките */ ) thead th ( background: #e08156; /* Цвят на фона на заглавката */ цвят: #333; /* Цвят на текста */ ) td, th ( padding: 5px ; /* Полета в клетките */ фон: #4c715b; /* Цвят на фона на клетките */ цвят: #f5e8d0;
Добавяйки този стил към всяка таблица, получаваме резултата, показан на фиг. 3.
Ориз. 3. Табличен изглед с разстояние между клетките
Ако свойството border-collapse се добави към таблицата със стойност collapse, тогава border-spacing се игнорира, защото вече няма никакво разстояние между клетките.
Граници и рамки
За да се раздели ясно съдържанието на една клетка от друга, към клетките се добавят граници. Те се създават от свойството border style, което се прилага към елементи (
Пример 6: Използване на свойството border-collapse при създаване на граници на таблица
| О | х | х |
| О | О | х |
| х | х | О |
Разликата между границите на таблицата със и без свойството border-collapse е показана на фиг. 4.
Ориз. 4. Изглед на таблица при използване на border-collapse
На фиг. Фигура 4а показва рамката на таблицата по подразбиране. Моля, обърнете внимание, че вътре в таблицата всички линии са с двойна дебелина. Добавянето на border-collapse премахва тази функция и дебелината на всички линии става една и съща (фиг. 4b).
Не е необходимо линиите да са от всички страни на клетките, но могат да бъдат проектирани да отделят един ред или колона от друг. За да направим това, използваме border-bottom, border-left и други подобни свойства. Прилагане на граници към елементи
Пример 7. Редове между редовете
| Тип връзка | Допустими полета за ширина на шпонковия канал | |
|---|---|---|
| Вал | Ръкав | |
| Безплатно | H9 | D10 |
| нормално | N9 | аз с 9 |
| Плътен | P9 | |
Резултатът от този пример е показан на фиг. 5.
Ориз. 5. Таблица с хоризонтални линии
По подразбиране текстът в клетка на таблица е подравнен вляво и централно. Изключение прави елементът
Пример 8: Подравняване на съдържанието на клетката хоризонтално
| Заглавие 1 | Клетка 1 | Клетка 2 |
|---|---|---|
| Заглавие 2 | Клетка 3 | Клетка 4 |
В този пример съдържанието
Ориз. 6. Подравняване на текст в клетки
Вертикалното подравняване в клетка винаги е центрирано, освен ако не е отбелязано друго. Това не винаги е удобно, особено за таблици, чието съдържание на клетки варира по височина. В този случай подравняването е зададено към горния край на клетката с помощта на свойството vertical-align със стойност top , както е показано в Пример 9.
Пример 9. Подравняване на съдържанието на клетката вертикално
| Тип връзка | Допустими полета за ширина на шпонковия канал | |
|---|---|---|
| Вал | Ръкав | |
| Безплатно | H9 | D10 |
| нормално | N9 | аз с 9 |
| Плътен | P9 | |
В този пример текстът е подравнен към горния ръб. Резултатът от примера е показан на фиг. 7.
Таблиците са неразделен елемент от езика на хипертекста HTML маркиране, което все още остава актуално за структуриране и удобно представяне на различни данни.
Преди много време, когато уебсайтовете бяха изложени предимно в таблична форма, таблиците бяха много търсени и съставляваха почти цялата рамка на новия ресурс. След това важността на елемента намалява популярността си спрямо блоковете (div), с помощта на които възможностите за оформление стават по-разширени както за настолни компютри, така и мобилни версиисайтове.
В момента таблиците се използват например за ценови листи, списъци, характеристики, въпросници и много други, а с използването на Cascading Style Sheets (CSS) можем да подобрим визуалното представяне на таблиците в документ. Тук ще представя няколко примера за проектиране на HTML таблици с изходен код, които по-късно могат да бъдат използвани при разработването на вашия проект.
Оформяне на таблици с CSS
Стилът на таблицата е готова таблица, изградена в HTML с CSS свойства, посочени за определени тагове. Надявам се, че знаете как и къде да залепите полученото източникза да изведете резултата на екрана.
Първо ще дам общия HTML код на таблицата, който впоследствие ще стилизираме.
| Име | Описание | Цена |
| Име | Характеристики | Цена |
| Име #2 | Характеристики | Цена |
| Име #3 | Характеристики | Цена |
CSS шаблони
Шаблоните не претендират за оригиналност, но могат да бъдат полезни за мнозина.
Таблица (ширина: 100%; border-collapse: collapse;) table td (padding: 12px 16px;) table thead tr (font-weight: bold; border-top: 1px solid #e8e9eb;) table tr (border-bottom: 1px плътен #e8e9eb;) таблица tbody tr:hover (фон: #e8f6ff;)
Между другото, ако не използвахме етикета , тогава можете да зададете свои собствени стилове за първия ред, като използвате псевдо-клас:nth-child(1) . Таблица (ширина: 100%; border-collapse: collapse;) table thead tr (цвят: #ffffff; font-weight: bold; background: #00bf80;) table thead tr td (border: 1px solid #01ab73;) table tbody tr td (граница: 1px solid #e8e9eb;) таблица tbody tr:nth-child(2n) (фон: #f4f4f4;) таблица tbody tr:hover (фон: #ebffe8;) Таблица (ширина: 100%; граница-колапс: отделно; граница-разстояние: 4px;) таблица thead tr (цвят: #ffffff; тегло на шрифта: получер;) table thead tr td (border-radius: 4px 4px 0 0; фон: #2e82c3;) таблица tbody tr td (граница: 1px solid #2e82c3; border-radius: 4px; фон: #cbdfef;) таблица tbody tr td:hover (фон: #a2c3dd; продължителност на прехода: 0.2s;) Таблица (ширина: 100%; подравняване на текст: център; граница-отдолу: 2px плътен #dfdfdf; border-radius: 6px; border-collapse: отделно; border-spacing: 0px;) таблица thead tr (цвят: #ffffff; font-weight: bold; background: #c83240;) table tr td (border-right: 1px solid #dfdfdf;) table tr td:last-child (border-right: 0px;) table tbody tr:nth-child(1n) ) (фон: #f6f6f6;) таблица tbody tr:nth-child(2n) (фон: #e6e6e6;) таблица tbody tr:hover (фон: #ffe8e8; продължителност на прехода: 0,6s;) Какво означават CSS свойствата, използвани в шаблоните: Таблични данни- информация, която може да бъде показана в таблица и логически разделена на колони и редове. Използва се за показване на таблични данни на уеб страници. HTML таг Вътре в етикет По подразбиране HTML таблица на уеб страница се показва без рамка; използвайте граница, както и към всички други елементи CSS свойствограница . Но си струва да обърнете внимание на факта, че ако добавите рамка само към елемент Таблица, th, td ( рамка: 1px плътно черно; ) Опитайте » Сега и таблицата, и клетките имат граници, а всяка клетка и таблица имат свои собствени граници. В резултат на това се появи празно пространство между рамките; размерът на това пространство може да се контролира от свойството border-spacing, което е зададено за цялата таблица. С други думи, не можете да контролирате разстоянието между различните клетки поотделно. Дори ако премахнете интервалите между клетките, като използвате стойността на свойството border-spacing 0, границите на клетките ще се допират една до друга, удвоявайки размера. За да комбинирате граници на клетки, използвайте свойството border-collapse. Може да има две значения: След добавяне на граници към клетките на таблицата, стана забележимо, че съдържанието на клетките е твърде близо до краищата. За добавяне свободно пространствоМожете да използвате свойството padding между краищата на клетките и тяхното съдържание: Th, td (padding: 7px; ) Опитайте » Размерът на масата зависи от нейното съдържание, но често възникват ситуации, когато масата е твърде тясна и е необходимо да се разтегне. Ширината и височината на таблицата могат да се променят с помощта на свойствата за ширина и височина, като се задават желаните размери или на самата таблица, или на клетките: Таблица (ширина: 70%; ) th (височина: 50px; ) Опитайте » По подразбиране текстът в клетките на заглавката на таблицата е подравнен в центъра, докато текстът в обикновените клетки е подравнен вляво; с помощта на свойството text-align можете да контролирате хоризонталното подравняване на текста. CSS свойството vertical-align ви позволява да контролирате вертикалното подравняване на текстовото съдържание. По подразбиране текстът е подравнен вертикално към центъра на клетките. Вертикалното подравняване може да бъде отменено с помощта на една от стойностите на свойството vertical-align: Когато преглеждате големи таблици, които съдържат много редове с много информация, може да е трудно да следите кои данни принадлежат към определен ред. За да помогнете на потребителите да се ориентират, можете да използвате последователно два различни цвята на фона. За да създадете описания ефект, можете да използвате селектора на клас, като го добавите към всеки втори ред на таблицата:
Добавянето на атрибут клас към всеки друг ред е доста досадно. Псевдо-class:nth-child беше добавен към CSS3, за да предостави алтернативно решение на този проблем. Сега ефектът на редуване може да бъде постигнат изключително използвайки CSSбез да променяте HTML маркирането на документа. С помощта на псевдо-клас:nth-child можете да изберете всички четни или нечетни редове на таблица, като използвате един от ключови думи: четен (четен) или нечетен (нечетен): Tr:nth-child(odd) (фонов цвят: #EAF2D3; ) Опитайте » Друг начин за подобряване на четливостта на табличните данни е да промените цвета на фона на ред, когато задържите курсора на мишката върху него. Това ще помогне да се подчертае желаното съдържание на таблицата и да се увеличи визуалното възприятие на данните. Прилагането на такъв ефект е много просто; за да направите това, трябва да добавите псевдоклас: курсор на курсора на мишката върху селектора на реда на таблицата и да зададете желания цвят на фона: Tr:hover ( цвят на фона: #E0E0FF; ) Опитайте » HTML подравняванеЦентрирането на таблица е възможно само ако ширината на таблицата е по-малка от ширината на нейния родителски елемент. За да подравните таблицата към центъра, трябва да използвате свойството margin, като му дадете поне две стойности: първата стойност ще отговаря за външното поле на таблицата в горната и долната част, а втората стойност ще отговаря за автоматично подравняване към центъра: Таблица ( поле: 10px автоматично; ) Опитайте » Ако имате нужда от различни полета в горната и долната част на таблицата, можете да зададете свойството margin на три стойности: първото ще отговаря за горното поле, второто за хоризонталното подравняване и третото за долното поле: Таблица (поле: 10px автоматично 30px;) Самите таблици изглеждат доста лоши и браузърите показват някои характеристики на таблицата, по-специално рамки, по свой начин. В същото време тези недостатъци могат лесно да бъдат коригирани с помощта на силата на стиловете. В същото време средствата за проектиране на таблици са значително разширени, което ви позволява успешно да вписвате таблици в дизайна на сайта и да представяте таблични данни по-ясно. Цветът на фона на всички клетки на таблицата едновременно се задава чрез свойството background, което се прилага към селектора TABLE. В този случай трябва да запомните правилата за използване на стилове, по-специално наследяването на свойствата на елемента. Въпреки че свойството на фона не е наследено, фоновата стойност по подразбиране за клетките е прозрачна, т.е. прозрачност, така че ефектът на запълване на фона се получава и за клетките. Ако едновременно с TABLE зададете цвета на селектора TD или TH, тогава този цвят ще бъде зададен като фон на клетката (пример 2.3). Пример 2.3. Цвят на фона
В този пример получаваме син фонов цвят за клетките (tag Резултатът от този пример е показан на фиг. 2.4. Ориз. 2.4. Промяна на цвета на фона Полето е разстоянието между ръба на съдържанието на клетката и нейната граница. Обикновено атрибутът cellpadding на таг се използва за тази цел. Пример 2.4. Полета в таблици XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
В този пример, чрез групиране на селектори, полетата се задават едновременно за TD и TH селектори. Резултатът от примера е показан на фиг. 2.5. Ориз. 2.5. Полета в клетки Ако свойството стил на подплънка се прилага към клетките на таблицата, тогава ефектът на атрибута cellpadding на тага За да промените разстоянието между клетките, използвайте атрибута cellpacing на тага Свойството border-spacing влиза в сила само ако селекторът TABLE няма свойството border-collapse, зададено на collapse (Пример 2.5). Пример 2.5. Разстояние между границите на клетката XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Резултатът от този пример е показан на фиг. 2.6. Ориз. 2.6. Изглед на таблица при използване на интервал между граници Интернет браузър Explorer версия 7 и по-нова не поддържа свойството border-spacing, така че в този браузър стойността по подразбиране за cellpacing (обикновено 2px) ще се използва за таблици. При добавяне на свойство за свиване на границата със стойност на свиване към селектор TABLE, атрибутът на cellpacing се игнорира и стойността на границата се нулира. По подразбиране първоначално няма рамка в таблицата и нейното добавяне става с помощта на атрибута border на тага Известно е, че атрибутът cellpacing на тага Имайте предвид, че това не е напълно удобен начинсъздаване на граници, защото има ограничен обхват. По този начин можете да получите само едноцветна мрежа, а не вертикални или хоризонтални линии на правилните места. Свойството за стил на границата едновременно задава цвета, стила и дебелината на рамката около елемент. Когато трябва да създадете отделни линии от различни страни, по-добре е да използвате производните - 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
Този пример използва черна двойна рамка около самата таблица и плътна бяла рамка около всяка клетка. Резултатът от примера е показан на фиг. 2.7. Ориз. 2.7. Рамка около таблицата и клетките Моля, имайте предвид, че там, където клетките се съединяват, се образуват двойни линии. Те се получават отново поради действието на атрибута cellspacing на тага Пример 2.7. Създаване на единична рамка XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Този пример създава плътна зелена линия между клетките и черна линия около таблицата. Всички граници в таблицата имат еднаква дебелина. Резултатът от примера е показан на фиг. 2.8. Ориз. 2.8. Граница около масата По подразбиране текстът в клетка на таблица е подравнен вляво. Изключението от това правило е етикетът Пример 2.8. Подравнете съдържанието на клетката хоризонтално XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
В този пример съдържанието на тага Ориз. 2.9. Подравняване на текст в клетки Вертикалното подравняване в клетка винаги е центрирано, освен ако не е отбелязано друго. Това не винаги е удобно, особено за таблици, чието съдържание на клетки варира по височина. В този случай подравняването е зададено към горния край на клетката с помощта на свойството vertical-align, както е показано в Пример 2.9. Пример 2.9. Подравнете съдържанието на клетката вертикално XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Този пример задава височината на заглавката Ориз. 2.10. Подравняване на текст в клетки Браузърите показват клетка по различен начин, когато в нея няма нищо. „Нищо“ в този случай означава, че в клетката не е добавена нито картина, нито текст и пространството не се взема предвид. Естествено, външният вид на клетките се различава само ако около тях е поставена рамка. При използване на невидима граница външният вид на клетките, независимо дали има нещо в тях или не, е един и същ. По-старите браузъри не показваха цвета на фона на празните клетки за преглед За щастие, ерата на еднопикселните рисунки и всички видове разделители, базирани на тях, отмина. Браузърите работят доста коректно с таблици дори без наличието на съдържание на клетки. За да контролирате външния вид на празните клетки, използвайте свойството празни клетки; когато е зададено да се скрие, рамката и фонът не се показват в празните клетки. Ако всички клетки в един ред са празни, тогава целият ред е скрит. Клетката се счита за празна в следните случаи: Добавянето на непрекъснат интервал се възприема като видимо съдържание, т.е. клетката вече няма да е празна (пример 2.10). Пример 2.10. Празни клетки XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Изглед на таблица в Браузър Safariпоказано на фиг. 2.11а. Същата таблица в браузъра IE7 е показана на фиг. 2.11б. А. В браузър Safari, Firefox, Opera, IE8, IE9 b. В браузъра IE7 Ориз. 2.11. Изглед на таблица с празни клетки И в тази статия ще говоря за техния дизайн с използвайки CSS. Каскадните стилове използват следните свойства за форматиране на таблици: Задайте съответно ширината и височината на масата. Без тези свойства параметрите се определят автоматично и зависят от съдържанието на контейнера Таблица (ширина: 450px; височина: 80%;) Указва къде ще бъде поставен заглавката на таблицата, описана от тага Изключително за Браузър Firefoxналични стойности наляво(заглавие вляво) и точно(вдясно от таблицата), но другите браузъри не ги разбират. Таблица (от страната на надписа: отгоре;) Помага за избягване на ситуации, при които границите на клетките образуват двойни граници. Фигурата по-долу показва точно такъв случай. Ето как клетъчните рамки се показват по подразбиране. правило border-collapse: отделно;дава същия ефект. За да разрешите проблема, трябва да декларирате border-collapse: колапс;(резултатът е показан на фигурата по-долу). Определя разстоянието между границите на клетките. Правилото се задава за цялата маса наведнъж. Ако има една стойност, тогава тя ще зададе разстоянието както хоризонтално, така и вертикално. Ако има две стойности, тогава първата ще зададе хоризонталното разстояние, втората - вертикално. Собствеността е несъвместима с правилото таблица (border-collapse: collapse;). Таблица (контур: 4px двойно #FCA360; border-collapse: отделно; border-spacing: 10px 20px;) td (padding: 3px; border: 1px solid #FCA360; ) Придава на таблицата следния вид: Указва дали фонът и границите на клетката да се показват, ако е празна. Свойството може да има една от двете стойности: Казва на браузъра как да определи ширината на клетките на таблицата въз основа на тяхното съдържание. Не забравяйте, че можете да зададете други универсални правила за масата, например, както направихме с височината ( височина) и ширина ( ширина). Имайки това предвид, нека създадем проста таблица, като частично коментираме кода.
В браузъра таблицата ще изглежда по-долу. ширина: 50%; Задайте ширината на таблицата на половината от ширината на родителската таблица. 50% се вземат от ширината на контейнера
защото няма други родители. Тоест таблицата ще заема точно половината от прозореца на браузъра. страна на надписа: отдолу; Поставяме заглавието най-отдолу, под масата. граница: плътна 4px #006400; Дайте на масата цветна рамка с дебелина 4 пиксела. border-collapse: колапс; Обединяване на границите на клетките. оформление на таблица: фиксирано; Ние конфигурираме начина, по който браузърът определя ширината на таблицата. размер на шрифта: 13px; Задайте размера на шрифта на заглавните клетки. тегло на шрифта: удебелен; Направете текста вътре в тях удебелен. фон: #ADFF2F; Задайте цвета на фона на клетките. border-top: 4px плътен #006400; граница-отдолу: 3px плътен #FF8C00; Регулиране на горната и долната рамка. цвят: #039; Определете цвета на текста. подложка: 8px; Задайте разстоянието от съдържанието на клетките до техните граници на осем пиксела.Име Описание Цена
Samsung Galaxy S8, S8 Plus 2400 ₽
Xiaomi Redmi 4A, 4X 520 ₽
Meizu M3S, M5S 720 ₽
CSS свойства
, който е контейнер със съдържанието на таблицата. Съдържание HTML таблициописан ред по ред, като всеки ред започва с отварящ таг
и завършва със затварящ таг .
са разположени клетки от таблица, представени от тагове или . Това са клетките, които съдържат цялото съдържание на таблицата, показано на уеб страницата.
Рамка за маса
, тогава ще се покаже около цялата маса. За да могат клетките на таблицата също да имат граница, ще трябва да зададете свойството border за елементите
И .
Име Фамилия Омир Симпсън Мардж Симпсън
Опитвам " Име Фамилия Омир Симпсън Мардж Симпсън Размер на масата
Подравняване на текст
Опитвам " Име Фамилия Омир Симпсън Мардж Симпсън Редуване на цвета на фона на редовете на таблицата
Опитвам "Име Фамилия Позиция Омир Симпсън баща Мардж Симпсън майка Барт Симпсън син Лиза Симпсън дъщеря Промяна на фона на реда при задържане
Центриране на маса
Цвят на фона на клетката
Заглавие 1 Заглавие 2 Клетка 3 Клетка 4 ) и червено в заглавието (таг ). Това е така, защото стилът за селектора TH не е дефиниран, така че фонът на родителя, в този случай селектора TABLE, се "показва". А цветът за TD селектора е посочен изрично, така че клетките са „запълнени“ със синьо.
Полета вътре в клетките
. Той определя стойността на полето в пиксели от всички страни на клетката. Възможно е да използвате свойството за стил на подплата, като го добавите към TD селектора, както е показано в Пример 2.4.
Заглавие 1 Заглавие 2 Клетка 3 Клетка 4 
игнориран.
Разстояние между клетките
. Ефектът от този атрибут е ясно видим, когато използвате граници около клетки или когато запълвате клетки с цвят, който се откроява от фона на страницата. Свойството border-spacing действа като заместител на cellpacing; то задава разстоянието между границите на клетките. Една стойност задава както вертикалното, така и хоризонталното разстояние между границите на клетката. Ако това свойство има две стойности, тогава първата определя хоризонталното разстояние (т.е. отляво и отдясно на клетката), а втората определя вертикалното разстояние (отгоре и отдолу).
Леонардо 5 8 Рафаел 4 11 Микеланджело 24 9 Донатело 2 13 
Граници и рамки
. Браузърите показват такава граница по различен начин, така че е по-добре изобщо да не посочвате този атрибут и да оставите чертането на граници на стиловете. Нека разгледаме два метода, пряко свързани със стиловете.
Използване на атрибута cellpacing
задава разстоянието между клетките на таблицата. Ако използвате различни фонови цветове за таблицата и клетките, тогава между клетките ще се появи решетка от линии, чийто цвят съответства на цвета на таблицата, а дебелината е равна на стойността на атрибута cellspacing в пиксели. Пример 2.3 по-горе показва този ефект, така че няма да го повтарям.
Използване на граничния имот
Заглавие 1 Заглавие 2 Клетка 3 Клетка 4 
. Въпреки че този атрибут не се появява никъде в примерния код, браузърът го използва по подразбиране. Ако зададете
, тогава получаваме не двойни, а единични линии, но с двойна дебелина. За да промените тази функция, използвайте свойството за стил на свиване на границата със стойността свиване, която се добавя към селектора TABLE (пример 2.7).
Заглавие 1 Заглавие 2 Клетка 3 Клетка 4 
Подравняване на съдържанието на клетките
, той дефинира заглавка, която е центрирана. За да промените метода на подравняване, използвайте свойството стил за подравняване на текст (пример 2.8).
Заглавие 1 Клетка 1 Клетка 2 Заглавие 2 Клетка 3 Клетка 4 е подравнен вляво и съдържанието на етикета - В центъра. Резултатът от примера е показан по-долу (Фигура 2.9).
Заглавие 1 Заглавие 2 Клетка 1 Клетка 2 като 40 пиксела и текстът е подравнен към долния ръб. Резултатът от примера е показан на фиг. 2.10.
Празни клетки
, така че когато беше необходимо да се остави клетка без съдържание, но да се покаже цветът на фона, вътре в клетката беше добавен неразделен интервал (). Пространството не винаги е подходящо, особено когато трябва да зададете височината на клетката на 1-2 пиксела, поради което прозрачният дизайн с един пиксел е широко разпространен. Наистина, такава картина може да бъде мащабирана по ваша преценка, но тя не се показва на уеб страницата по никакъв начин.
Леонардо 5 8
Рафаел 11
Микеланджело 24
Донатело 13
ширина и височина
. Стойностите са зададени на всякакви единици за дължина на CSS, но често се използват пиксели ( px) и лихва ( %
). Последният задава ширината спрямо родителския елемент, докато първият задава абсолютната стойност.
страна на надписа
граница-колапс
border-spacing
празни клетки
таблица-оформление
Пример за дизайн на маса
цени 2014
2015 2016
Хляб 16
18 21
захар 35
44 50
Сол 8
8,50 9
