Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Теоретический материал. Таблицы являются очень удобным средством форматирования данных на Web странице
|
|
Таблицы являются очень удобным средством форматирования данных на Web странице. Основное удобство заключается в том, что браузер берет на себя заботу о прорисовке рамки таблицы. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере и, разумеется, с размером находящихся в ячейках таблицы строк текста и рисунков. Кроме того, таблицы позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением. Необходимо помнить, что последовательность элементов описывает таблицу сверху вниз и справа налево.
Элемент таблица создается с помощью тега < table> … < /table>.. Вся таблица должна находиться внутри него. Он автоматически переводит строку до и после таблицы.
Атрибуты тега < table> позволяют управлять отображением таблицы; изменять ее цвет, толщину рамки и многое другое. Атрибуты таблицы приведены в таблице 3.5.
Таблица 3.5. Атрибуты тега < table>
| Атрибут | Значение по умолчанию | Возможные значения | Описание |
| align | left | left, right, center | Выравнивание таблицы. |
| width | Рассчитывается на основе ширины ячеек | 100px, 500px, 100% и т.д. | Ширина таблицы. Можно указать конкретный размер в пикселях или в процентах от свободного пространства. |
| border | Любое положительное целое число | Ширина границы таблицы в пикселах. | |
| cellspacing | 0 если borderне задан, 2 в противном случае | Любое положительное целое число | Каждую ячейку браузер обводит своей собственной рамкой, и этот параметр задает ширину пространства между ними. |
| cellpadding | Любое положительное целое число | Ширина пространства между рамкой ячейки таблицы и ее содержанием внутри. | |
| bgcolor | Обычно белый | Цвет в 16ом формате или название цвета | Цвет фона таблицы |
| background | - | Любое изображение, которое задается адресом | Изображение, которое будет отображаться в виде фона таблицы. |
| Cols | - | Любое положительное целое число | Количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. |
| Frame | border | Void - Не отрисовывать границы. Border - Граница вокруг таблицы. Above - Граница по верхнему краю таблицы. Below - Граница снизу таблицы. Hsides - Добавить только горизонтальные границы (сверху и снизу таблицы). Vsides - Рисовать только вертикальные границы (слева и справа от таблицы). Rhs - Граница только на правой стороне таблицы. Lhs - Граница только на левой стороне таблицы. | Сообщает браузеру, где отображать границы вокруг таблицы. Толщина границы указывается с помощью параметра border. |
| rules | В зависимости о значения атрибута border. | All - Линия рисуется вокруг каждой ячейки таблицы. Groups - Линия отображается между группами, которые образуются тегами < thead>, < tfoot>, < tbody>, < colgroup> или < col>. Cols - Линия отображается между колонками. None - Все границы скрываются. Rows - Граница рисуется между строками таблицы, созданных через тег. | cообщает браузеру, где отображать границы между ячейками. Толщина границы и ее цвет указывается с помощью параметров border и bordercolor. |
Таблица состоит из строк, строки состоят из ячеек. Количество ячеек в каждой строке таблицы должно быть одинаковым. Таким образом, структура таблицы имеет вид:
< TABLE> < TR> < TD> Если в таблице два тега TR, то в ней две строки.< /TD> < TD> Второй столбец< /TD> < TD> Третий столбец< /TD> < /TR> < TR> < TD> В этой таблице три< /TD> < TD> столбца< /TD> < TD> Это последняя ячейка < /TD> < /TR> < /TABLE>
Строки таблицы создаются с помощью тегов < TR> … < /TR>, а ячейки создаются с помощью тегов < TD> … < /TD>. Кроме того можно задать специальный вид ячеек – заголовочные. Это можно сделать с помощью тега < TH>. Ячейки, созданные с помощью тега < TH>, имеют специальное форматирование: текст выделен жирным и выровнен по центру.
Между тегами создания строк и тегами создания ячеек не рекомендуется ставить пробелы либо другие символы. Рассмотрим пример простейшей таблицы:
< table border=1> < tr> < td> Первая ячейка< /td> < td> Вторая ячейка< /td> < /tr> < tr> < td> новый< /td> < td> ряд< /td> < /tr> < /table>В этом случае будет такая вот таблица (рис. 3.1):
| Первая ячейка | Вторая ячейка |
| новый | ряд |
Рисунок 3.1 – Результат примера
Тег < TR> имеет несколько атрибутов, которые приведены в таблице 3.6.
Таблица 3.6 Атрибуты элемента строка - < TR>.
| Атрибут | Значение по умолчанию | Возможные значения | Описание |
| align | Left | Left, Center, Right, Justify | Выравнивание внутри всех ячеек таблицы |
| valign | Top | Top, Middle, Bottom, Baseline | Выравнивание по вертикали. |
| bgcolor | Обычно белый | Цвет в 16ом формате или название цвета | Цвет фона таблицы |
| background | - | Любое изображение, которое задается адресом | Изображение, которое будет отображаться в виде фона таблицы. |
Тег < TD> предназначен для создания ячейки таблицы, атрибуты тега приведены в таблице 3.7. В ячейке можно сделать вложенную таблицу, а в ней еще одну.
Таблица 3.7 Атрибуты элемента ячейка - < TD>.
| Атрибут | Значение по умолчанию | Возможные значения | Описание |
| align | Left | Left, Center, Right, Justify | Выравнивание внутри всех ячеек таблицы |
| valign | Top | Top, Middle, Bottom, Baseline | Выравнивание по вертикали. |
| bgcolor | Обычно белый | Цвет в 16ом формате или название цвета | Цвет фона таблицы |
| background | - | Любое изображение, которое задается адресом | Изображение, которое будет отображаться в виде фона таблицы. |
| rowspan | Любое положительное целое число | Объединяет указанное количество ячеек в одну по вертикали. | |
| colspan - | Любое положительное целое число | Объединяет ячейки по горизонтали. | |
| width | - | Любое положительное целое число | Рекомендуемые размеры ячейки по горизонтали. |
| height | Любое положительное целое число | Рекомендуемые размеры ячейки по вертикали. | |
| Nowrap | Запрещает перенос текста на другую строку |
Рассмотрим пример управления свойствами ячеек таблицы.
< table border=2> < tr> < td> 1< /td> < td> 2< /td> < td> 3< /td> < td> 4< /td> < td> 5< /td> < /tr> < tr> < td colspan=2 rowspan=2> 6< /td> < td colspan=2> 7< /td> < td rowspan=2> 8< /td> < /tr> < tr> < td> 9< /td> < td> 10< /td> < /tr> < tr> < td> 11< /td> < td> 12< /td> < td> 13< /td> < td> 14< /td> < td> 15< /td> < /tr> < /table>А вот как это все выглядит (рис. 3.2):
Рисунок 3.2 – Результат примера
Как видите? в первой строке 5 элементов < td>. Во второй строке элементов < td> теперь уже всего 3, но заметьте, что если просуммировать все значения colspan, то снова получится 5. По умолчанию для каждой ячейки параметр colspan равен 1.
При создании таблиц можно использовать ряд дополнительных элементов. Описание этих элементов приведено в таблице 3.8.
Таблица 3.8 Элементы создания таблиц.
| Элемент | Назначение |
| < caption> | Заголовок таблицы. |
| < col> | Позволяет задать атрибуты колонки. Ширина и другие атрибуты одной или нескольких колонок таблицы. |
| < colgroup> | Ширина и стил одной или нескольких колонок таблицы. |
| < tbody> | Для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили. |
| < tfoot> | Для хранения одной или нескольких строк, которые представлены внизу таблицы. |
| < thead> | Для хранения одной или нескольких строк, которые представлены вверху таблицы. |