Главная страница Случайная страница
Разделы сайта
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Организация таблиц, параметры таблиц.
|
|
Таблицы в HTML документах используются в двух случаях: Представление табличных данных на странице.
Верстка HTML документа (создание модульной сетки документа).
Таблица создается при помощи тега < TABLE>. Дополнительные параметры тега < TABLE> приведены в табл. 7.
Таблица 7.
| Основные параметры тега < TABLE> | |
| Параметр | Значение |
| align | Задает выравнивание таблицы. align=left|center|right |
| border | задает в пикселях толщину линий таблицы |
| bgcolor | Устанавливает цвет фона документа |
| background* | Устанавливает изображение фона документа |
| cellpadding | задает в пикселях ширину промежутков между содержимым ячейки |
| и ее границами, то есть задает поля внутри ячейки | |
| cellspacing | задает в пикселях ширину промежутков между ячейками |
| width | задает ширину таблицы в пикселях, процентах или частях |
*При просмотре таблиц в браузерах семейства Netscape картинка, заданная параметром background автоматически становится фоном каждой ячейки, а не всей таблицы.
Для создания заголовка таблицы используется тег < CAPTION>. По умолчанию заголовки центрируются и размещаются либо над (< САРТION align=”top”>), либо под таблицей (< САРТION align=”bottom”>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы.
Каждая новая строка таблицы создается тегом < ТR> (Таble Row). Дополнительные параметры тега < TR> приведены в табл. 8.
| Таблица 8. | |
| Основные параметры тега < TR> | |
| Параметр | Значение |
| align | Задает горизонтальное выравнивание информации в ячейках |
| align=left|center|right|justify | |
| valign | Задает вертикальное выравнивание информации в ячейках |
| align=top|middle|bottom |
Внутри строки таблицы размещаются ячейки с данными, создаваемые тагами < ТD>. Число тагов < ТD> в строке определяет число ячеек (столбцов) таблицы. Дополнительные параметры тега < TR> приведены в табл. 9.
Для задания заголовков столбцов и строк таблицы используется тег заголовка < ТН> (Таblе Неаder). Этот тег аналогичен < ТD> с разницей лиш в том, что текст в теге < ТН> по умолчанию выделяется жирным шрифтом и располагается по центру ячейки.
Таблица 9.
| Основные параметры тега < TD> | |
| Параметр | Значение |
| align | Задает горизонтальное выравнивание информации в ячейке |
| align=left|center|right|justify | |
| valign | Задает вертикальное выравнивание информации в ячейке |
| align=top|middle|bottom | |
| colspan | Объединение столбцов в строке. Например, colspan=2 |
| rowspan | Объединение строк в столбце. Например, rowspan=3 |
| width | Задает ширину ячейки в пикселях или процентах |
| nowarp | Запрещение перехода текста в ячейке на новую стоку |
Пример HTML кода для создания простой таблицы приведен ниже:
< TABLE width=" 100%" cellpadding=" 0" cellspacing=" 0" border=" 1" > < CAPTION align=”top”> Статистика посещений сайтов online
тестирования< /CAPTION> < TR>
< TH> URL< /TH> < TH> Хосты< /TH> < TH> Хиты< /TH>
< /TR > < TR>
< TD> www.brainbench.com< /TD>
< TD> 12136< /TD>
< TD> 22178< /TD>
< /TR>
< TR>
< TD> www.transmarket.net/education< /TD>
< TD> 12< /TD>
< TD> 27< /TD>
< /TR>
< /TABLE>
5.2. Табличная верстка: построение модульной сетки при помощи таблиц.
Благодаря наличию большого числа параметров, а также возможности создания границ нулевой толщины, таблица может выступает в роли невидимой модульной сетки, относительно которой добавляется текст, изображения и другие элементы, организуя информацию на странице.
Возможности табличной верстки:
• Создание колонок
• «Резиновый» макет
• «Склейка» изображений
• Фоновые рисунки
• Выравнивание элементов
• Особенности браузеров Недостатки табличной верстки:
• Долгая загрузка
• Громоздкий код
• Плохая индексация поисковиками
• Нет разделения содержимого и оформления
• Несоответствие стандартам
|
|