Изучаем HTML. Часть 7 — Таблицы

**Admin** Пн Ноя 01, 2010 10:13 pm

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

Будем идти от простого к сложному. Итак, таблицы состоят из строк, которые, в свою очередь, состоят из ячеек. Количество ячеек в разных строках одной таблицы должно быть одним и тем же.

Основные элементы

<TABLE>…</TABLE> — Таблица
<TR>…</TR> — Строка
<TD>…</TD> — Ячейка

Простой пример, таблица 3х3:

Код HTML:
<table>
<tr><td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td>Право</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
</table>У тегов таблицы довольно много параметров. Давайте разделим их на 2 группы: параметры для позиционирования и параметры для внешнего вида. Нигде ни в каких справочниках такого разделения нет, я сделал его для упрощения рассказа.

Параметры для позиционирования.

Для таблицы:

ALIGN — выравнивание таблицы по ширине. Может быть:

left — по левому краю
center — по середине
right — по правому краю
Внимание! Этот параметр определяет только выравнивание самой таблицы относительно остального содержимого страницы, а не выравнивание внутри этой таблицы.

WIDTH и HEIGHT — ширина и высота таблицы. Если для таблицы или её ячеек не заданы размеры (или содержимое не помещается в заданные размеры), то таблица «растягивается» в зависимости от содержимого. Если же размеры указаны, то браузер будет пытаться им следовать. Высота и ширина таблицы (и в дальнейшем её ячеек) может задаваться либо в пикселях, либо в процентах. Если вы используете пиксели, то в качестве значения параметра записывайте просто число без «px». Примеры:

Таблица, растянутая на всю ширину:

Код HTML:
<table width="100%">
<tr><td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td>Право</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
</table>Таблица, шириной 300 пикселей, выровненная по правому краю:

Код HTML:
<table width="300" align="right">
<tr><td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td>Право</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
</table>CELLSPACING — отступы между ячейками. Задается в пикселях, числом, без «px».
CELLPADDING — отсупы внутри ячеек. Задается в пикселях, числом, без «px».

Разница между cellspacing и cellpadding хорошо видна, если для таблицы и её ячеек добавить границу (border). Если cellspacing не равно 0, а cellpadding равно 0, то для каждой ячейки будет «своя» граница, между ячейками будет расстояние, равное cellspacing. Если же наоборот, cellspacing равно 0, а cellpadding не равно 0, то границы ячеек будут прижаты друг к другу, а содержимое ячеек будет отодвинуто от границ на расстояние, равное cellpadding.

Для строки и ячейки:

ALIGN — выравнивание внутри ячеек. Может быть:

left — по левому краю
center — по середине
right — по правому краю
justify — по ширине
VALIGN — выравнивание внутри ячеек по вертикали. Может быть:

top — по верхнему краю
middle — по середине
bottom — по нижнему краю
baseline — по базовой линии шрифта
Внимание! Значение по-умолчанию для вертикального выравнивания — middle, т.е. выранивание внутри ячеек по середине. Не забывайте об этом при верстке таблиц, у которых в разных ячейках разное количество содержимого.

Только для ячеек:

WIDTH и HEIGHT — ширина и высота ячейки. Действуют аналогично ширине и высоте для всей таблицы.

Параметры для внешнего вида

Для таблицы:

BACKGROUND — фоновый рисунок. В качестве значения указывается адрес изображения (абсолютный или относительный). Если размер изображения меньше, чем размер таблицы, то оно повторяется мозаикой.

BGCOLOR — цвет фона таблицы. Как всегда, либо через "#RRGGBB", либо одним из системных названий.

BORDER — толщина рамки вокруг таблицы в пикселях. В качестве значения принимается число без «px». Если не задан параметр bordercolor (см. ниже), то рамка рисуется трехмерной, иначе все зависит от браузера.

BORDERCOLOR — цвет рамки. Некоторые браузеры при задании этого параметра начинают рисовать рамку сплошным цветом, а не в трехмерном режиме.

Тут следует отметить, что разные браузеры по-разному «переносят» значение этих двух параметров с таблицы на её строки и ячейки. Так, в IE запись <table border="3" bordercolor="#ff000">…</table> определяет и границу таблицы, и границу её ячеек, а, к примеру, в FF границы ячеек будут стандартными.

Для строк:

BORDER — толщина рамки вокруг строки в пикселях.
BORDERCOLOR — цвет рамки.

Для ячеек:

BACKGROUND — фоновый рисунок.
BGCOLOR — цвет фона ячейки.
BORDERCOLOR — цвет рамки.

Параметры для строк и ячеек аналогичны параметрам для всей таблицы.

Объединение ячеек

Также, как и в популярных редакторах Word и Excel, ячейки в таблицах можно объединять. Применений этой возможности масса: заголовки для всей таблицы или группы колонок, создание видимости разделения одной ячейки на несколько и другие. Для объединения используется 2 параметра ячеек:

COLSPAN — Количество ячеек, которые надо объединить по горизонтали.
ROWSPAN — Количество ячеек, которые надо объединить по вертикали.

Пример:

Код HTML:
<table>
<tr><td colspan="2">Лево+Верх + Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td rowspan="2">Право<br />Право+Низ</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td></tr>
</table>Как вы видите, я объединил две верхние ячейки по горизонтали и две правые по вертикали. При объединении ячеек «исчезнувшие» ячейки не надо обозначать тегами <td>…</td>, браузер сам поймет, что и как рисовать. Особенно легко запутаться при объединении ячеек по вертикали. Еще пример:

Код HTML:
<table>
<tr><td>Лево+Верх</td><td rowpan="3">Верх + Центр + Низ</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Право</td></tr>
<tr><td>Лево+Низ</td><td>Право+Низ</td></tr>
</table>Как вы видите, во второй и третьей строках я описал только левые и правые ячейки, место под средние ячейки (а точнее под одну большую ячейку) браузер определит сам.

Дополнительные параметры и сведения

Для таблицы можно задать параметр:
COLS — число столбцов в таблице. Считается, что без этого параметра браузер будет рисовать таблицу только после того, как получит всё её содержимое (хотя для того же FF это не так), а при заданном параметре браузер будет заранее подготовлен к тому, что будет в таблице и будет меньше тупить при её выводе. В современном интернете не используется.

Для ячейки можно задать параметр:
NOWRAP — определяет, что текст ячейки нельзя переносить на новые строки. Пример: <td nowrap="nowrap">2009 год</td>. Даже если остальные ячейки будут «давить» на эту своими размерами, её содержимое не будет разделено на 2 строчки.

Ячейки таблицы можно задавать не только тегом <td>…</td>, но и тегом:
<TH>…</TH> — заголовочная ячейка. Отличие заголовочной ячейки от обычной в том, что по-умолчанию текст в ней выравнивается по центру и отображается жирным шрифтом. В остальном она ничем не отличается от обычной. Для заголовочных ячеек можно задавать отдельные параметры стиля, так, в админке чата в дизайнах есть параметр «заголовки таблиц», в котором вы и определяете параметры для заголовочных ячеек.

Для таблицы можно определить заголовок:
<CAPTION>…</CAPTION> — заголовок таблицы. Тег может располагаться только внутри таблицы и должен идти сразу после её открытия. Пример:

Код HTML:
<table>
<caption>Я таблица</caption>
<tr><td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td>Право</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
</table>У заголовка есть 2 параметра, использование которых сильно зависит от браузера. Поэтому заголовки для таблиц лучше не использовать.

ALIGN — выравнивание заголовка относительно таблицы. Значения:

left — В браузере Internet Explorer и Opera располагает заголовок сверху и выравнивает его по левому краю таблицы. В Firefox заголовок располагается слева от таблицы.
right — В браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Netscape параметр игнорируется, а в Firefox заголовок располагается от таблицы справа.
center — Заголовок располагается сверху таблицы по ее центру.
top — Результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
bottom — Заголовок размещается внизу таблицы по ее центру
VALIGN — вертикальное выравнивание заголовка. Используется только в IE. Значения:

top — заголовок перед таблицей.
bottom — заголовок под таблицей.
Строки заголовка, тела и подвала

Структура таблицы, на самом деле, несколько сложнее, чем строки, разделенные на ячейки. Таблицы состоят из: строк заголовка, строк тел (именно тел, а не тела, так как тел может быть несколько) и строк подвала. Эти строки обозначаются тегами:

<THEAD>…</THEAD> — Строки заголовка
<TBODY>…</TBODY> — Строки тела
<TFOOT>…</TFOOT> — Строки подвала

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

Поясню на примере:

Код HTML:
<table>
<thead>
<tr><td>Я буду вверху</td></tr>
</thead>
<tfoot>
<tr><td>Я буду внизу</td></tr>
</tfoot>
<tbody>
<tr><td>Я буду посередине</td></tr>
</tbody>
<tbody>
<tr><td>И я тоже посередине</td></tr>
</tbody>
</table>Если мы не указываем никакой вид блока, а сразу начинаем определять строки и ячейки, то браузер сам за нас определяет всю таблицу как единый блок <tbody>.

Для всех трех блоков имеются следующие параметры:

ALIGN — выравнивание текста внутри ячеек блока.
VALIGN — вертикальное выравнивание внутри ячеек блока.
BGCOLOR — цвет фона ячеек блока.

Единые свойства для колонок нескольких строк

Если у вас не поехала крыша от разных видов блоков, то она поедет сейчас… Дело в том, что строки таблицы можно объединять не видами блоков, а другими тегами:

<COLGROUP> — определяет свойства нескольких колонок таблицы. Тег может служить контейнером для аналогичного тега:
<COL> — определяет свойства одной колонки. (На самом деле можно и не одной, об этом чуть позже).

В случае, если используется связка тегов <COLGROUP> и <COL>, то необходим закрывающий тег </COLGROUP>. Примеры:

Код HTML:
<table rules="groups">
<colgroup width="150">
<colgroup span="9" align="center" width="50">
<col span="5" valign="top">
<col span="4" valign="middle">
</colgroup>
<tr>…</tr>
…
</table>Код HTML:
<table width="400" border="0" cellpadding="5" cellspacing="0">
<col width="150">
<col width="250">
<tr>
<td>Первая ячейка
</td>
<td>Вторая ячейка
</td>
</tr>
</table>Как вы видите, теги абсолютно идентичны, за исключением того, что <COLGROUP> может «делиться» на отдельные <COL>. Прежде, чем описывать все параметры тегов, давайте разберем примеры.
В первом примере для первой колонки задается ширина 150 пикселей, а для следующих девяти ширина в 50 пикселей и выравнивание по центру, из них в пяти вертикальное выравнивание будет по верху, а в остальных четырех — по центру.
Во втором примере задается 2 колонки с шириной 150 и 250 пикселей.

Параметры тегов:
ALIGN — выравнивание содержимого ячеек колонки.
VALIGN — вертикальное выравнивание содержимого ячеек колонки.
SPAN — количество колонок, к которым следует применять параметры.
WIDTH — Ширина колонок.

Частые ошибки, возникающие при использовании таблиц

Довольно часто меня просят разобраться, почему на той или иной стартовой страничке что-то отображается не так, как было задумано автором. Самые часто встречающиеся ошибки:

Попытка вписать текст вне ячеек таблицы.

Пример:
Код HTML:
<table>Я лишний текст
<tr>И я тоже лишний текст
<td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td>Право</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
</table>В примере 2 лишних текста, вставленных вне ячеек таблицы. Где такое содержимое будет отображаться зависит от браузера, но в любом случае такая запись считается ошибочной.

Незакрытые и неправильно закрытые теги.

Так писать нельзя:
Код HTML:
<tr><td>Раз<td>Два<td>Три</tr>И так тоже:
Код HTML:
<tr><td>Я ошибка</tr></td>Лишние ячейки, разное количество ячеек в строках.

Пример:
Код HTML:
<table>
<tr><td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td>Право</td><td>Самое право</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
</table>Обратите внимание, что во второй строке появилась еще одна ячейка. Скорее всего, браузер дополнит первую и третью строки еще одной пустой ячейкой, но если при этом заданы размеры для таблицы и ячеек, поведение браузера предсказать будет трудно.

Использование пустых ячеек.

Собственно, это не является ошибкой, это просто надо знать. Почти все браузеры не применяют стили к ячейке (границы, фон), если в ней ничего нет, т.е. когда ячейка задается так: <td></td>. В этом случае обычно в ячейку добавляют неразрывный пробел: <td> </td>.
Если у вас есть вопросы по таблицам, прошу не стесняться и задавать их в этой теме. Постараюсь ответить.