Таблицы HTML

Часть 1

Создание простейших HTML таблиц.

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

   Для построения простейшей Таблицы HTML необходимы три тега-контейнера, можно сказать - три кита, на которых строятся все таблицы: <TABLE><TR><TD>пример простейшей таблицы</TD></TR></TABLE>, причем, обратите внимание, что они должны быть вложены друг в друга именно в таком порядке. На странице это будет выглядеть так:

пример простейшей таблицы

Да, совершенно верно, глядя на этот "пример", никак нельзя предположить, что это таблица. Для того, чтобы это стало видно, необходимо ввести в тег <TABLE> параметр BORDER. Тогда HTML-код нашей таблицы будет выглядеть так: <TABLE BORDER><TR><TD>пример простейшей таблицы</TD></TR></TABLE>, а сама таблица так:

пример простейшей таблицы

Параметру BORDER может присваиваться числовое значение, которое определяет толщину рамки в пикселях.

   Но, все по порядку. С тегом <TABLE> пока все ясно. Он говорит браузеру, что необходимо строить таблицу и имеет кучу параметров, о которых - попозже. 

   Тег-контейнер <TR>...</TR> определяет построение строк и употребляется только внутри тега <TABLE></TABLE>. В любом другом месте браузеры будут в лучшем случае игнорировать этот тег, а в худшем - интерпретировать его неправильно, что может испортить вид Вашей прекрасной, с таким трудом построенной страницы. Внутри тега <TABLE> может быть сколько угодно тегов-строк. Сколько вставите тегов, столько строк в таблице сделает браузер. Внутри тега <TR>...</TR> обязательно должен быть хотя бы один тег <TD>...</TD>, который определяет построение столбцов. Тег <TD> также не распознается браузерами, если он стоит вне тега <TR>.

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

<TABLE>

<TR><TD>ячейка 1.1</TD><TD>ячейка 1.2</TD></TR>

<TR><TD>ячейка 2.1</TD><TD>ячейка 2.2</TD></TR>

</TABLE>,

а вот так она будет выглядеть на странице без рамки:

ячейка 1.1 ячейка 1.2

ячейка 2.1 ячейка 2.2

и с рамкой:

ячейка 1.1 ячейка 1.2

ячейка 2.1 ячейка 2.2

   По умолчанию таблица выравнивается по левому краю страницы. Для изменения ее положения существует параметр ALIGN=, который может принимать значения LEFT, CENTER, RIGHT. Примеры:

ячейка 1.1 ячейка 1.2

ячейка 2.1 ячейка 2.2

- таблица, выровненная по центру,

ячейка 1.1 ячейка 1.2

ячейка 2.1 ячейка 2.2

и таблица, выровненная по правому краю:

   Рассмотрим еще несколько самых употребляемых параметров тега <TABLE>.

   Параметр BGCOLOR="" задает цвет ячеек таблицы. Наша таблица с этим параметром, имеющим значение #C0C0C0, будет иметь вид:

ячейка 1.1 ячейка 1.2

ячейка 2.1 ячейка 2.2

Кстати, внутри таблиц действуют все теги форматирования текста и шрифтов, так что мы можем представить свою таблицу в таком виде:

ячейка 

1.1 ячейка 1.2

ячейка 2.1

ячейка 2.2

   Как правило, браузер сам определяет как размеры таблицы в целом, так и размеры отдельных ячеек, учитывая множество фактов: размер окна браузера, количество и качество материала в каждой отдельной ячейке и т.д. Но, при необходимости мы можем принудительно задать размеры таблицы в процентах от размера окна или пикселях. Для этого существуют параметры WIDTH=" " - задает ширину таблицы и HEIGHT=" " - задает высоту таблицы. При употреблении этих параметров Вы должны сами следить за соответствием размеров таблицы и ее содержания. Например, всем, кто решится поместить свои странички на серверы народ.ру или боом.ру, придется, для того, чтобы оставить место под баннеры серверов, включить в тело своих страниц сразу за тегом BODY таблицу с таким, приблизительно, кодом: 

<TABLE ALIGN=LEFT WIDTH="80%" HEIGHT="150">

<TR><TD></TD></TR>

</TABLE>

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

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

   Параметр CELLPADDING= - определяет расстояние между рамкой ячейки и данными внутри ячейки. Значение параметра задается в пикселях. Не подумайте, что этот параметр работает только в таблицах с рамками. Если не задан параметр BORDER, отступ делается от воображаемой рамки. 

   Впрочем, воздействие всех этих параметров на вид таблицы лучше всего изучать на практике. Потренируйтесь в создании таблиц, порисуйте их много, разных, употребляя разные параметры и их значения, и Вы наглядно увидите, что на что влияет. Для тех, кто работает с редактором SNK Visual HTML Workshop, напомню, что доступ к "Мастеру построения таблиц" и панели автоматической вставки тегов таблиц Вы получите, нажав на кнопку "Таблицы".

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

Тег <CAPTION>...</CAPTION> - тег заголовка таблицы. Все помещенное внутрь этого тега выводится как заголовок таблицы. Имеет параметрALIGN=, который может принимать значения TOP - заголовок располагается над таблицей и BOTTOM - заголовок располагается под таблицей.

Тег <TH>...</TH> - аналогичен тегу <TD>...</TD> (создает ячейку), но данные, помещенные в него, выводятся полужирным шрифтом.

   Остается только добавить, что количество столбцов не может быть разным в разных строчках одной таблицы, а если Вы все же в одной или нескольких строках вставите меньше тегов <TD>, чем в других, браузер сам дорисует недостающие ячейки (оставив их пустыми).

   Теперь нам осталось рассмотреть вставку на страницы рисунков и ссылок на другие ресурсы и документы - и, можно считать, что первый этап построения собственной интернет-страницы закончен. Конечно, останется еще много чего: скрипты, сценарии, карты, фреймы, звук и пр., и пр. - но это все вещи желательные, но не обязательные.