HTML-EXPRESS.COM ПРЕДСТАВЛЯЕТ ...

Краткое введение в HTML - Таблицы

Для описания таблиц существует несколько групп тэгов. Важно понимать, что в таблицах отдельно прописываются свойства самой таблицы, свойства строки и свойства ячейки. Чтобы создать таблицу, нужно произвести следующие действия:

• Описать саму таблицу: ширину границ и их цвет, ширину отсупа от полей таблицы и т.д;

• Создать (описать) строку и определить ее свойства;

• В пределах созданной строки создать необходимое количество ячеек, описать их свойства.

Именно здесь и начинается заполнение таблиц необходимой информацией, то есть вся она (информация) помещается в ячейки.

Разберем в указанном выше порядке все необходимые тэги и их параметры.

• Тэги описания таблицы: <TABLE> - </TABLE>. Внутри этих тэгов содержаться описания строк и ячеек.

• Тэги описания строки таблицы: <TR> - </TR>. Внутри этих тэгов содержаться описания ячеек.

• Тэги описания ячеек: <TD> - </TD>. Внутри этих тэгов содержиться вся информация, помещаемая в таблицу.

Параметры тэга <TABLE>

align="center" - выравнивание самой таблицы относительно HTML документа

border="1" - ширина (толщина) обрамления таблицы, то есть линии, ее ограничивающей. При указании значение border=0 видимое обрамление у таблицы отсутствует.

bordercolor="red" -  цвет обрамляющей линии.

bgcolor="blue" - цвет фона таблицы.

background="../images/back.gif" - фоновый рисунок таблицы.  

cellpadding="2" - Расстояние отступа содержания ячеек от краев таблицы. 

cellspacing="3" - Расстояние отступа ячеек между собой.  

width="20" - ширина таблицы. Может указываться в пикселах (width="150") или в процентах от ширины экрана (width="50%"). 

height="100%" - высота таблицы. Также как и ширина может указываться в пикселах и в процентах.

Параметры тэга <TR>

align="center" - выравнивание содержимого ячеек во всей строке

valign="" - Вертикальный способ выравнивания.Варианты:

valign="bottom" - выравнивание по нижнему краю

valign="middle" - вертикальное выравнивание по центру

valign="top" - выравнивание по верхнему краю. 

bgcolor="" - Этот параметр определяет цвет по умолчанию всех ячеек, которые будут созданы в данной строке.

Параметры тэга <TD>

Тэг <TD> имеет довольно много общих параметров с тэгами <TR> и <TABLE>.

align="right" - выравнивание данных внутри ячейки.

background="../images/back.gif" - определяет адрес рисунка, который будет использоваться в качестве фона для данной ячейки.

bgcolor="#000000" - фоновый цвет данной ячейки. Это конечный вариант определения цвета, если ранее цвет был определен в тэге TABLE или TR, то для данной ячейки он переопределиться. 

height="70%" - высота ячейки. Также как и в случае с тэгом table, может быть указана в писелах и в процентах.

width="300" - ширина ячейки. 

valign="bottom" - вертикальное выравнивание данных внутри ячейки. 

Пример таблицы с использованием некоторых вышеописанных параметров:

<table border="1" width="100%" bgcolor="#FFFFFF"> <tr height="30"> <td width="33%" valign="middle" align="left"> <p> Содержание ячейки слева </td> <td width="34%" valign="middle" align="center" bgcolor="#C0C0C0"> </td> <td width="33%" valign="middle" align="right"> </td> </tr> <tr height="40"> <td width="33%" valign="middle" align="left" bgcolor="#000000"> </td> <td width="34%" valign="middle" align="center"> <p> Содержание ячейки в центре </td> <td width="33%" valign="middle" align="right" bgcolor="#000000"> </td> </tr> <tr height="30"> <td width="33%" valign="middle" align="left"> </td> <td width="34%" valign="middle" align="center" bgcolor="#C0C0C0"> </td> <td width="33%" valign="middle" align="right"> <p> Содержание ячейки справа </td> </tr> </table>