Вторник, 07.05.2024, 11:24 Приветствую Вас Гость
Каталог файлов
Создание простейших HTML таблиц.
| 25.08.2011, 14:42 |
Таблицы 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>, чем в других, браузер сам дорисует недостающие ячейки (оставив их пустыми). Теперь нам осталось рассмотреть вставку на страницы рисунков и ссылок на другие ресурсы и документы - и, можно считать, что первый этап построения собственной интернет-страницы закончен. Конечно, останется еще много чего: скрипты, сценарии, карты, фреймы, звук и пр., и пр. - но это все вещи желательные, но не обязательные.
|
Категория: HTML Таблица | Добавил: R0MJkE2H
|
Просмотров: 564 | Загрузок: 0
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
|