Границите на html таблицата могат лесно да се променят с помощта на css tools. Конфигурацията на дисплея им се дължи на свойствата: колапс и разстояние. За да редактирате табличния изглед, използвайте групата свойства на границата. Тя ви позволява да регулирате ширината, цвета, наличието /липсата на граници, техния стил и други функции на дисплея.
Основи
Ръководител Ръководител Глава
Клетка Клетка Клетка
Клетка Клетка Клетка
Размерът и шрифтът на текста, фона, отстъп от края на прозореца на браузъра са посочени в css в контейнера за тяло.
& lt ;! - fb_336x280_mid - & gt;
& lt; script & gt; (adsbygoogle = window.adsbygoogle || []). push ({});
тяло {
семейство шрифт: Helvetica, Sans-serif;
размер на шрифта: 5vw;
цвят: черен;
фонов цвят: rgba (228228245);
пълнеж: 20vh;
}
Използвайки стилове, се съставя формата на матрицата. Границата на свойството ви позволява да зададете стойностите на дебелината, вида и цвета на границата на html таблицата.
{
широчина на границата: 2vw;
стил на границата: пунктиран;
граничен цвят: небесносин;
}Намален с границата: цвят на стила за ширина.
{
граница: 1px твърдо # 4c6ea1;
}За определена страна, настройте границата нагоре (/дясно /долно /ляво) - стил (/цвят /ширина /радиус).
{
color-top-border: darkblue;
} Подложката задава отстъпа в клетката от текст на кадър, а текстът подравнява задаването на подравняването.
Използване на стилове под формата на таблица. Свойството border позволява да зададете стойностите на дебелината, стила и цвета на рамката. Подложката задава вдлъбнатината на текста, текстовото подравняване задава настройката.
th, td {
граница: 1vw solid # 4c6ea1;
пълнеж: 1vw;
подравняване на текст: наляво;
}
Без рамки
Не е необходимо да се използва граница или отделно, за да се определи граничен цвят, ширина и стил, тъй като е възможно да се направят html-таблици без граници, които да бъдат напълно развити. Например, следният код задава фона, отстъпите и заоблените ъгли (последната матрица без вътрешни и външни линии).
& lt ;! - fb_336x280_mid2 - & gt;
& lt; script & gt; (adsbygoogle = window.adsbygoogle || []). push ({});
Таблица {
text-align: left;
фонов цвят: rgba (228228245);
радиус на границата отгоре-ляво: 15em 1em;
радиус отдолу вдясно: 15am 1em;
}
td, th {
пълнеж: 1.5 vw;
}
Поради възможността за задаване на фон за всяка клетка, таблица без граници може да изглежда така.
Таблица {
text-align: left;
фонов цвят: rgba (228228245);
ширина: 70vw;
разстояние между границите: 2vh 2vh;
}
td, th {
уплътнение: 1.5 vh;
}
td {
фон-цвят: rgba (247247255);
}
Можете да премахнете границите на html таблицата, оставяйки вътрешните. За тази цел, например, предпишете свойството на границата за клетките (tr), задайте колапса на съседните страни и забранете да рисувате линии около матрицата (скрити). Последното действие крие линиите от клетки, които са, когато сриването е включеносе появяват на същото място, където се намират външните ръбове на масата.
& lt; script type = "text /javascript" & gt;
може да blockSettings2 = {blockId: "R-A-271049-5", renderTo: "yandex_rtb_R-A-70350-39", async:! 0};
if (document.cookie.indexOf ("abmatch =")> = 0) blockSettings2.statId = 70350;
Функция (a, b, c, d, e) {a [c] = a [c] || [], a [c] .push (функция () {Ya.Context.AdvManager.render (blockSettings2)}), e = b.getElementsByTagName ("скрипт") , d = b.createElement ("скрипт"), d.type = "text /javascript", d.src = "//an.yandex .ru /system /context.js ", d.async =! 0e.parentNode.insertBefore (d, e)} (това, този.документ," yandexContextAsyncCallbacks ");
Таблица {
text-align: center;
граничен колапс: колапс;
фонов цвят: rgba (228228245);
радиус на границата: 50%;
ширина: 29vh;
височина: 10vh;
стил на границата: скрит;
}
td {
подложка: 1.5 vh;
граница: 0.5 vh твърдо черно;
}
Свиване и разделяне
Едно от основните свойства на таблицата в html - border-collapse - определя как ще се показват границите на клетките. Имотът може да има една стойност от три: срутване, разделяне, наследяване.
Таблица {
граница-колапс: колапс;
}По подразбиране стойността е разделена, така че всяка клетка ще има свой собствен лимит. Благодарение на срутването можете да обедините клетъчните линии, така че съдържанието им да бъде разделено от един кадър. Картината показва трите състояния на описаните по-горе граници: няма стилове; с стойност по подразбиране за граничен срив; с стойност на граничен срив, оставя обща линия между клетките.
Двойни рамки
Свойството на сгъване ви позволява да правите границите на клетките в html таблицата независимо един от друг, както и от общите. С него често се използва свойството border-spacing, което регулира разстоянието между рамката на клетките. Можете да зададете хоризонтално и вертикално разстояние.
Таблица {
Разстояние между границите: 0.5 vw 1vw;
}Първата стойност показва разстоянието между криковете хоризонтално, а второто - вертикално. Ако рамката е зададена за самата таблица, то разстоянието от нея до клетките също се формира от свойството на spasing, но също така може да бъде повлияно от уплътняването на матрицата. В случаите, когато матрицата има фон, празното пространство между клетките ще бъде запълнено с тях.
& lt; script type = "text /javascript" & gt;
може да blockSettings3 = {blockId: "R-A-271049-6", renderTo: "yandex_rtb_R-A-70350-44", async:! 0};
if (document.cookie.indexOf ("abmatch =") & gt; = 0) blockSettings3.statId = 70350;
Функция (a, b, c, d, e) {a [c] = a [c] || [], a [c] .push (функция () {Ya.Context.AdvManager.render (blockSettings3)}), e = b.getElementsByTagName ("скрипт") , d = b.createElement ("скрипт"), d.type = "text /javascript", d.src = "//an.yandex .ru /system /context.js ", d.async =! 0e.parentNode.insertBefore (d, e)} (това, този.документ," yandexContextAsyncCallbacks ");
Таблица {
интервал между границите: 0.5 vw 1vw;
граница: 1vw твърдо # 4c6ea1;
пълнеж: 1vw;
фонов цвят: черен;
}
td, th {
граница: 1vw твърдо # 4c6ea1;
пълнеж: 0.3 vw;
подравняване на текст: наляво;
цвят на фона: бял;
}
Празни клетки
Ако таблицата не посочва обединението на клетъчните граници, свойствата на празната клетка ви позволяват да покажете техните линии и фонове, които се считат за празни (маркирани като видимост или нямат знаци) ). Ако искате да покажете рамката и фона на всяка клетка, свойствата определят стойността на шоуто.
Таблица {185) празни клетки: показват;
}
Стойността на скрива скрива границата и фона на празни блокове. Ако всички клетки в един ред са празни, низът има нулева височина и само една вертикална линия.
таблица {
интервал между границите: 0.5 vw 1vw;
граница: 0.1 vw solid # 4c6ea1;
пълнеж: 0.5 vw;
фонов цвят: rgba (3331171 012);
празни клетки: скрий;
}
td, th {
граница: 0.3 vw solid # 4c6ea1;
пълнеж: 0.5 vw;
подравняване на текст: наляво;
цвят на фона: бял;
}
Атрибут
Има атрибут на правила за разпределяне на границите на групи елементи (клетки, колони, редове, групи от редове или колони). Неговата стойност се записва директно в html маркера на таг таблицата.
Позволява селективно да се начертае рамка от елементи. Достатъчно е да зададете атрибут в html, той ще създаде вътрешните линии между клетките. Границата на html-таблицата трябва да бъде ръчно зададена в css.
Глава Ръководител Ръководител
Клетка Клетка клетка
Клетка Клетка Клетка
Таблица {
border-top: 1vw solid # 486743;
размер на шрифта: 5vw;
}
th, td {
пълнеж: 2vw;
}
Така че първата снимка показва чиста работа на атрибути без допълнително кадриране в таблицата. Втората снимка показва горната линия, която се инсталира чрез инструкцията.
& lt; скрипт & gt; (adsbygoogle = window.adsbygoogle || []). push ({});
Таблица {
border-top: 1vw doted # 486743;
}
Атрибутът може да има няколко стойности. Всички създават граница между клетките на рамката с дебелина равна на 1px. Cols създава линии между колони, редове - между редове, без ръб. Следващата фигура показва примери на таблици със стойности всички и редове.
Можете да промените цвета на границите на клетките и ширината на рамката, като използвате атрибута rules, използвайки border and bordercolor.
Конфликти на стилове
Клетките, редовете, колоните и групите от елементи могат да бъдатдадени стойности на собствените граници. В същото време те могат да се различават по три параметъра: стил, дебелина и цвят.
В режим на свиване има конфликти на атака. Поради факта, че правилото на две различни клетки може да се приложи към една граница, проблемът при избора на стил трябва да се приоритизира. Както пише Е. Малчук, печели най-известните (с изключение на скритите).
Илюстрирането на стиловия конфликт е лесно на таблицата, която вече се разглежда. Достатъчно е да се добавят няколко класа клетки и да се предпишеза тях регистрация. Html приема формата:
Глава Глава Глава
Клетка Клетка Клетка
Клетка Клетка Клетка
Съответният css.
тяло {
семейство шрифтове: Helvetica, Sans-serif;
размер на шрифта: 5vw;
цвят: черен;
марж: 0;
ширина: 80vw;
цвят на фона: бял;
пълнеж: 3vw;
}
таблица {
фон-цвят: rgba (3331171 012);
пълнеж: 0.5 vw;
граничен колапс: колапс;
разстояние между границите: 0.5 vw 1vw;
стил на границата: скрит;
}
th {
подложка: 1vw;
изравняване на текст: наляво;
граница: 0.1 vw solid # 4c6ea1;
}
td {
подплата: 1vw;
граница: 0.2 vw пунктирана # 4c6ea1;
}
.second_cell {
граница: 001 vw solid # 4c6ea1;
}
.third_cell {
граница: 001 vw двойно червено;
}
Стилове на рамки
Дизайнът на рамката може да бъде зададен поотделно за всяка страна на клетката. За да направите това, достатъчно е да посочите в стила на границата не само една стойност, но и да изброите четири съответно на клетките на клетката.
th, td {
пълнеж: 1vw;
подравняване на текст: наляво;
широчина на границата: 0.5 vw;
граничен цвят: тъмен;
стил на границата: пунктиран;
}
.седем {
border-top-color: skyblue;
стил на границата: твърдо;
Граница вдясно: 2VW;
стил на границата отдолу: прекъснат;
стил на границата наляво: скрит;
}
Можете да зададете данни в един ред, като зададете от една до четири различни стойности. Всеки традиционно става инструкция за една от страните.
- Ако зададете две стойности, първата ще съответства на долната и горната граница, втората на ляво и дясно.
- От първите три е отговорен за горната, втората - за лявата и дясната, третата - задолния ред Четирите стойности определят еднозначно всяка от линиите, от горния по посока на часовниковата стрелка наляво.
Възможно е да се определи обозначението на клетъчните граници чрез просто идентифициране на данни за всяка страна, както е показано по-горе.
Има общо десет стила за рамката. Всички те променят линията или го премахват:
- няма - няма граници;
- скрит - по-тежък, блокира появата на признаци (в конфликтна ситуация);
- пунктирана - от точките;
- прекъсната - пунктирана;
- твърдо вещество - твърдо вещество;
- двойно-двойно твърдо вещество;
- жлеб - рамката е като притискана към повърхността;
- гребен - изпъкнала линия;
- Вмъкване - всъщност, за едната страна на елемент се държи като хребет, ако е приложен към цял елемент, тогава отгоре и наляво са засенчени, а долният десен е подчертан;
- начало - се държи като жлеб, когато е приложен към едната страна на елемента, засенчвайки долния десен, горната и лявата част изглеждат по-светли.
Всяка от клетките (от горната и лявата страна) прилага един от стиловете. За да не се конкурират помежду си, най-"слабите", поставят най-високата стойност.
Таблица {
фон-цвят: rgba (3331171 012);
пълнеж: 0.5 vw;
граничен колапс: колапс;
граница: 0.3 vw черно;
}
th, td {
подложка: 1vw;
изравняване на текст: наляво;
}
: един {
border-top: hidden;
Граница наляво: скрита;
}
.two {
граница отгоре: 0.4 vw двойно # 4c6ea1;
Граница вляво: 0.4 vw двойно # 4c6ea1;
}
.tri {
граница отгоре: 0.5 vw твърдо вещество # 4c6ea1;
граница-ляво: 0.5 vw твърдо вещество # 4c6ea1;
}
. Четири {
граница отгоре: 0.7 vw пунктирана # 4c6ea1;
граница лява: 0.7 vw пунктирана # 4c6ea1;
}
. Пет {
граница отгоре: 0.8 vw с пунктирана # 4c6ea1;
Граница вляво: 0.8 vw пунктирана # 4c6ea1;
}
.six {
граница отгоре: 0.9 vw хребет # 4c6ea1;
Граница наляво: 0.9 vw хребет # 4c6ea1;
}
.seven {
border-top: 1vw начало # 4c6ea1;
Граница вляво: 1vw начало # 4c6ea1;
}
. Осем {
граница отгоре: 1.1 vw groove # 4c6ea1;
Граница наляво: 1.1 vw жлеб # 4c6ea1;
}
. N {{451) граница отгоре: 1.2 vw inset # 4c6ea1;
Граница вляво: 1.2 vw inset # 4c6ea1;
}
Структуриране на материала
Естеството на данните, представени в матрицата, често изисква да се променят границите на самата таблица, кадрите на нейните клетки, редове или колони. Можете да го използвате за това:
- линии за нулиране (гранична ширина показват стойността в 0px);
- скрити.
Предимството е скрито в силата на неговия приоритет. Ако правилото работи на границата на два елемента наведнъж и в един от тях граничният стил е зададен на скрит, редът няма да бъде показан. Това означава, че можете спокойно да направите цялата маса, а след това избирателно да премахнете ненужните рамки.
Използването на скрити във връзка с клетките прави невъзможно възстановяването на границата с други методи (с изключение на тежката! Imporant). Ето защо, ако трябва да премахнете някои от страните на клетката, по-добре е да не използвате нищо.
Да предположим, че има таблица. Целта е да се премахнат вертикалните граници вътре в първия ред. Той е маркиран с отделен таг (заглавка), следователно не се изисква допълнителен клас. Ако приложите скритото към целия етикет, като го напишете границата наляво, заедно с вътрешните граници ще бъдат премахнати и една част от страната на таблицата, която не се изисква от условието. Ако не използвате нищо и матричната линия, тогава ще има две несъвместими правила за вътрешния дявол, и никой няма да се конфронтира с външния ръб на нищо.правилото, дадено му в таблицата, и партията ще остане в сила.
Отстраняването на отделни клетъчни линии се извършва с използване на класове, които са предписани от съответните елементи, както е показано за индивидуален стил, ширина и цветна задача.
Докато отстраняването на страничната граница в html-таблицата е по-лесно поради позоваването на външните матрични рамки, които сочат към таблицата. Достатъчно е да напишете инструкция към определена линия в css.
Таблица {
style-border-left: hidden;
}Премахването на фреймовете в редове е лесно за реализиране, като се използва свойството на границата със стойността, скрита в tr. Изчезват не само хоризонталните линии на масата, но и страничните. Матрицата се дегенерира във вертикални колони.
tr {
граничен стил: скрит;
}В изключителни случаи се обърнете към! Ако го добавите след инструкцията, то ще получи допълнителен приоритет. Границите на HTML таблицата са гъвкави и лесно приспособими. Групата свойства на границата ви позволява да скривате елементи, да променяте цвят, ширина или стил. Недостатъкът на таблиците не винаги е еднозначно предсказуем резултат от комбинация от правила, прилагани към отделен елемент. С оглед на това препоръчваме или намаляваме броя на възможните стилове на граници или ги прилагаме точка по точка.
