2015-05-10
721
Создание таблиц
Цель работы:
Изучить основы организации таблиц в HTML.
Базовые сведения:
По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег <PRE>), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
|
|
|
Для добавления таблицы на веб-страницу используется тег-контейнер TABLE. Таблица должна содержать хотя бы одну строку и колонку.
Для добавления строк используются теги <tr> и </tr>. Чтобы разделить строки на колонки применяются теги <td> и </td>.
Параметры таблицы
Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге TABLE.
<table параметр1=... параметр2=...>
Описание параметров таблицы и их свойств описано ниже.
| Свойство | Значение | Описание | Пример |
| align= | Left Right Center | Выравнивание таблицы | align=center |
| background= | URL | Фоновый рисунок | background=pic.gif |
| bgcolor= | #rrggbb | Цвет фона таблицы | bgcolor=#FF9900 |
| border= | n | Толщина рамки в пикселах | border=2 |
| bordercolor= | #rrggbb | Цвет рамки | bordercolor=#333333 |
| bordercolordark= | #rrggbb | Тень рамки | bordercolordark=#f0f0f0 |
| cellpadding= | n | Расстояние между ячейкой и ее содержимым | cellpadding=7 |
| cellspacing= | n | Дистанция между ячейками | cellspacing=3 |
| nowrap | Запрещает переносы строк в тексте | <table nowrap> | |
| frame= | Void Above Below Lhs Rhs Hsides Vsides Box | Задание типа рамки таблицы | frame=hsides |
| valign= | Top Bottom | Выравнивание по высоте | valign=top |
| width= | n n% | Минимальная ширина таблицы, можно задавать в пикселах или процентах | width=90% |
| height | n n% | Минимальная высота таблицы, можно задавать в пикселах или процентах | height=18 |
Примечание
1. Таблица, если не указано особо, всегда выравнивается по левому краю;
2. Параметр background, отвечающий за рисунок фона, своеобразно понимается в разных браузерах. IE вставляет картинку во всю таблицу, если таблица по размеру больше фонового рисунка, он повторяется по горизонтали или вертикали. Netscape добавляет фоновое изображение в каждую ячейку таблицы;
|
|
|
3. По умолчанию, таблица выводится без рамки. Однако Netscape добавляет тонкую линию между ячеек. Чтобы ее не было, всегда указывайте параметр border=0;
4. Если ширина таблицы не указана, она подгоняется под содержание ячеек.
