Целта на урока:Запознаване със свойствата на таблицата и принципите на CSS оформление на таблици

Нека да разгледаме основните свойства на CSS таблицата

граница

Имотът се разглежда в едно и включва няколко имота едновременно:

• ГРАНИЧЕН СТИЛ
• ГРАНИЦА-ШИРИНА
• ГРАНИЦА-ЦВЯТ

Съществува и колективно правило:

table.collapse (сгъване на границата: срив;) таблица.отделно (сгъване на граница: отделно;)

Резултат:

ширина и височина
(височина и ширина на масата)

Стойности:

Пример:

подравняване на текст
(хоризонтално подравняване)

Стойности:

• център (центриран)
• ляво (подравнено вляво)
• дясно (подравнено вдясно)
• обосновавам (ширина)

вертикално подравняване
(вертикално подравняване)

Стойности:

• базова линия (базова линия)
• под (като субиндекс)
• супер (като горен индекс)
• отгоре (отгоре)
• среден (среден)
• отдолу (отдолу)
• % (от височината на разстоянието между редовете)

Пример:

подплънки
(подложка за маса)

цвят на фона (фон)
цвят (цвят на текста)

CSS оформление на таблицата

Поради големия брой свойства на таблици и вариации в техния дизайн, таблиците отдавна са стандарт за оформлението на уеб страници. Ако направите границите на таблицата невидими, тогава можете да използвате отделните й клетки като отделни блокове на страницата: заглавка, меню, долен колонтитул и т.н.

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

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

Оформление на електронна таблица с две колони

Един от най -често срещаните методи за оформление са две колони, т.е. страницата е разделена на две части.

Обикновено лявата страна е менюто и допълнителните елементи, а дясната е основната за основното съдържание.

В този случай ширината на лявата страна е зададена на определена стойност, т.е. трудно, а дясната страна заема останалата част от страницата.

В този случай трябва да зададете общата ширина на цялата таблица (етикет на таблица) в проценти чрез свойството width (100%), а за първата клетка (td tag) задайте ширината (също и свойството width) в пиксели или процент.

Пример:задайте основната рамка на страницата в две колони: първата - с фиксиран размер, втората - за останалата част от областта на браузъра. Изпълнете задачата, като използвате CSS стилове ()

Производителност:

</ глава> <тяло> <таблица id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "right"> 2</ td> </ tr> </ таблица> ...

1

2

...

Резултат:

Сега нека се опитаме визуално да отделим двете колони на таблицата една от друга.

Пример:задайте различен фон на клетките (за отделяне на две колони една от друга) и задайте разстоянието между колоните (разделител)

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

/ * за лявата клетка * / td # ляво (ширина: 200px; фон: #ccc; граница: 1px плътно черно; / * временно маркирайте границите * /) / * за дясната клетка * / td # дясно (фон: # fc3; рамка: 1px плътно черно; / * временно обозначава граници * /) / * за разделител * / #razdel (ширина: 10px; / * Разстояние между колони * /)

Заедно:

</ глава> <тяло> <таблица id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "razdel"> <td id = "right"> 2</ td> </ tr> </ таблица>

1

2

За разделителя е добавена нова клетка.
Резултат:

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

Пример:направете разделител между колони на таблица, използвайки пунктираната граница на съседни клетки

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

/ * за лявата клетка * / td # ляво (ширина: 200px; фон: #ccc; / * Цвят на фона на лявата колона * / / * нов * / граница вдясно: 1px прекъснат # 000; / * Опции за десни пунктирани граници * / )

Заедно:

</ глава> <тяло> <таблица id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "right"> 2</ td> </ tr> </ таблица>

1

2

Резултат:

Оформление на електронна таблица с три колони

Съществува концепция за фиксирано или "флуидно" оформление.

CSS с фиксирано оформление

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

Пример:създайте шаблон на страница с три колони. Използвайте фиксирано оформление на таблицата:

• лява колона - 150 пиксела;
• средна колона - 400 пиксела;

Производителност:

</ глава> <тяло> <таблица id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ таблица>

1

2

3

Резултат:

Каучуков макет

• Ширина на масатапри използване на "гумения" дизайн зададено в% от ширината на прозореца на браузъра... Че. когато прозорецът на браузъра се промени, размерът на таблицата също се променя.
• Ширина на всички клеткиможе да се инсталира в проценти.
• Вторият вариант е кога ширина на някои клеткие установено в проценти, а някои в пиксели.

Важно:Сумата от ширините на всички колони трябва да бъде 100%, независимо от ширината на таблицата.

Пример:

• лява колона - 20%;
• средна колона - 40%;
• дясна колона - 40%;

Задайте фона на колоните и визуално разделете колоните с рамка.

Производителност:

</ глава> <тяло> <таблица id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ таблица>

1

2

3

Резултат:

Помислете за втората опция, когато ширината на централната колона се избира автоматично от браузъра; пример е картината:

Пример:създайте шаблон на страница с три колони. Използвайте плавно оформление на таблицата:

• лява колона - 150 пиксела;
• средна колона - 40%;
• дясна колона - 200 пиксела;

Задайте фона на колоните и визуално разделете колоните с рамка.

Производителност:

</ глава> <тяло> <таблица id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ таблица>

1

2

3

Резултат:
Резултатът ще бъде приблизително същият, само "разтягането" ще се случи поради централната колона.

Използване на вложена таблица в плавно оформление

Ако ширината на две колони е зададена в проценти, а третата в пиксели, няма да можете да се справите с една таблица. Така че, ако ширината на цялата таблица е 100 процента, първата колона е 200 пиксела, а останалите колони са 20 процента, тогава просто изчисление показва, че размерът на първата колона е 60 процента. В този случай браузърът няма да приеме посочената стойност в пиксели, а размерът ще бъде зададен в проценти.

• Оригиналната таблица е създадена с две клетки. Ширината на таблицата е зададена като процент.
• За лявата клетка(първа колона) е зададена ширина в пиксели.
• Ширина на дясната клетка(основа за други високоговорители) неопределено... Вътре в тази клетка се вмъква втора таблица, състояща се също от две клетки.
• Ширината на клетките на вложената таблица е зададена като процент..
• Вътрешната ширина на масата трябва да бъде зададена на 100 процентатака че тази таблица заема цялото свободно пространство във външната маса.
• Ширините на централната и дясната колона са спрямо ширината на клетката, а не към външната таблица като цяло.

Пример:създайте шаблон на страница с три колони. Използвайте флуидно оформление с вложена таблица:

• лява колона - 150 пиксела;
• средна колона - 60%;
• дясна колона - 40%;

Задайте фона на колоните.

Производителност:

1 2 3 Атрибутите на маркера клетъчно добавяне и разпределение на клетките са необходими тук, така че да няма "празнина" между таблиците. Резултат: Указва разстоянието между границите на клетките в таблицата. Атрибутът на границата между интервали не работи, когато таблицата е сгъната на границата, зададена за свиване. Синтаксис разстояние между границите: стойност [стойност] Аргументи Една стойност задава както вертикалното, така и хоризонталното разстояние между границите на клетката. Ако има два аргумента, тогава първият определя хоризонталното разстояние, а вторият определя вертикалното разстояние. 1 2 3 4 Резултатът от този пример е показан на фиг. 1. Ориз. 1. Прилагане на параметъра за гранично разстояние Забележка Ако етикетът се добавя параметърът за разпределение на клетките, след което при използване на атрибута стил на гранично разстояние не се взема предвид и стойността на разстоянието между клетките се игнорира. Изключение от това правило е Internet Explorer, който изобщо не разбира собствеността на границата. Таблици border-crash задава как да се показват граници около клетките на таблицата. Този параметър играе роля, когато за клетките е зададена граница, тогава ще се получи линия с двойна дебелина на кръстопътя на клетките. Добавянето на стойността на свиването принуждава браузъра да анализира такива места в таблицата и да премахне двойните редове в нея. оформление на таблица определя как браузърът трябва да изчислява височината и ширината на клетките на таблицата въз основа на съдържанието им. border-spacing задава разстоянието между границите на клетките в таблицата. Атрибутът на границата между интервалите не работи, когато таблицата е сгъната на границата, зададена за свиване. CSS ви позволява да зададете не само стила на границата на таблицата, но и стила на границите на отделните клетки. Тъй като всяка клетка има свои собствени граници, границата между съседните клетки се удвоява. Но е възможно да се комбинират границите на съседните клетки в една. За това има имот за срутване на границата. Той приема стойностите: border -Collapse: отделно - всяка клетка има своя собствена граница (по подразбиране) граница -колапс: колапс - общата граница border -kolaps: наследяване - стойността се взема от родителския елемент Например, нека да създадем таблица и да зададем рамка за клетките на всички таблици, които ще бъдат на страницата. Първо, нека не променяме нищо, за да видим как ще изглежда таблицата: Стил: 1 2 3 4 5 6