Теги и примеры таблиц - Заметки на все случаи жизни (c) Serg
Заметки на все случаи жизни
(c) Serg
Главная | Теги и примеры таблиц | Регистрация | Вход
Понедельник
01.09.2014
16:36
Приветствую Вас Гость | RSS

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

Поиск
Карта пробок
Пробки на Яндекс.Картах
Погода
Валюта и металлы
Курсы наличного обмена на сегодня
Курсы НБУ на сегодня
Курсы НБУ на сегодня
Курсы НБУ на сегодня
Курсы НБУ на сегодня
Курсы НБУ на сегодня
Курсы НБУ на сегодня
Курсы НБУ на сегодня
Все АЗС
Полезные странички
  • Кредит. Расчет
  • Читать, читать...
  • ООО "Масалет"
  • ПП "Автократ"
  • "Акация"
  • Видеопробки
  • Газовые заправки
  • Заправки WOG
  • Заправки ОККО
  • Цены на бензин
  • Кадастрова карта
  • Капремонт дорог Киева
  • Качество топлива
  • Правозащитные организации
  • Автоподставы
  • Полезные ссылки
  • Яндекс карты
  • Площадь, расстояние на карте
  • Каталог сайтов
  • Каталог файлов
  • Андроид софт
  • Туалеты Киева
  • Тест: Ваш стиль вождения
  • Календарь
    «  Сентябрь 2014  »
    ПнВтСрЧтПтСбВс
    1234567
    891011121314
    15161718192021
    22232425262728
    2930
    Категории раздела
    Банки [82]
    Закон [83]
    Разное [556]
    Строительство [31]
    Техника [63]
    Политика [299]
    Столица [426]
    Мир [590]
    Экономика [72]
    Авто [53]



    Украинская Баннерная Сеть
    Copyright Serg © 2009-2014
    Яндекс цитирования Rambler's Top100
    Создать сайт бесплатно