![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Теоретический материал. Таблицы являются очень удобным средством форматирования данных на Web странице ⇐ ПредыдущаяСтр 2 из 2
Таблицы являются очень удобным средством форматирования данных на Web странице. Основное удобство заключается в том, что браузер берет на себя заботу о прорисовке рамки таблицы. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере и, разумеется, с размером находящихся в ячейках таблицы строк текста и рисунков. Кроме того, таблицы позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением. Необходимо помнить, что последовательность элементов описывает таблицу сверху вниз и справа налево. Элемент таблица создается с помощью тега < table> … < /table>.. Вся таблица должна находиться внутри него. Он автоматически переводит строку до и после таблицы. Атрибуты тега < table> позволяют управлять отображением таблицы; изменять ее цвет, толщину рамки и многое другое. Атрибуты таблицы приведены в таблице 3.5. Таблица 3.5. Атрибуты тега < table>
Таблица состоит из строк, строки состоят из ячеек. Количество ячеек в каждой строке таблицы должно быть одинаковым. Таким образом, структура таблицы имеет вид: < 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>.
Тег < TD> предназначен для создания ячейки таблицы, атрибуты тега приведены в таблице 3.7. В ячейке можно сделать вложенную таблицу, а в ней еще одну.
Таблица 3.7 Атрибуты элемента ячейка - < TD>.
Рассмотрим пример управления свойствами ячеек таблицы. < 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 Элементы создания таблиц.
|