Создание таблиц в HTML

Тэги table и /table, являются началом и концом таблицы.Строки таблицы начинаются открывающимся тэгом tr и заканчивается закрывающим тэгом /tr, а каждая ячейка (столбец) таблицы начинается тегом td и заканчивается /td.

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

Где А,В,С -столбцы, 1,2-строчки:

Как видим, таблица вроде и ничего, но нехватает рамочки. Добавим параметр BORDER="1" в тэг table, по умолчанию, этот параметр =0, поэтому рамочки и не видно. Ну а число в кавычках обозначает толщину рамки. Ну и заодно попробуем изменить фон таблички добавив к тэгу table параметр bgcolor="#336699"

Рамочка появилась, причем нужной нам толщины. Да и фон у таблички появился. Добавим параметр bordercolor="#FF00CC"в тэг table. с рамочкой нужного нам цвета. И заодно добавим параметры bgcolor="#336699" и bgcolor="#FFCC33" соответсвенно в теги tr первой и второй строки, не убирая уже добавленный параметр bgcolor="#336699" в тэге table. Получим таблицу

Получили рамочку заданного цвета и два фона, разных для каждой строки таблицы. Значит фон заданный в строке таблице имеет приоритет, над фоном, заданным для всей таблице.

Следуя логике, изменить длину строки невозможно, ну а вот ее высоту вполне реально, добавим в тэг tr первой строки параметры height="35" width="300", ну и попробуем добавить в тэг td параметр bgcolor="#FFCC33" и bgcolor="#336699" оставив, остальной HTML - код без изменений./p>

А1	Б1	С1
А2	В2	С2

Убедились, что фон ячейки имеет приоритет, над заданным цветом фона в строке и таблице. Для проверки параметра valign добавим в тег tr второй строки параметр height="35", что бы строки стали одной высоты. Теперь попробуем в первой строке задать параметр valign="top" (выравнивание по высоте), а в нижней valign="bottom" По умолчанию valign="center" , выравнивание по высоте, по центру. Может принимать значения:

• valign="top" - выравнивание по верху
• valign="center" - выравнивание по центру
• valign="bottom" - выравнивание по низу
• valign="middle" - выравнивание по высоте

Получается, параметром valign можно выровнять текст по высоте в каждой строчке и ячейке, при добавлении его в тэг table никакого выравнивания по высоте не происходит. Ну а параметром align можно задать положение таблицы на экране, по умолчанию слева и выровнять текст в ячейкаах, по умолчанию выравнивает текст в ячейках по левому краю. Добавим в тег table, параметр align="CENTER", увеличим ширину ячеек, добавив в тэги td первой строки параметр width="40", что бы визуально увидеть выравнивание текста. Добавим в тэг tr второй строки параметр align="CENTER". После добавлений в пример предыдущего HTML-кода, таблица примет вид:

Как видим, параметр align, выровнял как таблиц, так и текст. Параметр align может принимать следующие значения: LEFT (по левому краю); RIGHT ( по правому краю); CENTER (по центру)

Для добавления заголовка таблицы в HTML-код таблицы необходимо добавить, после тэга table такую строчку CAPTION ALIGN="RIGHT">Заголовок таблицы/CAPTION> где CAPTION - тэг для заголовка, ну а параметр ALIGN, задает расположение заголовка:

• align="top" - заголовок, над таблицей по центру (значение по умолчанию)
• align="LEFT" - над таблицей слева
• align="RIGHT" - над таблицей справа
• align="bottom" - заголовок, под таблицей по центру

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

Хотелось юы, отметить, что толшину внутренних рамок таблицы изменитья нельзя, а вот их цвет - возможно, если добавить параметр bordercolor="#нужный цвет", в тэги строчек или ячеек.

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

• FRAME="ABOVE" - только граница сверху.
• FRAME="BELOW" - только граница снизу.
• FRAME="HSIDES" - только границы сверху и снизу.
• FRAME="VSIDES" - только границы слева и справа
• FRAME="LHS" - только границы сверху и снизу.
• FRAME="RHS" - только границы слева и справа

А вот параметр RULES, управляет окантовкой ячеек и может принимать, следующие значения:

• RULES="GROUPS" - линии будут только между группами рядов..
• RULES="BELOW" - только граница снизу.
• RULES="ROWS" - только между рядами..
• RULES="COLS" - только между колонками.

Попробуем добавить, в тэг table, параметры FRAME="HSIDES" и RULES="COLS". Получится вот такая таблица:

Осталось еще два параметра для построения таблицы. COLSPAN Растягивание ячейки по горизонтали. ROWSPAN - Растягивание ячейки по строке. Причем эти параметры должны быть равны целому чилу, то есть числу столбцов или строк на которые мы хотим растянуть ячейку. Параметры эти записываются в тэге td.
Попробуем Растянуть первую ячейку на 2 столбца:

Как видим, третья ячейка в третей строке как бы стала лишней

• 2011 Ноябрь
• 2011 Декабрь
• 2012 Март