Позиционирование элементов сайта с помощью таблиц
Web-разработки, реклама и информация
[20-06-2003] Джо
Для позиционирования различных элементов сайта удобно использовать таблицы. В таблицах можно явно задать высоту и ширину ячеек, выравнивание в ячейках (влево, по центру, вправо), соединять ячейки по строкам и по столбцам, использовать вложенные таблицы. Все это позволяет позиционировать элементы сайта на экране с точностью до пикселя.
Для того чтобы задать таблицу, используется примерно такая конструкция:
...
<table width="778" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="100" align="left" valign="top">
</td>
...
<td align="left" valign="top">
</td>
</tr>
...
<tr>
...
</tr>
...
</table>
...
Позиционируемые элементы (текст или картинки) располагаются в ячейках таблицы ( между тегами <td> и </td> )
Здесь:
<tаble></tаble> - задают таблицу;
аттрибуты:
width - ширина таблицы;
border - толщина рамки таблицы;
cellspacing - расстояние между соседними ячейками таблицы;
cellpadding - отступ между внутренней границей ячейки и ее содержимым;
<tr></tr> - задают строку;
<td></td> - задают ячейку;
аттрибуты:
width - ширина ячейки;
height - высота ячейки;
align - выравнивание по горизонтали;
valign - выравнивание по вертикали;
colspan - соединение ячеек в строке;
rowspan - соединение ячеек в столбце.
Иногда, в более сложных случаях, применяют вложенные таблицы.
Наилучший способ изучения способов верстки, на мой взгляд, - взять из интернета какую нибудь простенькую чужую страничку (на narod.ru к примеру), открыть ее в Dreamweaver MX и всласть поиздеваться, меняя вышеуказанные теги и атрибуты. А затем, хорошенько представив себе собственную страничку, попытаться ее заваять. Ну и у меня можно спросить, если конкретный вопрос образовался.
