Таблицы html. Тег
| Первая строка, вторая ячейка | |
| Вторая строка, первая ячейка | Вторая строка, вторая ячейка |
Посмотрим на результат:
| Первая строка, вторая ячейка | |
| Вторая строка, первая ячейка | Вторая строка, вторая ячейка |
Теперь дадим комментарии примеру, рассмотренному выше:
- Любая таблица начинается с тега
и заканчивается соответственно закрывающим тегом
. Тегможет содержать несколько атрибутов.
-
align. Этот атрибут нам уже знаком. Обозначает он выравнивание таблицы относительно элемента, внутри которого она находится. Может иметь 3 значения:
- align="left". Выравнивание по левому краю. Обычно не пишется, так как стоит по умолчанию.
- align="center". Указывает, что таблица должна располагаться в центре.
- align="right". Выравнивает таблицу по правому краю.
- 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 строчки.
Если в ячейке таблицы ничего не написано, а рамка вокруг ячейки задана, то она (рамка) не будет нарисована. Чтобы рамка присутствовала вокруг пустой ячейки, нужно в этой ячейке написать символ (мы его уже встречали).
Также, вы уже, наверно, догадались, что любую таблицу можно вставить в ячейку другой таблицы.
Рассмотрим теперь пример создания веб-страницы при помощи таблицы:
Пример создания веб-страницы с помощью таблицы
Здесь будет шапка сайта, баннер например
Главная
Статьи
Фотографии
Файлы
Карта сайта
Основной текст
Представим, что в левой части экрана, вместо обычных заголовков расположились ссылки на страницы сайта.
А в этой графе таблицы будет место для рекламы.
Внизу тоже будут некоторые ссылки, навигация, счётчик посещений и надпись "все права защищены"
Результат смотри здесь.
2011 год.
-
align. Этот атрибут нам уже знаком. Обозначает он выравнивание таблицы относительно элемента, внутри которого она находится. Может иметь 3 значения: