Таблицы - один из основных разделов html. С помощью таблиц можно не только представлять информацию в табличном виде, но и форматировать веб-страницы так, как захочется. Но обо всём по порядку.
Рассмотрим на примере как устроена таблица.
Заголовок таблицы
Первая строка, вторая ячейка
Вторая строка, первая ячейка
Вторая строка, вторая ячейка
Посмотрим на результат выше написанного фрагмента текста, вот кстати и он:
Заголовок таблицы
Первая строка, вторая ячейка
Вторая строка, первая ячейка
Вторая строка, первая ячейка
Теперь дадим комментарии, рассмотреному выше примеру.
Любая таблица начинается с тега
, а заканчивается соответственно закрывающим тегом
. Тег
может содержать несколько атрибутов.
align. Этот атрибут нам уже знаком. Обозначает он выравнивание таблицы относительно html-документа. Может иметь 3 значения.
align="left". Обозначает выравнивание по левому краю html-документа (ячейки другой таблицы). Обычно не пишется, так как стоит по умолчанию.
align="center". Указывает, что таблица должна располагаться в центре веб-страницы (ячейки другой таблицы).
align="right". Выравнивает таблицу по правому краю html-документа (ячейки другой таблицы).
width. Указывает ширину таблицы. Обозначается в пикселях (width="500", обозначает, что ширина таблицы равна 500 пикселей) или процентах от ширины веб-страницы (ячейки другой таблицы) (width="50%").
border. Уcтанавливает ширину внешней рамки и ячеек таблицы. Указывается в пикселях. Если атрибут отсутствует или не установлен, то таблица показывается без рамки.
cellspasing. Устанавливает расстояние в пикселях между рамками ячеек.
cellpadding. Устанавливает расстояние в пикселях между рамками ячейки и текстом, который находится в этой ячейке.
...
. Всё, что находится между этими тегами является заголовком таблицы. Заголовок не является обязательным элементом таблицы. Тег
может содержать атрибут align, который имеет 2 значения.
align="top". Заголовок, находится над таблицей.
align="bottom". Заголовок, находится под таблицей.
...
. Каждая строка таблицы начинается с тега
и заканчивается тегом
. Тег
может содержать несколько атрибутов.
align="left|center|right". Выравнивает текст, находящийся в ячейке по левому краю, центру и правому краю соответственно.
valign. Устанавливает вертикальное выравнивание текста и любых других элементов в ячейках строки. Имеет 3 значения.
valign="top". Текст выравнивается по верхнему краю ячейки.
valign="middle". Выравнивание по середине ячейки.
valign="bottom". Выравнивание по нижнему краю.
Каждая новая ячейка в таблице начинается тегм
, заканчивается же закрывающим тегом
. Тег
может содержать атрибуты:
align="left|center|right". Выравнивает текст, находящийся в ячейке по левому краю, центру и правому краю соответственно.
valign="top|middle|bottom". Вертикальное выравнивание текста в ячейке по верхнему краю, середине и нижнему краю ячейки соответственно.
width. Указывает ширину ячейки в пикселях или процентах от ширины таблицы.
height. Указывает высоту ячейки в пикселях.
colspan. Устанавливает длину ячейки. Если значение colspan=2, то ячейка будет простираться на 2 колонки, если colspan=5, то на 5 ячеек.
rowspan. Устанавливает высоту ячейки. Если значение rowspan=3, то ячейка будет высотой в 3 строчки.
Если в ячейке таблицы ничего не написано, а рамка вокруг ячейки задана, то она (рамка) не будет нарисована. Чтобы рамка была нарисована в пустой ячейке, нужно в этой ячейке написать символ (мы его уже встречали).
Также, вы уже, наверно, догадались, что любую таблицу можно вставить в ячейку другой таблицы.
Рассмотрим теперь пример создания веб-страницы с помощью таблиц.
Пример создания веб-страницы с помощью таблиц
Здесь будет шапка сайта, баннер например
Главная
Статьи
Фотографии
Файлы
Карта сайта
Основной текст
Представим, что в левой части экрана, вместо обычных заголовков расположились ссылки на страницы сайта.
А в этой графе таблицы будет место для рекламы.
Внизу тоже будут некоторые ссылки, навигация, счётчик посещений и надпись "все права защищены"