В связи с техническими сложностями конвертации графический материал в статье преподавателя и Web-мастера учебного центра «Микроинформ» Марии Мержановой «Уроки Web-мастерства. Урок 4. Учимся создавать html-таблицы» получился неудовлетворительного качества. Приносим свои извинения и, поскольку без понимания данного урока дальнейшее обучение Web-дизайну будет затруднено, повторяем материал, опубликованный ранее на CD, в «Мире ПК», N4/03.
Одна из наиболее важных тем при изучении языка html.
Практическое применение таблиц:
представление информации в табличной форме;
верстка html-страниц с помощью таблиц.
При создании html-страниц таблицы используются для компоновки элементов дизайна страницы - текста, графики. Например, в таблицу с невидимыми границами размещаются необходимые элементы: навигация, текст, картинки, таблицы и т.д. Пользователь может даже не догадаться, что на самом деле это таблица. Сегодня практически любая Webстраница создана именно таким образом.
...
— тег для создания таблицы. Внутри него располагается описание всех рядов и ячеек:
...
— таблица состоит из рядов;
...
— внутри ряда описываются ячейки.
Предположим, вам необходимо создать таблицу, содержащую два ряда и две колонки (рис.1):
Основное правило — таблицы в языке HTML описываются по рядам!
Сначала — первый ряд со всем его содержимым, затем второй и т. д.
Таким образом количество рядов в таблице определяется количеством тегов
.
Тег
(table row) контейнерного типа начинает каждый ряд в таблице, тег
завершает ряд. Внутри описываются все ячейки ряда (
).
Тег
...
(table data) — контейнерного типа. Между открывающим и закрывающим
описывается содержимое ячейки. Внутри ячейки можно размещать текст, картинки, другие таблицы и т. д.
Внешний вид таблицы
Размер рамки таблицы
Рис. 2. Размер рамки таблицы
По умолчанию браузеры выводят таблицы без рамки (границ).
Атрибут border задает размер рамки таблицы в пикселах.
На рис. 2 представлены таблицы с различным значением атрибута border.
Расстояние между ячейками
Атрибут cellspacing задает расстояние между ячейками (в пикселах) в таблице.
Рис. 3. Расстояние между ячейками в таблице (cellspacing)
На рис. 3 можно видеть таблицы с различным значением атрибута cellspacing.
Расстояние между границей ячейки и ее содержимым
Атрибут cellpadding задает расстояние между границей (рамкой) ячейки и ее содежимым (в пикселах). Этот атрибут тега
определяет данное расстояние для всех ячеек в таблице.
Рис. 4. Таблицы с различными значениями атрибута cellpadding
На рис. 4 представлены таблицы с различным значением атрибута cellpadding.
Задание размеров таблицы
Атрибут width задает ширину таблицы, height — ее высоту.
Размеры могут быть заданы в пикселах (абсолютные значения) и в процентах от доступной ширины экрана (относительные значения).
Например:
здесь таблица имеет ширину 500 и высоту 300 пикселов.
Чаще высота таблицы не указывается. Она изменяется в зависимости от содержимого ячеек.
При задании ширины таблицы в пикселах не забывайте, что страницы, которые планируется разместить в Интернете, будут просматривать пользователи, у мониторов которых разное разрешение экрана, у кого-то 800х600 пикселов, а у кого-то — 1024х768. Важно, чтобы таблица полностью помещалась в окне программы просмотра (не должна включаться горизонтальная полоса прокрутки в браузере).
Данная таблица занимает всю ширину экрана браузера. Их еще называют «резиновыми» или «гибкими». Независимо от разрешения экрана и размера окна браузера они занимают определенный процент от доступной ширины окна браузера (в данном примере 100%).
Если размер таблицы не задан, то он будет минимально возможным для того, чтобы уместить ее содержимое. Если текста много, то, когда ширина таблицы достигнет границ программы просмотра, браузер перенесет текст на следующую строку, и т. д.
Задание ширины ячеек
width задает ширину ячейки, height — высоту. Эти размеры также могут быть заданы в пикселах и в процентах.
Выравнивание таблицы — расположение таблицы на странице
Возможные значения: left, right, center.
Значения left, right определяют выравнивание таблицы влево и вправо на странице с соответственным обтеканием текста (аналогично изображению — см. урок 3 в. «Мире ПК» № 4/03).
Значение center выравнивает таблицу по центру страницы. В этом случае текст не обтекает таблицу.
На рис. 5 приведены два примера выравнивания таблицы вправо: в первом случае — с
, во втором — с использованием тега
.
Выравнивание содержимого ячеек и строк
Атрибут align выравнивает содержимое ячеек по горизонтали и может иметь значения left (влево), right (вправо), center (по центру).
Атрибут valign выравнивает содержимое ячеек по вертикали и может иметь значения top (к верхней границе ячейки), middle (по середине ячейки), bottom (к нижней границе ячейки). По умолчанию горизонтальное выравнивание — align=left, вертикальное — valign=middle.
На рис. 6 представлены возможные варианты выравнивания содержимого ячеек.
align=left valign=top
align=left valign=middle (по
умолчанию)
align=left valign=
bottom
align=center
valign=top
align=center valign=
middle
align=center
valign=bottom
align=right
valign=top
align=right valign=
middle
align=right
valign=bottom
Если задать выравнивания по горизонтали и вертикали для строки таблицы:
, то содержимое всех ячеек в этом ряду будет выровнено по центру и прижато к верхней границе ячейки. Таким образом не нужно указывать эти атрибуты у каждой ячейки.
Задание заднего фона таблиц, рядов и ячеек
задание фона для всей таблицы определяет задний фон всех ячеек таблицы;
задание фона для строки таблицы определяет задний фон всех ячеек ряда;
задание фона для ячейки таблицы.
Цвета могут быть заданы шестнадцатеричными RGB-значениями или стандартными названиями.
Рис.7. Задание заднего фона таблицы, строки и ячейки
На рис. 7 представлена таблица, где задан фон таблицы, первой строки таблицы и второй ячейки первой строки таблицы.
Обратите внимание, что цвет, заданный в ячейке (
), который в свою очередь перекрывает цвет, установленный в таблице (
).
Перекрывание строк и колонок
Атрибут rowspan описывает число строк, перекрываемых ячейкой.
Атрибут colspan описывает число колонок, перекрываемых ячейкой.
Рис. 8. Перекрывание рядов и колонок в таблице
На риc. 8 представлена таблица, в которой первая ячейка перекрывает три ряда и две колонки.
Как упоминалось выше, таблица описывается по строкам. В этой таблице четыре строки. Опишем первую. Она содержит две ячейки. Первая ячейка перекрывает три ряда и две колонки. Вторая ячейка — обычная:
Переходим к описанию второй строки таблицы. Так как первая ячейка была описана при описании первого ряда, то повторно мы ее не описываем. Поэтому второй ряд будет содержать описание только второй ячейки:
Третий ряд аналогично второму:
Четвертый ряд состоит из обычных ячеек:
ОБ АВТОРЕ
Мария Мержанова — Web-администратор Учебного центра «Микроинформ». С ней можно связаться по e-mail: masha@microinform.ru.
Два важных замечания
Не оставляйте ячейки пустыми (
). Если в ячейке нет видимого содержимого, вместо текста поставьте неразрывный пробел
. Браузеры не прорисовывают рамку в пустой ячейке. И в Netscape Navigator 4 форматирование к пустой ячейке не выполняется.
При задании заднего фона таблицы (
) Netscape Navigator 4 закрашивает каждую ячейку и оставляет пустыми зазоры между ними (при cellspacing больше 0). Это наглядно видно, если в таблице, представленной на рис. 7, задать размер рамки в таблице 0
