Создание простейших 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>, чем в других, браузер сам дорисует недостающие ячейки (оставив их пустыми).
Теперь нам осталось рассмотреть вставку на страницы рисунков и ссылок на другие ресурсы и документы - и, можно считать, что первый этап построения
собственной интернет-страницы закончен. Конечно, останется еще много чего: скрипты, сценарии, карты, фреймы, звук и пр., и пр. - но это все вещи желательные, но не обязательные.
|