Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Выравнивание данных в ячейках
|
|
Использование таблиц в HTML
Теги HTML для создания таблиц первоначально предназначались для представления строк и столбцов табулированных данных. Однако дизайнеры научились с их помощью управлять разметкой Web-страниц: создавать столбцы текста, задавать интервалы между элементами и изменять внешний вид текста способами, недоступными другим тегам форматирования HTML.
Таблицы в языке HTML всегда имеют прямоугольный вид и состоят из строк, которые в свою очередь состоят из ячеек. Все языковые конструкции, описывающие компоненты создаваемой таблицы, заключаются между тегами < TABLE> и < /TABLE>.
Заполнение таблицы происходит построчно; для обозначения строки используется пара тегов < TR> ...< /TR> . Строка состоит из ячеек, для задания которых используют либо теги < TH> ...< /TH> , если эти ячейки содержат заголовки столбцов, либо теги < TD> ...< /TD> . Заголовки выводятся полужирным шрифтом и располагаются по центру ячейки. Данные имеют обычный шрифт и выравниваются по левой стороне ячейки. Для задания заголовка всей таблицы используются теги < CAPTION> и < /CAPTION> .
Пример
< TABLE> < CAPTION> Заголовок таблицы< /CAPTION> < TR> < TH> Заголовок 1< /TH> < TH> Заголовок 2< /TH> < /TR> < TR> < TD> Ячейка 1< /TD> < TD> Ячейка 2< /TD> < /TR> < TR> < TD> Ячейка 3< /TD> < TD> Ячейка 4< /TD> < /TR> < /TABLE>
Наличие в ячейках данных не обязательно. Создать пустую ячейку можно двумя способами: ничем не заполнять ее контейнер (< TD> < /TD> ), либо поместить в нее символ неразрывного пробела, задаваемого специальной последовательностью символов -- & nbsp; (т. е. создать ячейку вида < TD> & nbsp; < /TD> ).
Нет надобности отдельно создавать пустые ячейки, если планируется, что все оставшиеся в строке ячейки не будут заполнены. Так как тег < TR> сигнализирует о начале новой строки, пустые ячейки будут добавлены браузером автоматически.
Основные атрибуты тега < TABLE>
Назначение основных атрибутов тега < TABLE> и значения, которые они могут принимать перечислены в таблице.
| Атрибут | Назначение |
| BORDER=n | Определяет ширину рамки таблицы (в пикселах), например, BORDER=1; значение, равное нулю, означает отсутствие рамки |
| WIDTH=n | Определяет ширину всей таблицы в пикселах, либо в процентах от ширины окна браузера |
| HEIGHT=n | Определяет высоту всей таблицы в пикселах, либо в процентах от высоты окна браузера |
| ALIGN | Задает горизонтальное выравнивание таблицы в окне браузера; имеет значения left, center и right (по умолчанию -- left) |
| CELLPADDING=n | Добавляет свободное пространство между данными внутри ячейки и ее границами; по умолчанию значение равно 2 |
| CELLSPACING=n | Добавляет свободное пространство между ячейками внутри всей таблицы; по умолчанию значение равно 2 |
| HSPACE=n | Задает области свободного пространства указанной ширины (в пикселах) слева и справа от таблицы |
| VSPACE=n | Задает области свободного пространства заданной высоты (в пикселах) сверху и снизу от таблицы |
| BGCOLOR=цвет | Устанавливает цвет фона всей таблицы |
| BACKGROUND=URL | Указывает фоновое изображение для таблицы, где URL -- адрес источника (имя файла с изображением) |
Пример
Изменим содержимое документа, созданного в предыдущем примере, добавив атрибуты BORDER и ALIGN в тег < TABLE> :
Теперь ячейки таблицы будут обрамлены рамкой, a таблица выровнена по центру окна браузера.
Выравнивание данных в ячейках
При помощи атрибутов ALIGN и VALIGN можно по-разному размещать данные относительно границ ячейки. Эти атрибуты используются совместно с тегами < CAPTION> , < TR> , < TH> и < TD> в самых различных комбинациях. Ниже приведены значения атрибутов для перечисленных элементов.
| Тег | Назначение атрибута |
| < TR> | Атрибут ALIGN может принимать значения left, center и right (по умолчанию -- left для данных и center для заголовков); он определяет горизонтальное выравнивание данных в ячейках и действует на всю строку, если не отменяется тем же атрибутом в отдельной ячейке Атрибут VALIGN может иметь значения top, bottom, middle и baseline (по умолчанию -- middle); он регулирует положение данных относительно верхней и нижней границ ячейки и влияет на всю строку, если не отменяется таким же атрибутом в отдельной ячейке. baseline применяется ко всем элементам строки и выравнивает их по базовой линии |
| < TH> | Атрибут ALIGN может принимать значения left, center и right (по умолчанию -- center) Атрибут VALIGN может иметь значения top, bottom и middle (по умолчанию -- middle) |
| < TD> | Атрибут ALIGN может принимать значения left, center и right (по умолчанию -- left) Атрибут VALIGN может иметь значения top, bottom и middle (по умолчанию -- middle) |
| < CAPTION> | Атрибут ALIGN может иметь значения top и bottom (по умолчанию -- top); размещает заголовок таблицы сверху или снизу |