Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Выравнивание данных в ячейках






Использование таблиц в 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> :

< TABLE BORDER=1 ALIGN=center>

Теперь ячейки таблицы будут обрамлены рамкой, 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); размещает заголовок таблицы сверху или снизу

Поделиться с друзьями:

mylektsii.su - Мои Лекции - 2015-2024 год. (0.008 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал