6.5. линия между колоните

Можете да разделяте колони не само като използвате цвета на фона и бялото пространство, но и като добавите линия между колоните. Тук отново са полезни стиловете, с помощта на които създаването на линии е значително опростено. Трябва само да зададете атрибутаborder-leftза дясната колона илиborder-rightза лявата (tabl_verstka_11.html).

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

Ориз. 8. Линия между колоните

7. Оформление с три колони

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

7.1. Ширина на колоната в пиксели

Ширината на различните колони зависи от използваното оформление - фиксирано или течно. При оформление с фиксирана ширина общата ширина на таблицата се определя в пиксели и остава постоянна независимо от разделителната способност на монитора и размера на прозореца на браузъра. Също така има смисъл да зададете ширината на отделните колони в пиксели. В следващия пример ширината на оформлението е зададена на 750 пиксела, а колоните съответно на 150, 400 и 200 пиксела (tabl_verstka_12.html).

7.2. Процент ширина на колоната

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

ширината на всички клетки се задава като процент;

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

В първия случай ширината на цялата таблица първо се задава като процент, а след това ширината на отделните клетки (tabl_verstka_13.html). Освен това общо ширината на клетките трябва да бъде 100%, въпреки факта, че размерът на таблицата може да е различен. Въпросът е, че ширината на масатасе изчислява спрямо наличното пространство на уеб страницата, а размерът на клетките се задава спрямо цялата таблица като цяло.

За удобство при промяна на външния вид на колони, параметрите в този пример са прехвърлени към стилове.

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

7.3. Комбинация от проценти и пиксели

Нека разгледаме две основни опции, когато процентите и пикселите се използват едновременно за задаване на ширината на колоните. Първият вариант е размерът на външните колони да се задава в пиксели, а ширината на средната колона да се изчислява автоматично на базата на зададената ширина на таблицата (фиг. 9).

Ориз. 9. Ширината на средната колона се определя от браузъра

За да създадете такова оформление, ви е необходима таблица с три клетки. Задаваме ширината на първата и третата клетка в пиксели и съзнателно не задаваме ширината на средната клетка (tabl_verstka_14.html). В този случай е наложително да се определи общата ширина на цялата маса.

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

На фиг. 10 показва оформлението на вложени таблици една спрямо друга.

Ориз. 10. Използване на вложени таблици

Първо създаваме таблица с зададен размер и две клетки. Лявата клетка ще действа като първа колона и за нея задаваме необходимата ширина в пиксели. Ние не определяме ширината на дясната клетка, така че тя ще заеме останалото пространство и ще служи като рамка за други колони. Вътре в тази клетка добавяме втора таблица, също състояща се от две клетки. И вече за тях ние определяме ширината като процент (tabl_verstka_15.html).

---