Задава разстоянието между границите на клетките в таблица. Атрибутът border-spacing не работи, когато таблицата има border-collapse, зададена на collapse.

Синтаксис

граница: стойност [стойност]

Аргументи

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





border-spacing










12
34


Резултатът от този пример е показан на фиг. един.

Ориз. 1. Прилагане на опцията за граници

Забележка

Ако да маркирате

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

маси

  • border-collapse задава как да се показват граници около клетките на таблицата. Този параметър играе роля, когато е зададена рамка за клетките, тогава на кръстовището на клетките ще се получи линия с двойна дебелина. Добавянето на стойността за свиване кара браузъра да анализира тези места в таблицата и да премахне двойните редове в нея.
  • table-layout указва как браузърът трябва да изчислява височината и ширината на клетките на таблицата въз основа на нейното съдържание.
  • border-spacing задава разстоянието между границите на клетките в таблица. Атрибутът border-spacing не работи, когато таблицата има border-collapse, настроена на свиване.

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

    border-collapse: отделно - всяка клетка има своя граница (по подразбиране)

    border-collapse: колапс - обща граница

    border-collapse: inherit - стойността е взета от родителски елемент

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

    стил:

    и и техния стайлинг.

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

    1
    2
    3
    4
    5
    6

    		 Страница

    Домашна работа.

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

    1. Създайте три таблици, всяка с един ред и три колони (колони).
    2. В първата таблица поставете Header или “header” на страницата (да не се бърка с “header” на HTML документа), във втората - лявото и дясното меню, както и основното съдържание (content) , в третия - Долен колонтитул или „долен колонтитул“ на страницата.
    3. Нека ширината на първата и последната колона на всяка таблица е фиксирана.
    4. важно. Използвайте етикета само за създаване на четири бутона хоризонтално менюв заглавката на страницата. В други случаи оставете изображенията на заден план, а във вторите клетки на таблиците се използват по принцип само цветове, а в първата и последната таблица е #99FF99.
    5. Нека текстът на съдържанието на страницата да бъде подравнен от двете страни на клетката на таблицата, като заглавието е центрирано.
    6. Що се отнася до разстоянията между клетките на таблиците, както и отстъпите на клетките, тогава помислете сами къде трябва да бъдат напълно премахнати и къде трябва да бъдат увеличени.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Помислете за сравняване на поведението на границите, когато използвате свойството border-spacing със стойност 0 и свойството border-collapse със стойност collapse:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Пример за използване на свойството 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 елемент можете да приложите само едно свойство на CSS - цвета на фона (background-color), но не можете да зададете цвета на фона при задържане (псевдоклас :hover) върху този елемент директно. В този пример ще разгледаме как да маркирате колона в таблица, като използвате само CSS.

    Пример за маркиране на колони и редове от таблица при задържане на мишката
    Приложение №Обслужванецена, търкайте.Обща сума
    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 пиксел в зелено, височината на заглавката и клетките с данни е 45px. Премахнахме празнината между клетките, използвайки свойството border-collapse със стойността .
    • И така, използвайки псевдоелемента ::after, ние добавяме съдържание след всеки елемент при задържане. Псевдоелементът ::after трябва да се използва заедно със свойството content, благодарение на което вмъкваме елемент на ниво блок, който има фонов цвят горскозелени има абсолютно позициониране.
    • Абсолютното позициониране тук е необходимо за изместване на елемента спрямо посочения ръб на неговия предшественик, докато предшественикът трябва да има стойност на позиция, различна от стандартната - static, в противен случай броят ще бъде спрямо посочения ръб на прозореца на браузъра, за това причината, която сложихме на масата относително позициониране(относително).
    • Задаваме свойството top за нашия генериран блок, което определя посоката на отместване на позиционирания елемент от горния ръб, и свойството bottom, което определя посоката на отместване на позиционирания елемент от долния ръб. И двете свойства бяха зададени на 0, така че блокът ще заема изцяло елемента от долната и горната част на таблицата, ширината на този блок беше зададена на 25%, тази стойност съответства на стойността на ширината на самата клетка.
    • И последното свойство, което задаваме за този блок: z-индекс със стойност "-1" определя реда на позиционираните елементи в Z ос. Това свойство е необходимо, така че текстът да е пред този блок, а не зад него, ако не зададете стойност по-малка от нула, тогава блокът ще затвори текста.

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

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

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

    Преди да преминете към следващата тема, изпълнете практическата задача:


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


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