Синтаксис таблиц в HTML

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

При использовании таблиц в HTML всегда используются три парных тэга:

<table>Здесь располагается вся таблица</table>

<tr>Здесь располагается строка таблицы</tr>

<td>Здесь располагается ячейка таблицы</td>

Ячейки <td>...</td> должны располагаться внутри строк <tr>...</tr>, а сами строки должны располагаться внутри таблицы <table>...</table>. Внутри таблицы может быть несколько строк, а внутри строки может быть несколько ячеек.

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

Кроме обязательных элементов <tr>...</tr> и <td>...</td> внутри таблицы могут располагаться еще и необязательные элементы: <th>...</th> и <caption>...</caption>.

Ячейка заголовка таблицы <th>...</th> (Table Header) всегда имеет ширину всей таблицы, то есть используется вместо элемента строки <tr>...</tr>. Текст в такой ячейке всегда имеет атрибут bold (жирный) и align="center" (расположен по центру). А так, в принципе, это обычная ячейка.

Ячейка названия таблицы или подписи <caption>...</caption> всегда имеет по умолчанию атрибут align="top", то есть заголовок таблицы ставится сверху таблицы. Если явно указать align="bottom", то это будет подпись внизу таблицы. Текст в подписи или заголовке всегда центрирован по ширине таблицы, но в некоторых браузерах можно задать align="left" и align="right". Тогда текст будет прижат к левому или правому краю, но располагаться сверху от таблицы. Но некоторые браузеры эти атрибуты понимают так, что располагают, заголовок слева или справа от самой таблицы со смещением таблицы так, что часть ее уходит куда не надо. Сами тэги <caption> и </caption> всегда располагаются внутри таблицы (хотя их содержимое и выводится за пределами таблицы) сразу после тэга <table>, но не внутри строк.

Тэг <table> может содержать следующие атрибуты:
border="n"	Толщина рамки. По умолчанию, если border отсутствует, всегда считается, что n=0, то есть рамки нет.
bordercolor="#FFFFFF"	Цвет рамки. Выражается шестнадцатеричным числом или названием цвета, если за цветом зарезервировано свое название. По умолчанию, если bordercolor отсутствует, то считается, что его значение равно FFFFFF (белый цвет).
bgcolor="#FFFFFF"	Цвет фона всей таблицы. Выражается шестнадцатеричным числом или названием цвета, если за цветом зарезервировано свое название. По умолчанию, если bgcolor отсутствует, то считается, что его значение равно FFFFFF (белый цвет).
background="picture.jpg"	Заполняет фон таблицы изображением из файла picture.jpg
align="left"	Расположение таблицы на страницы. По умолчанию, при отсутствии align, считается, что align принимает значение left, то есть таблица прижата к левому краю. Может принимать значение center (таблица расположена в центре) и right (таблица прижата к правому краю).
width="n"	Задает явную ширину таблицы. Параметр n может быть просто числом и тогда считается, что это пикселы или может быть числом со знаком % и тогда считается, что ширина таблицы задана в процентах. По умолчанию, когда нет атрибута width, ширина таблицы зависит от содержимого ячеек.
cellspacing="n"	Расстояние между рамками ячеек таблицы. Параметр "n" задается в пикселах.
cellpadding="n"	Расстояние между рамками ячеек таблицы и элементами внутри ячеек (текст, картинки и т.п.). Параметр "n" задается в пикселах.
frame="void"	Внешняя окантовка таблицы. Атрибут принимает значения: void - окантовки нет (по умолчанию) above - граница сверху bellow - граница снизу hsides - граница и сверху и снизу lhs - граница слева rhs - граница справа vsides - граница и слева и справа border или box - граница со всех четырех сторон
rules="n"	Наличие линий, разделяющих ячейки таблицы. Параметр n может принимать значение: none - нет линий (по умолчанию) groups - линии между группами рядов rows - линии между рядами cols - линии между колонками all - линии между всеми рядами и колонками.

Внутри каждой строки <tr>...</tr> должно быть число ячеек <td>...</td> равное количеству столбцов в таблице. Если их будет меньше, то в конце строки таблицы браузер отобразит пустые ячейки. Это справедливо, кроме случая объединения нескольких ячеек в одну при помощи атрибута colspan.

Тэги <tr> и <td> могут содержать следующие атрибуты:
bgcolor="#FFFFFF"	Цвет фона строки или ячейки. Выражается шестнадцатеричным числом или названием цвета, если за цветом зарезервировано свое название. По умолчанию, если bgcolor отсутствует, то считается, что его значение равно FFFFFF (белый цвет).
background="picture.jpg"	Заполняет фон строки или ячейки изображением из файла picture.jpg
align="left"	Расположение текста и других объектов в ячейке или во всех ячейках строки. По умолчанию, при отсутствии align, считается, что align принимает значение left, то есть все объекты прижаты к левому краю. Может принимать значение center (объекты выравниваются по центру в центре) и right (текст и рисунки прижата к правому краю).
valign="center"	Выравнивание текста, картинок и других объектов по вертикали в одной ячейке или во всех ячейках строки. Атрибут valign может принимать значения: top - выравнивание по верхнему краю center - выравнивание по центру (во многих браузерах это принимается по умолчанию) bottom - выравнивание по нижнему краю.

Наконец, существуют атрибуты, которые применяются только в ячейках.

Тэг <td> может содержать следующие атрибуты:
background="picture.jpg"	Заполняет фон ячейки изображением из файла picture.jpg
width="n"	Задает явную ширину ячейки. Параметр n может быть просто числом и тогда считается, что это пикселы или может быть числом со знаком % и тогда считается, что ширина ячейки задана в процентах от ширины таблицы.
height="n"	Задает явную высоту ячейки в пикселах.
colspan="n"	Растягивание ячейки по горизонтали (объединение нескольких ячеек по горизонтали в одну). Параметр "n" показывает на сколько колонок будет растянута ячейка.
rowspan="n"	Растягивание ячейки по вертикали (объединение нескольких ячеек по вертикали в одну). Параметр "n" показывает на сколько строк будет растянута ячейка.
nowrap	Этот атрибут запрещает разбивать текст внутри ячейки на строки, то есть текст должен размещаться в ячейке только в одну строку.
colspec="n"	Задает явную ширину колонки. Параметр n может быть просто числом и тогда считается, что это число символов текста или может быть числом со знаком % и тогда считается, что ширина ячейки задана в процентах от ширины таблицы.

Если ячейка пустая, то вокруг нее рамка никогда не рисуется. Это не всегда выглядит красиво. Чтобы нарисовалась рамка, надо заполнить ячейку чем-то невидимым. Для этого используем символ явного пробела (то есть такой пробел, который не игнорируется языком HTML) - &nbsp; (non-breaking space). Писать его в пустую ячейку надо именно так, строчными буквами и на конце точка с запятой.

Тэги шрифтов: <b>, <i>, <u>, <font>, не действуют на всю таблицу сразу. Поэтому их приходится повторять в каждой ячейке заново.

Посмотреть другие простые шаблоны

Скачать бесплатный html-редактор со встроенными учебниками и справочниками по написанию сайтов

Скачать бесплатно FTP-клиент FileZilla Client для копирования файлов на свой сайт и в файлообменники

Скачать бесплатно Полезные скрипты для сайта