|
CSS ви позволява да зададете не само стила на границата на таблицата, но и стила на границите на отделните клетки. Тъй като всяка клетка има свои граници, границата между съседните клетки е двойна. Но е възможно да се комбинират границите на съседни клетки в една. За това има свойство за свиване на границата. Приема стойности:
border-collapse: отделно - всяка клетка има своя граница (по подразбиране)
border-collapse: collapse - споделена граница
border-collapse: inherit - стойността се взема от родителския елемент
Например, нека създадем таблица и зададем рамка за клетките на всички таблици, които ще бъдат на страницата. Нека първо не променяме нищо, за да видим как ще изглежда таблицата:
стил:
1
2
3
4
5
6
|
Страница
Резултат този примернито е показано на фиг. 1.
ориз. 1. Прилагане на параметъра border-spacing
Забележка
Ако да маркирате се добавя параметърът за разпределение на клетките, след което при използване на атрибута за стил на разстояние между клетките той не се взема предвид и стойността на разстоянието по клетките се игнорира. Изключение от това правило е браузърът Internet Explorer, което изобщо не разбира свойството border-spacing.
Маси
border-collapse задава как да се показват граници около клетките на таблицата. Този параметър играе роля, когато е инсталирана рамка за клетките, след което на кръстовището на клетките ще получите линия с двойна дебелина. Добавянето на стойността за свиване принуждава браузъра да анализира подобни места в таблицата и да премахва двойните редове от нея.table-layout указва как браузърът трябва да изчислява височината и ширината на клетките на таблицата въз основа на нейното съдържание.border-spacing указва разстоянието между границите на клетките в таблицата. Атрибутът border-spacing не работи, когато таблицата има параметърът border-collapse, зададен на collapse.
И така, ние сме учили с вас най-много прости стъпки, което може да се направи с граници на таблица. И сега масата изглежда много по-естетически. Пълненето на клетките обаче директно се опира на границите. Това може лесно да се поправи, като просто направите отстъп на клетките в HTML таблицата. И тогава текстът вътре в рамката, в клетката, ще бъде по-четим.
За да направите отстъп на клетка, използвайте атрибута cellpaddingза етикет
. Има обаче друг, по-предпочитан вариант: CSS.
В този случай отстъпите се задават с помощта на свойството подплата. С негова помощ няма да е трудно да направите отстъп, където е необходимо, тоест отгоре, отдясно, отдолу или отляво, като използвате съответно едно от тези свойства: подложка-отгоре, padding-right, подплънка-отдолуИ padding-left.
Можете да посочите точно колко пиксела трябва да бъде вдлъбнатината. Нека дадем пример, в който ще бъде долният отстъп 20
пиксела, а всички останали ще бъдат 10
. Такива CSS- кодът ще изглежда така: Td ( подложка: 10px; подложка-отдолу: 20px; ) А пълен кодстилове на този етап: Таблица (контур: плътен 1px син; border-collapse: collapse;) td (контур: плътен 1px син; padding: 10px; padding-bottom: 20px;) Резултат в браузъра:
Разстояния между клетките
По правило проблемите, свързани със създаването на таблици, могат да бъдат решени чрез използване на тагове, атрибути и свойства, които ви позволяват да създавате рамки, отстъпи в клетките и също така да задавате цветния фон на самите клетки.
Отстъпите в таблиците не се намират само в клетките. Те могат да присъстват и между самите клетки.
Има две опции за правене на отстъпи между клетките:
- използване на атрибут разстояние между клеткитеза етикет
.
- използване CSS- свойства border-spacing.
Трябва да се подчертае, че border-spacingсе посочва за таблицата като цяло, докато свойството подплатасе записва директно за клетки.
Да разгледаме един пример: Таблица (контур: плътен 1px син; border-collapse: отделно; border-spacing: 5px;) td (контур: плътен 1px син; padding: 10px; padding-bottom: 20px;) И полученият резултат:
Нека незабавно да уточним, че не трябва да се опитвате да правите такива вдлъбнатини, използвайки border-collapse: колапс. В крайна сметка, когато използвате тази опция, клетките се „залепват“ една за друга.
И за да ги държите отделно един от друг, трябва да използвате border-collapse: отделно. Важно е да разберете, че тази стойност е стойността по подразбиране. И се използва само за да покаже ясно как се решава този проблем. Ако изтрием този ред, резултатът под формата на клетки, разположени отделно една от друга, ще бъде запазен.
Цел на урока:Въведение в свойствата на таблицата и принципите на CSS оформление на таблица
Нека разгледаме основното CSS свойствамаси
граница
Един имот се разглежда в едно и включва няколко свойства едновременно:
- БОРДЮР-СТИЛ
- ШИРИНА НА ГРАНИЦАТА
- ГРАНИЦА-ЦВЯТ
Има и общо правило:
table.collapse(border-collapse:collapse;) table.separate(border-collapse:separate;)
Резултат:
ширина и височина
(височина и ширина на масата)
Стойности:
Пример:
подравняване на текст
(хоризонтално подравняване)
Стойности:
- център (център)
- ляво (по левия ръб)
- дясно (десен ръб)
- подравняване (ширина)
вертикално подравняване
(вертикално подравняване)
Стойности:
- базова линия (по основната линия)
- под (като подиндекс)
- супер (като супериндекс)
- отгоре (по горния ръб)
- средата (в средата)
- отдолу (по долния ръб)
- % (от височината на разстоянието между редовете)
Пример:
подплата
(вътрешни отстъпи в таблицата)
цвят на фона (фон)
цвят (цвят на текста)
CSS оформление на таблица
Благодарение на голям бройсвойства на масите и вариации в техния дизайн, таблици за дълго времебяха някакъв стандарт за оформление на уеб страници. Ако направите границите на таблицата невидими, можете да използвате нейните отделни клетки като отделни блокове на страницата: горен колонтитул, меню, долен колонтитул и др.
Но това не е съвсем правилно, тъй като всеки таг има собствено предназначение и таблиците не трябва да се използват за оформление на страницата. Въпреки това, липсата на алтернатива подтикна дизайнерите да използват този конкретен метод на оформление.
Сега има друг начин - използване на слоеве, които постепенно замениха таблиците в този тип работа с уеб страница. Въпреки това, дори и в наше време, някои дизайнери успешно използват оформление на маса.
Таблично оформление с две колони
Един от най-често срещаните методи за оформление е две колони, т.е. Страницата е разделена на две части.
- Обикновено лявата страна е менюто и допълнителни елементи, а дясната страна е основната, за основното съдържание.
- В този случай ширината на лявата част е зададена на определена стойност, т.е. твърдо, а дясната страна заема останалата част от страницата.
- В този случай трябва да зададете общата ширина на цялата таблица (таг на таблица) в проценти чрез свойството width (100%), а за първата клетка (таг td) да зададете ширината (също свойството width) в пиксели или проценти.
Пример:задайте основната рамка на страницата от две колони: първата - с фиксиран размер, втората - за останалата част от браузъра. Изпълнете задачата, като използвате CSS стилове ()
Изпълнение:
| </глава>
<тяло >
<table id = "maket" cellspacing = "0" >
<tr >
<td id = "left" > 1</td>
<td id = "right" > 2</td>
</tr>
</таблица>
...
|
...
Резултат:
- Сега нека се опитаме да разделим визуално две колони на таблицата една от друга.
Пример:задайте различни фонове на клетки (за да разделите две колони една от друга) и задайте разстоянието между колоните (разделител)
Изпълнение:
Нека добавим нови стилови свойства: /* за лявата клетка */ td#left( width:200px; background: #ccc; border:1px solid black; /* временно маркирайте границите */ ) /* за дясната клетка */ td#right( background: #fc3; border:1px solid black; /* временно маркирайте границите */ ) /* за разделителя */ #razdel( width: 10px; /* Разстояние между колоните */)
Всички заедно:
| </глава>
<тяло >
<table id = "maket" cellspacing = "0" >
<tr >
<td id = "left" > 1</td>
<td id = "razdel" >
<td id = "right" > 2</td>
</tr>
</таблица>
|
Добавена е нова клетка за разделителя.
Резултат:
- Разделителят между колоните също може да бъде направен по-малко изпъкнал. За да направим това, ще използваме стилове на граници.
Пример:направете разделител между колоните на таблицата, като използвате пунктирана линия, граничеща със съседни клетки
Изпълнение:
Нека добавим нови свойства на границите за клетките: /* за лявата клетка */ td#left( width:200px; background: #ccc; /* Цветът на фона на лявата колона */ /* нов */ border-right: 1px пунктирана #000; /* Опции за дясната пунктирана граница * / )
Всички заедно:
| </глава>
<тяло >
<table id = "maket" cellspacing = "0" >
<tr >
<td id = "left" > 1</td>
<td id = "right" > 2</td>
</tr>
</таблица>
|
Резултат:
Оформление на таблица с три колони
Има концепция за фиксирано или „течно“ оформление.
Фиксирано CSS оформление
- При използване фиксирано оформление ширината на цялата таблица е посочена в пиксели, и след това, независимо от разделителната способност на монитора и прозореца на браузъра, таблицата винаги ще има еднаква ширина.
- В такъв случай Ширината на останалите колони също трябва да бъде фиксирана.
- Не можете да посочите ширината на една клетка, тогава тя ще бъде изчислена автоматично въз основа на размерите на останалите клетки и цялата таблица.
Пример:създайте шаблон на страница с три колони. Използвайте фиксирано оформление на таблицата: - лява колона - 150 пиксела;
- средна колона - 400 пиксела;
Изпълнение:
| </глава>
<тяло >
<table id = "maket" cellspacing = "0" >
<tr >
<td id = "left" > 1</td>
<td id = "central" > 2</td>
<td id = "right" > 3</td>
</tr>
</таблица>
|
Резултат:
Гумен макет
- Ширина на масатапри използване на "гумен" дизайн зададен като % от ширината на прозореца на браузъра. това. Когато прозорецът на браузъра се промени, размерът на таблицата също се променя.
- Ширина на всички клеткиможе да се инсталира в проценти.
- Вторият вариант е кога ширина на някои клеткие инсталиран в проценти, А някои - в пиксели.
Важно:Сумата от ширините на всички колони трябва да бъде 100%, независимо от ширината на таблицата.
Пример: - лява колона - 20%;
- средна колона - 40%;
- дясна колона - 40%;
Задайте фон за колоните и ги разделете визуално с рамка.
Изпълнение:
| </глава>
<тяло >
<table id = "maket" cellspacing = "0" >
<tr >
<td id = "left" > 1</td>
<td id = "central" > 2</td>
<td id = "right" > 3</td>
</tr>
</таблица>
|
Резултат:
Нека разгледаме втория вариант, когато ширината на централната колона се избира автоматично от браузъра; Пример е следната снимка:
Пример:създайте шаблон на страница с три колони. Използвайте течно оформление на таблицата: - лява колона - 150 пиксела;
- средна колона - 40%;
- дясна колона - 200 пиксела;
Задайте фон за колоните и ги разделете визуално с рамка.
Изпълнение:
| </глава>
<тяло >
<table id = "maket" cellspacing = "0" >
<tr >
<td id = "left" > 1</td>
<td id = "central" > 2</td>
<td id = "right" > 3</td>
</tr>
</таблица>
|
Резултат:
Резултатът ще бъде приблизително същият, само "разтягането" ще се случи поради централната колона.
Използване на вложена таблица в течно оформление
Ако ширината на две колони е зададена в проценти, а на третата в пиксели, няма да можете да се справите само с една таблица. Така че, ако ширината на цялата таблица е 100 процента, първата колона е 200 пиксела, а останалите колони са 20 процента, тогава просто изчисление показва, че размерът на първата колона е 60 процента. В този случай зададената стойност в пиксели няма да бъде приета от браузъра и размерът ще бъде зададен като процент.
- Оригиналната таблица е създадена с две клетки. Ширината на таблицата се задава в проценти.
- За лява клетка(първа колона) е зададена ширина в пиксели.
- Ширина на дясната клетка(основа за други колони) не е посочено. В тази клетка се вмъква втора таблица, също състояща се от две клетки.
- Ширината на вложените клетки на таблицата се задава като процент.
- Ширината на вътрешната маса трябва да бъде зададена на 100 процентатака че тази таблица да заема цялото свободно пространство във външната таблица.
- Ширината на централната и дясната колона се изчислява спрямо ширината на клетката, а не на външната таблица като цяло.
Пример:създайте шаблон на страница с три колони. Използвайте течно оформление с вложена таблица: - лява колона - 150 пиксела;
- средна колона - 60%;
- дясна колона - 40%;
Задайте фона на колоните.
Изпълнение:
|
Атрибутите на маркера cellpadding и cellpacing са необходими тук, за да се гарантира, че няма „празнина“ между таблиците.
Резултат:
здравейте всички И така, сега знаете как да създавате елементарни таблици, състоящи се от толкова редове и колони, колкото е необходимо. Не е лошо, не е лошо. Сега нека поговорим за дизайна на тези маси.
В предишния урок таблиците бяха показани без граници. И, виждате ли, изглежда така-така, дори не можете да го наречете знак. За да направите граници на таблица в HTML, трябва да добавите към тага
атрибут граница, давайки му стойност, различна от нула.
И така, нека направим границите за масата. Например за този, който вече имаме:
| Горна лява клетка | Горна дясна клетка |
| Долна лява клетка | Долна дясна клетка |
Резултат в браузъра:
Как да премахнете границите на таблицата
На свой ред, за да премахнете границите на HTML таблицата, или можете също да кажете, да ги направите невидими, имате нужда от атрибута границазададена стойност 0
. След тези прости стъпки рамката ще бъде премахната.
Атрибутът ви позволява да създавате, но не и да управлявате граници. Позволява ви само да промените дебелината им.
Затова сега ще говорим за CSS, чиито свойства позволяват използването границасъздаване на различни граници, както вътре във всяка клетка, така и външни, около таблицата като цяло.
Нека да разгледаме как да използваме CSS за създаване на външни и вътрешни граници на таблица.
За да направите това, премахнете атрибута border от нашата таблица и добавете стилове:
Примерна таблица
| Горна лява клетка |
Горна дясна клетка |
| Долна лява клетка |
Долна дясна клетка |
Резултат в браузъра:
Сега нека добавим граници и към всяка клетка. За да направите това, просто добавете стилове:
Резултат в браузъра:
Как да премахнете подложката между клетките в HTML таблица
Съгласете се, че границата, определена с използвайки CSS, няма такова външен вид, както бихме искали. Несъмнено от естетическа гледна точка има върху какво да се работи. На страницата на браузъра можете да видите, че по подразбиране той показва границите на таблицата и клетката отделно. Примерът ясно показва това.
Въпреки това е напълно възможно да се отървете от такива граници, които се наричат двойни, ако използвате CSS свойството border-collapse. На практика изглежда така: Таблица (контур: плътен 1px син; border-collapse: collapse; ) ... В резултат на това разстоянието между клетките се премахва:
Стойността на свиване, присвоена на атрибута border, ви позволява да премахвате двойни граници. Както можете да видите, резултатът е свиването на границите на съседни клетки, както и рамките на клетките и рамката на външната таблица. Що се отнася до последното, то може да бъде премахнато напълно. И ако има нужда да го покажете, трябва да увеличите ширината му. По този начин се отървахме от разделителите в таблицата. И в следващия урок ще говорим за това как можете да зададете вертикални и хоризонтални граници. Успех на всички!
Нов
Как да възстановите менструалния цикъл след раждане:
|
|
|
