Таблицы
Если работать только в HTML, стоит верстать сайт при помощи таблиц. Помещенный в соответствующие ячейки контент гарантированно не развалится при просмотре страницы при разном разрешении монитора или в разных браузерах.
Таблица задается тэгом <table>...</table>,
<tr>...</tr> - строчка таблицы,
<td>...</td> - ячейка таблицы.
| 1 ячейка |
2 ячейка |
| 3 ячейка | 4 ячейка |
Вот так выглядит код этой таблицы:
<table bgcolor="#EFE8BA" width="200" border="1" cellspacing="0" cellpadding="5">
<tr>
<td>1 ячейка</td>
<td>2 ячейка</td>
</tr>
<tr>
<td>3 ячейка</td>
<td>4 ячейка</td>
</tr>
</table>
Для тега <table> можно задать следующие атрибуты:
width="n" - ширина таблицы в пикселях или %, по умолчанию ширина таблицы определяется содержимым ячеек;
height="n" - высота таблицы в пикселях или %;
border="n" - толщина границы, по умолчанию n=0 - таблица рисуется без рамки;
bordercolor="#000000" - цвет границ;
bgcolor="#DDAC0" - цвет фона для всей таблицы;
background="picture.gif" - заполняет фон таблицы изображением;
cellspacing="n" - расстояние между рамками ячеек таблицы в px;
cellpadding="n" - расстояние между рамкой ячейки и текстом;
align=center - положение таблицы на странице. По умолчанию таблица прижата к левому краю страницы, допустимые значения center и right;
Еще пример таблицы:
<table border="1">
<tr>
<th height="35" bgcolor="#DC143C" colspan="2">заголовок</th>
</tr>
<tr>
<td height="35" width="120" bgcolor="#FFE4B5"> </td>
<td width="120" bgcolor="#00FFFF"><font color="#0000FF"><center>правый столбец</center></font></td>
</tr>
</table>
Теги <th>...</th> - задают заголовок таблицы, текст внутри этих тэгов будет расположен по центру ячейки и выделен полужирным шрифтом.
Атрибуты, устанавливающие особенности написания шрифта (<b>, <i>, <font size="n">, <font color="#0000FF">) не наследуются. Необходимо повторять условия для каждой ячейки.
Примечание: Если ячейка пустая, то рамка вокруг нее рисоваться не будет. Если рамка нужна, то в ячейку надо ввести символьный объект неразрывный пробел (обязательно должен набираться строчными буквами и закрываться точкой с запятой). Ячейка по-прежнему будет пуста, но рамка прорисуется.
Атрибуты, применяемые для строк и ячеек:
align=center - горизонтальное выравнивание текста в ячейках строки;
valign=center - вертикальное выравнивание текста в ячейках строки. Может быть top (по верхнему краю), center (по центру - это значение принимается по умолчанию), bottom (по нижнему краю);
bgcolor="#00FFFF" - цвет фона строки или ячейки;
background="picture.gif" - заполняет фон строки или ячейки изображением.
Атрибуты, применяемые только для ячеек:
width="n" - ширина ячейки;
height="n" - высота ячейки;
colspan="n" - объединяет ячейки по горизонтали;
rowspan="n" - объединяет ячейки по вертикали;
nowrap - показывает, что текст должен размещаться в одну строку.
Если вы верстаете в таблице:
Каждый горизонтальный блок по возможности надо заключать в отдельную таблицу. Чем больше отдельных таблиц, тем лучше.
В этом случае:
Браузер будет показывать таблицы по мере загрузки. Если же все поместить в одну таблицу, то браузер покажет странице только после завершения загрузки всего кода. Визуально будет казаться, что страница загружается быстрее.
Каждую таблицу можно настроить для конкретного блока. Например, первый блок можно сверстать таблицей из трех колонок, а второй - из пяти. Если же использовать одну таблицу, то придется и первый, и второй блок верстать с помощью пяти колонок.
