Модуль Tables

Представление ячеек таблицы

Представление строк таблицы

Представление заголовка таблицы

Представление таблицы

Структура таблицы

Модуль Basic Tables

При формировании таблиц в Web-страницах используются те же термины, что и в текстовых процессорах и программах электронных таблиц: строки, столбцы и ячейки. Содержимым ячейки таблицы может быть не только текст, но и изображение, другая таблица, а также любой мультимедийный элемент.

Основные элементы представления таблиц:

· представление всей таблицы – элемент table;

· представление заголовка таблицы – элемент caption;

· представление строки таблицы – элемент tr;

· представление ячейки таблицы – элементы th и td.

Эти элементы определены в модуле Basic Tables.

Представление таблиц должны располагаться в теле документа (внутри элемента body).

Таблица в Web-странице имеет следующую структуру:

· вся таблица заключается в контейнерный элемент <table>…</table>;

· заголовок таблицы (если он есть) заключается в контейнерный элемент <caption>…</caption>, который должен следовать сразу же за начальным тегом элемента <table>;

· каждая строка таблицы заключается в контейнерный элемент <tr>…</tr>;

· каждая ячейка строки таблицы заключается в контейнерный элемент <th>…</th> (для ячеек заголовков столбцов таблицы), либо в контейнерный элемент <td>…</td> (для ячеек данных таблицы).

Количество ячеек в строке таблицы должно быть одинаковым для всей таблицы.

Пример 4.3.88. Задание простой таблицы:

<table>

<caption>Таблица оценок по дисциплинам</caption>

<th>Номер группы</th>

<th>Фамилия, имя и отчество студента</th>

<th>Оценка по математике</th>

<th>Оценка по физике</th>

<th>Оценка по химии</th>

<th>Средняя оценка</th>

</tr>

<td>ТР-11</td> <td>Иванов<br/>Иван Иванович</td>

</tr>

<td>ТР-12</td> <td>Петров<br/>Петр Петрович</td>

</tr>

<td>ТР-12</td><td>Сидоров<br/>Сидор Сидорович</td>

</tr>

</table>

Вывод этого фрагмента Web-страницы будет иметь следующий вид:

Рассмотрим более подробно элементы представления таблицы.

Таблица помещается в контейнер <table>…</table>, т.е. должна начинаться тегом <table> и заканчиваться обязательным тегом </table>.

Помимо общих атрибутов class, dir, id, lang, style и title для элемента table в спецификации HTML определено множество атрибутов, однако все они являются либо стилевыми, либо не реализованными в большинстве Web-браузеров. Единственный атрибут, который рекомендуется использовать для элемента table – это атрибут border. При его отсутствии границы между ячейками таблицы не выводятся, как это видно из примера 4.3.88. Атрибут задается либо по имени, либо с пустым значением (border="").

Ниже приведены свойства стилей, которые можно использовать для элемента table.

Свойство border-collapse позволяет выбрать модель границ ячеек таблицы. По умолчанию (значение separate) используется модель с отдельными границами для каждой ячейки – . Модель ячеек с общими границами (как в таблицах Word) задается с помощью значения collapse – .

Со свойством border-collapse тесно связано свойство border-spacing, которое позволяет задать расстояние между границами ячеек (в абсолютных или относительных единицах длины). Это свойство действует, если свойство border-collapse не задано, либо его значение равно separate. Если для свойства border-spacing задано одно значение, то оно определяет расстояние и по вертикали, и по горизонтали, если два значения, то первое значение задает расстояние по горизонтали, а второе – по вертикали. Если значение для свойства border-spacing не задано, по умолчанию предполагается, что расстояние между границами ячеек по горизонтали и вертикали равно 2 пикселя.

Свойства border-collapse и border-spacing действуют только в том случае, если в элементе table задан атрибут border.

Для управления выводом пустых ячеек, т.е. ячеек без содержимого, либо ячеек, содержащих пробелы, можно использовать свойство empty-cells. Если значение этого свойства равно show или свойство не задано, границы пустых ячеек выводятся. Если надо отменить вывод границ пустых ячеек, для свойства empty-cells задается значение hide.

Для задания стилей вывода шрифта и текста (см. 4.3.13 и 4.3.14), цвета текста и цвета фона или изображения в качестве фона (см. 4.3.15) для всех ячеек таблицы можно использовать соответствующие свойства CSS. Вертикальное выравнивание во всех ячейках таблицы задается с помощью свойства vertical-align (см. 4.3.17.2.3).

Выравнивание таблицы по центру с помощью стилей выполняется по-разному в разных Web-браузерах. Для выравнивания по центру в Internet Explorer необходимо заключить элемент table в контейнер <p>…</p> или <div>…</div> со значением стиля text-align:center. В остальных Web-браузерах (Firefox, Opera и Netscape) необходимо задать для элемента table свойства margin-left:auto и margin-right:auto.

Элемент table рассматривается Web-браузером как блоковый элемент. Чтобы задать «обтекание» таблицы слева или справа, необходимо использовать свойство float (см. 4.3.17.2.1) Если необходимо прервать это «обтекание» в заданном месте, можно использовать свойство clear (см. 4.3.17.2.2).

Для задания рамок, полей и отступов для всей таблицы используются следующие свойства стилей:

· для задания рамки или части рамки для всей таблицы – свойства границы (свойства семейства border – см. 4.3.16.3, 4.3.16.4, 4.3.16.5 и 4.3.16.6);

· для задания ширины поля между рамкой (если она есть) или таблицей (если рамки нет) и окружающими элементами – свойства ширины полей (свойства семества margin – см. 4.3.16.1 и 4.3.16.2);

· для задания ширины отступа по разным направлениям между рамкой и таблицей – свойства ширины отступа (свойства семейства padding – см. 4.3.16.7).

Ширина и высота таблицы определяется автоматически при ее заполнении данными. При этом Web-браузер пытается построить таблицу так, чтобы она не выходила за границы экрана по ширине и высоте, а также в соответствии с «естественной» шириной и высотой содержимого ячеек (без переноса слов в ячейках). Если необходимо задать фиксированную ширину и/или высоту таблицы, можно использовать свойства width и height (см. 4.3.17.2.4). При увеличении размеров таблицы по сравнению с «естественным» размером пропорционально увеличиваются размеры всех ячеек таблицы. Поскольку Web-браузер строит «естественную» таблицу наименьшего размера, высоту таблицы уменьшить нельзя без потери данных или части данных в ячейках таблицы, поэтому уменьшение высоты таблицы просто игнорируется. Уменьшение ширины таблицы ограничивается переносом слов в ячейках таблицы (однако при этом увеличивается высота таблицы). Поэтому уменьшение ширины таблицы, ниже значения, полученного при переносе слов, также игнорируется.

Пример 4.3.89. Задание стилей для элемента table:

1. table#markTable1 {

width:650px; height:250px;

background-color: lightyellow;

border:10pt lime outset; border-spacing: 4px 8px;

padding: 6px; text-align: center

}

Изменим начальный тег элемента table из примера 4.3.87 следующим образом:

Тогда таблица из примера 4.3.88 примет следующий вид:

2. table#markTable2 {

width:650px; height:250px; border-collapse:collapse;

background-image: url('images/woodgran.gif');

border:4pt blue double; text-align: center

}

Изменим начальный тег элемента table из примера 4.3.88 следующим образом:

Тогда таблица из примера 4.3.88 в Web-браузере Firefox примет следующий вид:

3. Изменим в примере 4.3.89(1) вторую строку таблицы следующим образом:

<td>ТР-12</td> <td>Петров<br/>Петр Петрович</td>

т.е. для Петрова отсутствуют данные об экзаменах. Тогда вывод таблицы будет иметь следующий вид:

Если в примере 4.3.89(1) добавить в правило стилей таблицы markTable1 свойство empty-cells: hide, то вывод таблицы изменится следующим образом:

Контейнерный элемент caption задает заголовок таблицы. Этот элемент, если он есть, должен следовать сразу за открывающим элементом table. Элемент caption, помимо общих атрибутов class, dir, id, lang, style и title, имеет единственный атрибут align, задающий выравнивание заголовка, однако вместо него рекомендуется использовать свойство text-align.

Остальные стили шрифтов и стили текста, а также стили цвета и фона, поле, рамки и отступы задаются так же, как и для элемента table. Кроме этого, для элемента caption определено свойство стилей caption-side, которое (кроме значения inherit) может принимать одно из двух значений: top (заголовок выводится до таблицы) или bottom (заголовок выводится после таблицы).

Пример 4.3.90. Задание стилей для элемента caption:

caption {

font-size: 14pt; font-family: Arial;

font-style: italic; font-weight: bold;

text-align: left; text-indent:15pt; color: maroon;

margin-bottom: 10pt; margin-top: 20pt;

caption-side:top

}

Тогда таблица из примера 4.3.88 со стилями, заданными в примере 4.3.89(2) примет следующий вид:

Для задания строк в таблице используется контейнер <tr>…</tr>. Для него могут быть заданы общие атрибуты class, dir, id, lang, style и title. Все остальные параметры строки можно задать с помощью стилей.

Для элемента tr можно задать стили шрифтов, стили текста, а также стили цвета и фона аналогично заданию стилей для элемента table. Вертикальное выравнивание в ячейках строки таблицы задается с помощью свойства vertical-align (см. 4.3.17.2.3).

Для строки таблицы, как и для всей таблицы, можно задавать свойства width и height, однако следует иметь в виду, что при изменении ширины строки таблицы, изменится также ширина всех остальных строк таблицы.

Стили для полей, рамок и отступов для элемента tr не действуют, точнее, действуют не во всех Web-браузерах (их нужно задавать для каждой ячейки строки отдельно).

Пример 4.3.91. Задание стилей для элемента tr:

.header {

font-family: Verdana; font-size:10pt;

height: 20px; color: purple;

background-color:#ECECEC

}

Изменим начальный тег элемента tr для строки заголовка из примера 4.3.88 следующим образом:

Тогда таблица из примера 4.3.88 со стилями, заданными в примерах 4.3.89(2) и 4.3.90 примет следующий вид:

Контейнеры <th>…</th> и <td>…</td> используются для вывода ячеек таблицы в строках таблицы. Контейнер <th>…</th> используется обычно в заголовках, а контейнер <td>…</td> – в данных таблицы.

Содержимое контейнера <th>…</th> по умолчанию отображается полужирным шрифтом и располагается по центру (по вертикали и горизонтали), а содержимое контейнера <td>…</td> – нормальным шрифтом с выравниванием влево по горизонтали и посередине по вертикали.

Если количество ячеек в разных строках отличается друг от друга, то Web-браузер автоматически добавляет пустые ячейки в конце строки, т.е. таблицы, в которых в разных строках содержится разное количество столбцов одного и того же размера, не допускаются.

Каждую отдельную ячейку таблицы можно рассматривать как область для независимого форматирования. Внутри ячейки допустимо использование практически всех элементов языка HTML, которые могут появляться в теле документа, в том числе элементов, управляющих расположением текста – p, br, hr, элементов заголовков, форматирования символов, вставки графических изображений – img, гипертекстовых ссылок – а и т. д.

Однако область действия элементов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки, независимо от наличия завершающего тега элемента.

Помимо общих атрибутов class, dir, id, lang, style и title в элементах th и td можно задавать атрибуты colspan и rowspan. Значением этих атрибутов является целое число, задающее соответственно количество столбцов или количество строк, которые занимает ячейка таблицы. По умолчанию, значение этих атрибутов равно 1, т.е. ячейка занимает один столбец и одну строку.

Для каждой ячейки таблицы можно задать стили шрифтов, стили текста, стили цвета и фона, рамку или части рамки, отступ по разным направлениям между рамкой и содержимым ячейки так же, как это делается для элемента table.

Для ячейки, так же как и для строки таблицы можно задать вертикальное выравнивание содержимого с помощью свойства vertical-align.

Если необходимо задать фиксированные размеры ячейки, можно использовать свойства width и height. Однако при использовании этих свойств следует иметь в виду, что размеры других ячеек столбца и строки, на пересечении которых находится изменяемая ячейка, также изменятся.

Как уже указывалось, перенос слов в ячейках таблицы, т.е. вывод содержимого ячейки в несколько строк, Web-браузер при уменьшении ширины таблицы выполняет автоматически. Если необходимо отключить перенос в ячейке, можно использовать свойство white-space со значением nowrap, а если необходимо задать фиксированные размеры ячейки, можно использовать атрибуты width и height. При использовании этих атрибутов следует иметь в виду, что размеры других ячеек столбца и строки, на пересечении которых находится изменяемая ячейка, также изменятся.

Пример 4.3.92. Задание стилей для элемента th и td:

1. td {

border:7px azure inset

}

th {

border:7px #FF00FF ridge;

padding-left: 3px; padding-right: 3px

}

td.select {

background-color:#F0F1FF;

font-size: 14pt; font-weight:bold

}

td.ge4 {

background-color:#FFE8EF

}

Заключим заголовок таблицы из примера 4.3.88 с изменениями в заголовке, сделанными в примере 4.3.91. Изменим начальные теги элементов td для столбцов «Фамилия, имя и отчество студента» и «Средняя оценка» в первой строке данных в таблице следующим образом:

<td class="select">.

Затем изменим начальные теги элементов td для этих же столбцов у студентов, средняя оценка которых превышает 4 балла (во второй и третьей строке данных) в таблице из примера 4.3.88 следующим образом:

<td class="select ge4">.

Кроме того, изменим заголовок столбцов таблицы следующим образом:

<th rowspan="2">Номер группы</th>

<th rowspan="2">Фамилия, имя и отчество студента</th>

<th colspan="3">Оценки по дисциплинам</th>

<th rowspan="2">Средняя оценка</th>

</tr>

<th>Математика</th>

<th>Физика</th>

<th>Химия</th>

</tr>

Тогда таблица из примера 4.3.88 со стилями, заданными в примерах 4.3.89(1), 4.3.90 и 4.3.91 примет следующий вид:

2. td {

border:3px blue solid

}

th {

border:4pt blue double

}

td.top {

vertical-align: top

}

td.left {

text-align: left; font-weight: bold

}

td.meanMark {

background-color:#E2FEE6; font-family: Tahoma;

font-size: 14pt; font-weight: bold; color:red

}

.nowrap {

white-space:nowrap

}

Изменим начальные теги элементов td для столбца «Номер группы» в таблице из примера 4.3.88 следующим образом:

<td class="top">.

Затем изменим начальные теги элементов td для столбца «Фамилия, имя и отчество студента» в таблице из примера 4.3.88 следующим образом:

<td class="left">.

Кроме этого, изменим начальный тег элемента th для заголовка столбца «Средняя оценка», сформированного в пункте 1 этого примера следующим образом:

<th rowspan="2" class="nowrap">Средняя оценка</th>.

И, наконец, изменим начальные теги элементов td для столбца «Средняя оценка» в таблице из примера 4.3.88 следующим образом:

<td class="meanMark">.

Тогда таблица из примера 4.3.88 со стилями, заданными в примерах 4.3.89(2), 4.3.90 и 4.3.91 и с учетом изменений, произведенных в заголовке в пункте 1 этого примера, примет следующий вид: