Web / Методичка по WEB

Vertical-align: top; /* Вертикальное выравнивание в ячейках */

border: 2px solid black; /* Граница вокруг ячеек */

}

TD#leftcol {

width: 200px; /* Ширина левой колонки в пикселах */

}

#maket #footer{

background: #ccc; /* Цвет фона ячеек */

}

</style>

</head>

<body>

<table id="maket" cellspacing="0" cellpadding="0" >

<tr>

<td id="header" colspan="2">Заголовок</td> </tr>

<td id="leftcol">Левая колонка</td>

<td>Правая колонка</td>

</tr>

<tr> <td id="footer" colspan="2">Дно</td> </tr>

</table>

</body>

</html>

Рисунок 7.6 – Табличный макет сайта

Расстояние между колонками регулируется параметром cellpaddingтега <TABLE>. Посколькуcellpaddingопределяет расстояние от границы ячейки до края ее содержимого, то пространство между содержимым разных колонок будет равно удвоенному значению этого параметра. Используя стили, а в частности, атрибутpadding, можно регулировать значение отступа для каждой колонки

Пример. В данном примере значения параметровcellspacingиcellpaddingравны нулю, а расстояние между содержимым колонок определяется аргументомpadding-right, который добавляется к левой ячейке через идентификатор с именемleftcol.

TD#leftcol {

padding-right: 40px; /* Поле справа от текста */

width: 200px; /* Ширина левой колонки в пикселах */

}

Рисунок 7.7 – Табличный макет сайта

Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. Для задания поля со всех сторон:

TD#leftcol {

padding: 5px; /* Поля вокруг содержимого ячеек */

width: 200px; /* Ширина левой колонки в пикселах */

}

Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным, является использование фонового цвета. Лучше указывать цвет через стили, это позволяет вынести оформление страницы в отдельный файл. Стилевое оформление задается параметром background.

Пример.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style type="text/css">

#maket {

width: 100%; /* Ширина всей таблицы в процентах */

border-collapse: collapse; /* Отображать только одинарные линии */

}

#maket #header{

background: #FBF0DB; /* Цвет фона ячеек */

}

#maket TD {

Содержание