Нередко на страницах встречаются таблицы. Можно использовать таблицы просто в качестве способа форматирования текста, поскольку таблица в HTML-документе может не содержать всех или некоторых разграничительных линий. Заметим, что в большинстве случаев элементы текста позиционируются как табличные.
Таблица представляет собой особую часть документа HTML. Данные в ней организованы в виде прямоугольной сетки, которая состоит из вертикальных столбцов и горизонтальных рядов (строк). Каждая клетка таблицы называется ячейкой. Ячейки могут содержать текст, графику и даже другую таблицу.
Таблица состоят из трёх основных частей: названия таблицы, заголовков столбцов и ячеек. Таблица заполняется слева направо, ячейка за ячейкой, начиная с левого верхнего угла и заканчивая правым нижним углом. Каждая ячейка должна быть заполнена (для создания пустых ячеек используются пробелы).
Описание таблицы в документе HTML начинается с тэга <TABLE> и заканчивается тэгом </TABLE>. Если вы хотите, чтобы таблица имела видимую рамку (границы), используйте атрибут BORDER, например:
Для задания названия таблицы используется тэг <CAPTION> с атрибутом выравнивания ALIGN, который может принимать значение TOP или BOTTOM (расположение названия вверху или внизу таблицы соответственно), например:
<CAPTION ALIGN=TOP>Моя таблица</ CAPTION>
Каждый ряд ячеек начинается с тэга <TR> и заканчивается тэгом </TR>.
Если ряд должен содержать заголовки столбцов таблицы, то используются тэги <TH> и </TH>. Если в ячейках должны размещаться данные, то используются тэги <TD> и </TD>.
Тэги заголовков и данные должны располагаться между тэгами рядов <TR> и </TR>. Проще говоря, вы сначала определяете таблицу (тэг <TABLE>),а затем внутри этого определения задаёте строки (тэг <TR>) и содержимое ячеек (тэг <TD> – для данных, тэг <TH> – для названий заголовков столбцов).
Рис. 25. Использование таблицы
Рис. 26. Пример использования таблицы
Несколько ячеек могут быть объединены в одну как по горизонтали, так и по вертикали. Объединение по столбцу применяют тогда, когда надо, чтобы соседние столбцы имели общий заголовок. Объединение по рядам делается в том случае, когда содержимое нескольких ячеек подряд одинаково. Для объединения ячеек используются атрибуты COLSPAN и ROWSPAN (по столбцам и по рядам соответственно). Аргументами этих атрибутов являются количества объединяемых столбцов или рядов.
Рис. 27. Объединение ячейки в таблице
Рис. 28. Пример объединения ячейки в таблице
Как шириной все таблицы, так и шириной каждой отдельной ячейки можно управлять. Ширину всей таблицы можно задать как в пикселах, так и в процентах от ширины окна. Ширину ячеек можно задать также двумя способами: в пикселах и в процентах от ширины таблицы. Следует иметь в виду, что ячейки в одном столбце имеют одинаковую ширину, а ячейки одной строки – разную ширину. Ширина таблицы задаётся атрибутом WIDTH в тэге <TABLE>, а ширина ячейки указывается тем же атрибутом в тэге <TH> или <TD>.
Рис. 29. Изменение ширины ячеек в таблице
Рис. 30. Пример изменения ширины ячеек в таблице
Текст и графику внутри ячеек таблицы можно выравнивать. Горизонтальное и вертикальное выравнивание содержимого строк задаётся с помощью атрибута ALIGN в тэге <TR>.Выравнивание в отдельных ячейках выполняет атрибут ALIGN в тэгах <TH> и <TD>.Атрибут ALIGN может принимать аргументы LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру). Пример:
<TR ALIGN=LEFT>
<TH WIDTH=25% ALIGN=CENTER>текст</TH>
В следующем примере используем таблицу без рамок как способ размещения различных элементов на странице. Для задания нужного расстояния между элементами следует использовать атрибуты выравнивания.
Рис. 31. Использование таблицы без рамки
Рис. 32. Пример использования таблицы без рамки
Цветовое оформление таблицы производится с помощью атрибута BGCOLOR, который принимает в качестве аргумента цвет в виде имени или шестнадцатеричного числа.
Если нужно установить цвет для всей таблицы, то атрибут BGCOLOR вставляется в тэг Для изменения цвета только одного ряда этот атрибут вставляется в тэг <TR>. Задание цвета отдельной ячейки обеспечивается атрибутом BGCOLOR внутри тэга <TD>.
Если в таблице имеются рамки, то можно указать и их цвет с помощью атрибутов:
BORDERCOLOR – цвет всей рамки;
BORDERCOLORLIGHT – цвет светлой части рамки;
BORDERCOLORDARK – цвет тёмной части рамки.
Эти атрибуты вставляются в тэг<TABLE>. Чтобы они действительно работали, необходимо присутствие ещё и атрибута BORDER, задающего ширину рамки.
Если требуется задать шрифт для текстов внутри ячеек таблицы, то это можно сделать с помощью тэгов заголовков и физических стилей внутри тэгов <TD>.
Рис. 33. Оформление таблицы
ФРЕЙМЫ
Часто возникает необходимость разместить в окне браузера несколько разделов или окон, называемых фреймами. В каждом фрейме отображается свой документ HTML. Фреймы могут работать независимо, а также содержать ссылки друг на друга.
При использовании фреймов потребуется несколько HTML-файлов. Один из них называется установочным. В нём описывается расположение (раскладка) фреймов в окне браузера и назначаются исходные HTML-файлы для каждого из фреймов, но нет собственного текста и графики. Исходные HTML-файлы выводятся во фреймы и могут содержать тексты, графику, ссылки и пр.
Установочный HTML-файл, как и любой другой, начинается с тэга <HTML> и заканчивается тэгом </HTML>. Для разделения окна на несколько фреймов используются тэги <FRAMESET> и </FRAMESET>. Тэг <FRAMESET> должен быть размещён после тэга </HEAD>, но перед тэгом <BODY>.
Два фрейма можно расположить рядом друг с другом или друг над другом. Для задания способа расположения используется атрибут COLS (если рядом) или ROWS (если друг над другом). Чтобы разделить окно на два фрейма, указывают через запятые два числа. Эти числа определяют размеры фреймов. Для трёх фреймов задаются три числа. Если нужно указать, что фрейм занимает все оставшееся место, используется символ звёздочка (*). Размеры фреймов измеряются в пикселах или процентах. В последнем случае около числа пишется символ процента (%).
Рис. 34. Пример оформления таблицы
Например, тэг <FRAMESET COLS=”50,*”> задаёт деление окна на два вертикальных фрейма, первый из которых имеет ширину 50 пикселов, а второй занимает всё оставшееся место. Тэг <FRAMESET ROWS=”20%,30%,*”>задаёт разбиение на три горизонтальных фрейма высотой 20%, 30% и 50%.
Можно использовать одновременно и горизонтальное, и вертикальное разбиение окна на фреймы. Это делается вложением тэгов <FRAMESET> друг в друга, т.е. размещением фреймов внутри фреймов.
После задания расположения фреймов следует указать для каждого из них исходный HTML-файл. Напомним, что исходные файлы выводятся во фреймах. Для этой цели служит тэг <FRAME>, имеющий множество атрибутов, которые управляют свойствами фреймов. Ниже перечислены эти атрибуты.
SRC= «имя_файла»NAME= «имя_фрейма» - каждый фрем должен иметь имя, упомянутое в атрибуте NAME, и к нему должен быть привязан HTML-файл, указанный в атрибуте SRC.
SCROLLING – определяет, будут ли присутствовать в окне фрейма полосы прокрутки, если требуется прокрутка, то задаётся аргумент YES, иначе – NO.
NORESIZE – запрещает пользователю изменять размеры фреймов, если этот атрибут не применяется, то пользователь не может изменять размеры.
BORDER= «ширина_полосы» - определяет ширину разделительной полосы между фреймами в пикселах.
MARGINHEIGHT= «высота_верхнего_отступа» - добавляет пустое поле между верхней границей фрейма и началом текста или графики, измеряется в пикселах.
MARGWIDTH= «ширина_боковых_отступов» - добавляет пустое поле между боковыми границами фреймов и началом текста или графики, измеряется в пикселах.
