Таблицы в HTML | Изучение HTML | Архив

Таблицы в HTML

SIB | 06.07.2011, 18:30:13 | Просмотров: 2181

Для построения простейшей Таблицы HTML необходимы три тега-контейнера, на которых строятся все таблицы:

Code

<TABLE><TR><TD>пример простейшей таблицы</TD></TR></TABLE>

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

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

Да, совершенно верно, глядя на этот "пример", никак нельзя предположить, что это таблица. Для того, чтобы это стало видно, необходимо ввести в тег

Code

<TABLE>

параметр BORDER. Тогда HTML-код нашей таблицы будет выглядеть так:

Code

<TABLE BORDER><TR><TD>пример простейшей таблицы</TD></TR></TABLE>

а сама таблица так:

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

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

Code

<TABLE>

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

Code

определяет построение строк и употребляется только внутри тега

Code

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

Code

<TABLE>

может быть сколько угодно тегов-строк. Сколько вставите тегов, столько строк в таблице сделает браузер. Внутри тега

Code

обязательно должен быть хотя бы один тег

Code

который определяет построение столбцов. Тег

Code

<TD>

также не распознается браузерами, если он стоит вне тега

Code

<TR>

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

Code

<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

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

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

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

Code

Тогда у Вас в правом верхнем углу будет всегда оставаться свободное место шириной 20% от окна и высотой 150 пикселей, где как раз очень удобно будет помещаться этот баннер за бесплатность хостинга. Причем эту таблицу не обязательно оставлять пустой - в нее можно поместить кучу всякой, полезной и не очень, информации, например вступительное слово, меню или те же счетчики всевозможных рейтингов, если Вы захотите в них участвовать.
Параметр CELLSPACING= , определяет расстояние между смежными ячейками таблицы. Значение параметра задается в пикселях.
Параметр CELLPADDING= , определяет расстояние между рамкой ячейки и данными внутри ячейки. Значение параметра задается в пикселях. Не подумайте, что этот параметр работает только в таблицах с рамками. Если не задан параметр BORDER, отступ делается от воображаемой рамки.
Впрочем, воздействие всех этих параметров на вид таблицы лучше всего изучать на практике. Потренируйтесь в создании таблиц, порисуйте их много, разных, употребляя разные параметры и их значения, и Вы наглядно увидите, что на что влияет. Для тех, кто работает с редактором SNK Visual HTML Workshop, напомню, что доступ к "Мастеру построения таблиц" и панели автоматической вставки тегов таблиц Вы получите, нажав на кнопку "Таблицы".
Таблицы - очень мощный и довольно сложный инструмент построения страниц и в одной статье не удастся рассмотреть всех хитростей его применения, поэтому мы еще вернемся к этой теме, и, может быть, не один раз. А пока, в заключение, еще два тега, относящиеся к таблицам:

Тег

Code

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

Code

аналогичен тегу

Code

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

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

Теги: таблицы, html, изучение