Таблицы.

Таблицы являются очень удобным инструментом, который помогает в оформлении web-страниц. Вы сможете преодолевать пространственные ограничения при верстке содержания страницы. Одним словом таблицы позволят размещать нужные вам объекты в нужном месте.
Для начала научимся создавать таблицы.

<TABLE> </TABLE> - теги, объявляющие начало и конец таблицы. В данном примере, для того, чтобы настроть таблицу, используются следующие атрибуты тега <TABLE>:

border="ширина" - ширина боковой грани таблицы в пикселях (px можно не указывать), для невидимой рамки border="0".
cellpadding="ширина" - при задании этого атрибута между рамкой таблицы и данными всегда сохраняется определенное растояние. Это помогает сделать текст в ячейке более удобным для чтения.
cellspacing="ширина" - ширина фронтальной грани таблицы. Если значение этого атрибута равно нулю, рамка получается тонкой.
bordercolor="цвет" - задает цвет рамки таблицы.
width="ширина" height="высота" - задание, соответственно, ширины и высоты таблицы в пикселях или процентах.
bgcolor="цвет" - цвет фона таблицы или ячейки, в зависимости от того, где указан.

Неполенитесь поизменять значения этих атрибутов, чтобы разобраться в принципе их работы!

Этот пример иллюстрирует тот факт, что в ячейках может находится любая информация: текст, ссылки (как в примере выше), другие таблицы или картинки (см. 4-й пример).

Теперь нужно запомнить очень важный момент.
Между тегами <TABLE> </TABLE> (которыми мы объявили таблицу) распологаются теги <TR> </TR>, которые объявляют строку в таблице. А уже между тегами <TR> </TR> пишем теги <TD> </TD>, которые объявляют ячейку в строке. Именно в ячейку вставляется какое-либо содержание.
Звучит несколько запутанно, но этому стоит уделить внимание, поскольку для начинающих именно таблицы в HTML становятся "камнем преткновения", но в то же время ни один современный сайт не делается без их использования.

Между тегами <TR> </TR> вы можете (с помощью <TD> </TD>) вставлять сколько угодно ячеек.
Но следует помнить, что во всех строках таблицы должно находится одинаковое количество ячеек! Попробуйте вставить еще одну ячейку во вторую строку нашей таблицы.




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

Для создания строк с разным количеством ячеек следует пользоваться следующим принципом.

Этот код очень похож на предыдущий за исключением нескольких нюансов. Во-первых, на этом примере хорошо видно, как помогают комментарии в программировании. Стоит только представить как вы будете разбираться без комментариев в программе, где не 2, а, например, 10 таблиц с десятками строк в каждой. В тексте программы подчеркнуты два места. Именно они являются теми "принципами", которые позволяют объединять ячейки.
colspan="количество_ячеек_по_горизонтали" - это атрибут тега <TD>. Он объединяет в одну ячейку несколько, расположенных по горизонтали. В данном примере с помощью этого атрибута мы создали ячейку, которая объединила в себе две ячейки.
rowspan="количество_ячеек_по_вертикали" - этот атрибут объединяет в одну ячейку несколько ячеек расположенных по вертикали. Можно сказать, что он объединяет ячейки разных строк.

Для того, чтоб вы смогли лучше разобраться с работой этих атрибутов рассмотрим еще один пример.

А вот пример мозаичного рисунка, и картинок в таблицах:

Слева и справа показан один и тот же рисунок, одинаково разрезан и помещен в одинаковые таблицы, просто в левом варианте атрибуты таблицы: border="0" cellpadding="0" cellspacing="0",
а в правом - border="2" cellpadding="0" cellspacing="0". Этот и следующий примеры иллюстрирует как можно с помощью таблицы создавать интересный дизайн страниц.



В этом примере в таблице размещен текст и картинка. Атрибуту cellpadding присвоено значение 5 для того, чтобы между текстом и картинкой был отступ. Содержание таблицы выровняно по верхнему краю атрибутом valign="top". Для изображения атрибуту border присвоено 1, чтобы была рамка вокруг изображения. Это отделянт его от фона.

Именно на принципе мозаичного рисунка создают таблицы для оформления веб страниц. Об этом речь пойдет в следующей главе.

ПОДВОДИМ ИТОГИ.     Справочник тегов. <TABLE> • Определяет начало и конец таблицы. • Синтаксис     <TABLE>...</TABLE> • Совместимость     NN 2.0+ • MSIE 2.0+; • Opera 3.0+; • HTML 4.0; • Атрибуты     align = <left|right|center> — выравнивает таблицу. Этот атрибут отклонен в W3C спецификации.     background = <url> — определяет путь к файлу фона таблицы.     bgcolor = <цвет> — определяет цвет фона таблицы.     border = <размер> — определяет размер (в пикселах) границы(рамки) вокруг таблицы и ее элементов .     cellpadding = <размер> — определяет растояние (в пикселах) между внутреней границей ячейки и ее содержанием.     cellspacing = <размер> — определяет растояние (в пикселах) между ячейками таблицы.     width = <размер> — определяет ширину таблицы (в пикселах или процентах).     height = <размер> — определяет высоту таблицы (в пикселах или процентах). <TR> • Определяет строку ячеек в таблице. • Синтаксис     <TR>...</TR> • Совместимость     NN 2.0+ • MSIE 2.0+; • Opera 3.0+; • HTML 4.0; • Атрибуты     align = <left|right|center> — выравнивает текст во всех ячейках данной строки. Этот атрибут отклонен в W3C спецификации.     valign = <top|middle|bottom|baseline> — выравнивает текст во всех ячейках данной строки по вертикали.     background = <url> — определяет путь к файлу фона данной строки таблицы. Этот атрибут поддерживается только MSIE 2.0+.     bgcolor = <цвет> — определяет цвет фона данной строки таблицы. <TD> • Определяет строку ячеек в таблице. • Синтаксис     <TD>...</TD> • Совместимость     NN 2.0+ • MSIE 2.0+; • Opera 3.0+; • HTML 4.0; • Атрибуты     align = <left|right|center> — выравнивает текст в данной ячейке. Этот атрибут отклонен в W3C спецификации.     valign = <top|middle|bottom|baseline> — выравнивает текст в данной ячейке по вертикали.     background = <url> — определяет путь к файлу фона данной ячейки.     bgcolor = <цвет> — определяет цвет фона данной ячейки.     colspan = <размер> — определяет число столбцов, которые данная ячейка должна охватывать.     rowspan = <размер> — определяет число строк, которые данная ячейка должна охватывать.     height = <размер> — определяет высоту ячейки в пикселах или процентах, относительно высоты таблицы. Этот атрибут неодобрен в W3C спецификации.     width = <размер> — определяет ширину ячейки в пикселах или процентах, относительно ширины таблицы. Этот атрибут неодобрен в W3C спецификации.     nowrap — отключает автоматический перенос текста для данной ячейки.