- •Оглавление
- •1.Что такое html
- •2.Минимальные требования к html документу
- •3.Элементы заголовка.
- •4.Элемент body
- •6.Специальные символы
- •7.Списки
- •Нумерованный (упорядоченный) список
- •Маркерованный (неупорядоченный) список
- •Список определений
- •8.Форматирование текста
- •Задание характеристик шрифта
- •9.Отображение графики в документе
- •10.Таблицы
- •11. Фреймы
- •Структура фреймовой конструкции
- •Имена фреймов
- •Документ без фреймов
10.Таблицы
HTML-таблицы обеспечивают разработчика Web-страниц новым мощным средством. Таблицы позволяют разделить страницу на части. Они в некотором смысла сходны с фреймами, но работают в пределах одного HTML-документа. Фреймы же разделяют назависимые документы. Таблицы создаются с помощью элементов TABLE, TR и TD. Между тэгами начала и конца таблицы (TABLE) заключены элементы строки таблицы (TR) и содержимого ячейки таблицы (TD). Другими словами, элементы TD и TR никогда не встречаются за пределами тэгов начала и конца TABLE.
Для примера рассмотрим простую таблицу: <TABLE border=3 borderColor="black" align=center> <TR> <TD> </TD> <TD> <B>рост</B> </TD> <TD> <B>объемы</B></TD> </TR> <TR> <TD> <B>Синди Кроуфорд</B></TD> <TD> 176 см</TD> <TD> 85-60-87</TD> </TR> <TR> <TD> <B>Клаудиа Шиффер</B></TD> <TD> 182 см</TD> <TD> 92-62-92</TD> </TR> </TABLE>
Таким образом, мы получили таблицу с тремя строками и с тремя столбцами в черной рамке. Таблицы не обязательно должны иметь рамки, и большинство броузеров их не используют. По умолчанию размер колонок определяется по элементу наибольшей длины, а текст внутри ячейки выравниваеися по левому краю по горизонтали и центрируется по вертикали.
Вот так эта таблица будет выглядеть на экране:
|
рост |
объемы |
Синди Кроуфорд |
176 см |
85-60-87 |
Клаудиа Шиффер |
182 см |
92-62-92 |
Размер таблицы определяется по числу тэгов TR и TD, которые встречаются при анализе броузером блока TABLE. Как только встречается тэг TR, начинается новая строка; после этого для каждого следующего тэга TD соддается новая колонка. Этот процесс продолжается до тех пор, пока не встретится тэг конца TR или не начнется новая строка.
Теперь рассмотрим элементы тэга TABLE и их атрибуты.
Элементы таблицы |
|
||
Элемент |
Описание |
|
|
CAPTION |
Определяет заголовок таблицы. Поддерживает атрибуты ALIGN и VLIGN. |
|
|
TABLE |
Определяет таблицу. |
|
|
TR |
Создает строку в таблице. |
|
|
TD |
Определяет ячейку таблицы. Поддерживает большинство атрибутов элемента TABLE. |
|
|
TBODY |
Используется таблицами, имеющими верхние и нижние колонтитулы, при задании атрибутов для групп рядов. |
|
|
THEAD |
Определяет верхний колонтитул таблицы. Поддерживает атрибуты ALIGN, ID, VLIGN и STYLE. |
|
|
TFOOT |
Определяет нижний колонтитул таблицы. Поддерживает атрибуты ID и STYLE. |
|
|
TH |
Определяет заголовок строки или колонки таблицы. Поддерживает большинство атрибутов TABLE. |
|
|
Атрибуты таблицы |
|
Имя |
Описание |
Align=value |
Выравнивание. Принимает значения LEFT, RIGHT или CENTER.Этот атрибут определяет размещение текста документа относительно таблицы. LEFT- по умолчанию. CENTER - таблица располагается в центре страницы. RIGHT - таблица справа от текста. |
BackGround=url |
URL файла формата GIF или JPG, который используется в качестве фона таблицы. |
Bgcolor=color |
Цвет фона всей таблицы по умолчанию. |
Border=n |
Толщина рамки таблицы. По умолчанию равна 0 пикселей. |
BorderColor=color |
Задает цвет рамки. |
BorderColorDark=color BorderColorLight=color |
Для поддержки объемного эффекта можно задать как темный, так и светлый цвет рамки. |
CellPadding=n |
Размер в пикселях отступов для содержимого ячее таблицы. |
CellSpacing=n |
Расстояние от рамки до содержимого ячеек в пикселях. |
Clear=value |
Определяет параметры форматирования текста, следующего за таблицей. NO - текст располагается после таблицы (по умолчанию). LEFT - текст начинается на следующей выровненной влево строке. RIGHT - на выровненной вправо. ALL - текст обтекает таблицу. |
Cols=n |
Количество колонок в таблице. |
Frame |
Задает разделительные линии таблицы, которые будут отображаться на экране. Можно использовать эту возможность для создания таблиц, в которых разделены только колонки. Здесь доступно несколько значений. По умолчанию принимается значения BORDER, при задании которого разделительными линиями выделяется каждая ячейка таблицы. Остальными опциями являются ABOVE,BELOW,HSIDES,LHS,RHS,VSIDES и BOX. |
Id=name |
Задает уникальный идентификатор для таблицы. |
NoWrap |
Указывает не переносить содержимое ячейки таблицы, если оно не помещается в ней. |
Rules=value |
Определяет способ отображения внутренних разделительных линий. Посредством атрибута Frame задается контур таблицы, тогда как атрибут Rules отвечает за внутренние разделительные линии. Имеет несколько значений: NONE - удаляет все внутренние разделительные линии; GROUP - отображает горизонтальные линии между группами в таблице; ROWS - показывает только линии, разделяющие строки; COLS - только разделяющие колонки; ALL - показывает линии, разделяющие и строки и колонки. |
Style= CSS property |
Определяет стиль таблицы посредством каскадных страниц стилей (CSS) |
Valign=value |
Задает выравнивание содержимого ячеек таблицы по вертикали: TOP, MIDDLE, BOTTOM или BASELINE. |
Width=n |
Определяет ширину таблицы. Задается либо в пикселях, либо в процентах.Таблицы широко применяются в WWW для оформления страниц. Они предоставили разработчикам возможности, о которых они давно мечтали. Таблицы применяются не только при создании страниц, но и с этой целью тоже.Например, можно использовать разнообраззные таблицы для четкой и ясной разметки страницы.
|