Vertical-align: top; /* Выравнивание по верхнему краю ячейки */
}
#col1 {
width: 100px; /* Ширина первой колонки */
background: #fc0; /* Цвет фона первой колонки */
}
#col2 {
width: 60%;
background: #afccdb; /* Цвет фона второй колонки */
}
#col3 {
width: 40%; /* Ширина третьей колонки */
background: #fc0; /* Цвет фона третьей колонки */
}
#col1, #col2, #col3 {
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="col1">Колонка 1 </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="col2">Колонка 2</td>
<td id="col3">Колонка 3</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Рисунок 7.17 – Табличный макет. Применение вложенных таблиц
При создании подобного макета следует принимать во внимание следующие моменты:
Ширина внутренней таблицы должна быть задана как 100%, чтобы эта таблица занимала все свободное пространство.
Для того чтобы ячейки плотно прилегали друг к другу, для внешней таблицы необходимо обнулить значение параметров cellpadding и cellspacing. Поля можно устанавливать через атрибут padding.
Ширина второй и третьей колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом. Поэтому значение 60% в примере следует расценивать не как ширину колонки относительно всего макета, а лишь как ширину относительно внутренней таблицы.
7.6 Применение таблиц для создания рамок
Таблицы могут использоваться не только для добавления колонок или выравнивания элементов веб-страницы, но и для создания различных дизайнерских изысков вроде декоративной рамки или тени. Причем их легко можно приспосабливать под любой макет, поскольку ширину таблицы можно устанавливать и в процентах и в пикселах.
Для создания желаемой рамки ее вначале следует нарисовать в каком-нибудь графическом редакторе. Хотя конечная ширина рамки на веб-странице может варьироваться в больших пределах, например, в случае использования резинового макета, размер уголков остается постоянным. Поэтому при создании изображения следует в первую очередь ориентироваться именно на уголки.
Рисунок 7.18 – Макет декоративной рамки с номерами рисунков.
Теперь изображение рамки необходимо разрезать на девять фрагментов (смотри рисунок 7.18).
Таблица 7.1 – Рисунки, необходимые для создания рамки
|
Рисунок |
Положение |
Имя файла |
|
|
Левый верхний угол |
01.gif |
|
|
Верхняя горизонтальная линия |
02.gif |
|
|
Правый верхний угол |
03.gif |
|
|
Левая вертикальная линия |
04.gif |
|
|
Правая вертикальная линия |
06.gif |
|
|
Левый нижний угол |
07.gif |
|
|
Нижняя горизонтальная линия |
08.gif |
|
|
Правый нижний угол |
09.gif |
После создания нужных фрагментов формируем таблицу размером 3х3 ячейки.
Рисунок 7.19 – Макет таблица для создания рамки
Ширина самой таблицы может задаваться как в пикселах, так и процентах, от этого в итоге зависит размер рамки. А вот ширина и высота крайних ячеек должна совпадать с размерами соответствующих рисунков – уголков, вертикальных и горизонтальных линий и устанавливаться в пикселах. Также в этой таблице параметры border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой.
Пример.
<p>Пример задания декоративной рамки вокруг ячеек.</p>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="13" width="12"><img src="01.gif" width="12" height="13"></td>
<td background="02.gif" height="13"></td>
<td height="13" width="14"><img src="03.gif" width="14" height="13"></td>
</tr>
<tr>
<td background="04.gif"></td>
<td>Содержимое</td>
<td background="06.gif"></td>
</tr>
<tr>
<td height="13"><img src="07.gif" height="13"></td>
<td background="08.gif"></td>
<td height="13"><img src="09.gif" height="13"></td>
</tr>
</table>
с