Web дизайн\Учебник по HTML

Глава 8. Основы построения таблиц

• Создание таблицы
  • Элемент <table>
  • Названия и резюме
  • Строки таблицы
  • Элементы ячеек таблицы
  • Диапазон ячейки
  • Цвета ячеек и строк
• Дополнительные атрибуты таблиц
  • Атрибут widht
  • Атрибуты border и align
  • Атрибуты cellpadding и cellspacing
• Резюме

Вы уже знаете, что для логической организации текста на веб-странице имеются такие средства HTML, как списки и абзацы. На следующем уровне сложности на ходятся таблицы, используемые для разделения страницы на строки и столбцы. С их помощью можно более точно расположить данные, текст, ссылки и даже изо ражения. В главе 9 рассказывается о дополнительных возможностях таблиц, дизайне и разметке страниц на их основе. Что касается этой главы, то в ней мы обсудим следующее:

• элемент <table>;
• названия таблиц;
• строки таблиц и заголовки;
• создание ячеек таблиц;
• дополнительные свойства и атрибуты элемента <table>

Создание таблицы

Контейнерный элемент table используется для того, чтобы сводить вместе группы других элементов, определяющих строки, а внутри каждой строки — ячейки. Ра бота с таблицами на XHTML очень напоминает работу с приложениями для соз дания электронных таблиц. Таблица XHTML состоит из строк и столбцов. Место пересечения конкретной строки с конкретным столбцом называется ячейкой. Каждая отдельная ячейка содержит данные. Вообще, ячейки могут содержать все что угодно — будь то текст или другие элементы XHTML, например гиперссылки и изображения. Для создания таблицы вам потребуется написать следующий код:

<table>
<сарtion>Название таблицы</сарtion>
<tr><th>3aголовок столбца l</th><th>3aголовок  столбца 2</th>
<th>3аголовок столбца 3</th></tr>
<tr><td>Ячейка 1-1</td><td><Ячейка 1-2</td><td>Ячейка 1-3/td>/tr>
<tr><td>Ячейка 2-1</td><td><Ячейка 2-2</td><td>Ячейка 2-3/td>/tr>
... и еще много строк...
</table>

Главным здесь является контейнер table. Необязательный элемент <caption>может содержать пояснение к таблице или ее название. Внутри <table> существуют такие элементы: контейнер <tr> — задает строку; внутри нее могут быть элементы <td>, задающие ячейку. Большинство таблиц может иметь также элементы <th> — они позволяют задавать заголовки строк или столбцов.

ПРИМЕЧАНИЕ

Несмотря на то, что такой элемент, как таблица, уже давно стал общепринятым и чрезвычайно популярным, многие браузеры мобильных телефонов и PDA испытывают большие сложности с ее отображением. Поэтому если вы хотите охватить и ту часть аудитории, которая пользуется указанными устройствами, то я не советовал бы вам оформлять страницы таблицами, лучше уж использовать списки или преформатированный текст. Впрочем, наилучшим выходом из положения все равно является создание двух вариантов страницы: на основе таблицы и на основе <рге>.

Элемент <table>

Любая таблица на XHTML начинается с элемента-контейнера <table>, содержащего все элементы, необходимые для ее создания. Между тегами <table> и </table> вы вставляете контейнеры <tr>, предназначенные для определения строк. Далее, каждый <tr> содержит некоторое количество элементов <td>, задающих ячейки - минимальные единицы таблицы, в которые вы, собственно, и помещаете данные.

1. Чтобы начать создавать таблицу, напишите в HTML-документе два тега: <table> и</table>.

2. Между этими тегами вставьте необходимый набор тегов <tr>, </tr>, соответствующий числу строк.

3. Теперь после первого <tr> введите столько тегов <th>, </th>, сколько в вашей таблице заголовков столбцов (или сколько столбцов). Между каждым из <th>, </th> не забудьте ввести текст. При этом помните, что эти элементы не являются обязательными и в большинстве графических браузеров приводят только к тому, что текст, заключенный между ними, печатается жирным шрифтом. Если хотите, используйте обычный <td> вместо <th>.

4. Наконец, во всех оставшихся строках после каждого <tr> вставьте элементы <td> по количеству столбцов.

При создании таблицы следует помнить, что количество заголовков столбцов должно соответствовать количеству столбцов и наоборот. То есть если у вас есть три <th> в первой строке, то во всех остальных строках должно быть по три <td> (На самом деле можно при определенных обстоятельствах пропускать ячейки, но мы не будем рассматривать такой случай вплоть до параграфа «Диапазон ячейки».) Таблица будет отображаться некорректно, если в ней есть несоответствие количества элементов.

ПРИМЕЧАНИЕ

Что такое пустая ячейка? Ее можно создать с помощью кода «неразрывного пробела» (&nbsp), помещенного внутрь определения ячейки Например, <td>&nbsp</td> создаст в таблице пустую ячейку.

Рассмотрим пример обычной таблицы:

<table border="1">
<caption>Работники региональных отделов продаж</caption>
<tr><th>Западный</th><th>Южный</th><th>Северный</th></tr>
<tr><td>Владимир Б.</td><td>Наталья Б.</td><td>Екатерина Ж.</td></tr>
<tr><td>Дмитрий Ш.</td><td>Екатерина В.</td><td>Татьяна В.</td></tr>
<tr><td>Александр Г.</td><td>Apтyp X.</td><td>Ирина С. </td></tr>
</table>   

ПРИМЕЧАНИЕ

Несмотря на то что у элемента <table> есть множество атрибутов, одним из самых главных, пожалуй, является border. Его единичное значение приводит к созданию рамки и линий внутри таблицы толщиной в один пиксел. Чем больше значение border, тем толще рамка и линии.

Процесс создания таблицы чем-то напоминает процесс создания списков и абзацев. И там и там используются контейнеры. Как и списки, и абзацы, таблица отде ляется от остальных элементов небольшим промежутком.

На рисунке 8.1 показано, как этот пример может выглядеть в браузере.

Рис. 8.1. Обычная таблица, написанная на XHTML, — это прекрасное средство организации данных

Названия и резюме

Элемент <caption> — это контейнер, в котором обычно пишется название таблицы или пояснение к ней вместе с любой HTML-разметкой, которую вы хотите приме нить к шрифту. Например:

<сарtiоn><b>Уровень розничных лродаж</b> согласно
 журналу <i>Wall Street</i></caption>

Я сказал, что в <сарtiоn> применима любая разметка. Тем не менее понятно, что неко торые элементы, например списки, внутри названия таблицы — это нонсенс. В то же время гиперссылки в этом месте иногда бывают оправданны, — например, они могут указать на ту область в Интернете, где можно получить более подробную информа цию о таблице или прочитать исходные документы, из которых были взяты даннные.

Если вы решили использовать <caption>, то этот тег должен следовать сразу же за тегом <table>. Обратите внимание на то, что в таблице не может быть более одного <caption>.

По умолчанию <caption> отображается над таблицей. Однако можно заставить браузер показывать его и под ней Хотя XHTML Strict этого и не любит, но, если вы используете DTD для XHTML Transitional, все будет нормально. Все, что нужно, - это атрибут align. Он может принимать значения top или bottom. В первом случае название таблицы появится на привычном месте, во втором — под таблицей (большинство браузеров автоматически выравнивают название горизонтально по центру). Например:

 <caption аlign="boton">Динамика цен на продовольствие
 Источник: USA Today</caption> 

Каждая создаваемая вами таблица может содержать так называемое «резюме». Это строка текста, которая помогает пользователям голосовых и иных невизуальных специальных браузеров распознавать предназначение и структуру таблицы. Резюме добавляется при помощи атрибута элемента <table> под названием summary. Текст вставляется в кавычках сразу после имени атрибута. Рассмотрим пример:

<table summагу="Эта таблица показывает динамику роста цен
 на продовольствие в Соединенных штагах Америки.
В западном регионе средний показатель составлял 500 весной
и 600 летом: в северном регионе за тот же период показатель 
изменился с 300 до 400: что касается северного региона, 
то весной средний показатель составил 200 а летом - 600 ">
<caption><b>Динамика цен за весну и лето</b></caption>
<tr><th>Квартал</th><th>3aпад</tn><th>Ceвep</th><th>Юr</thx/tr>
<tr><th>Beснa</th><th>500</th><th>300</th><th>200</th></tr>
<tr><th>Лето</th><th>600</thxth>400</thxth>650</thx/tr>
</table>

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

У элементов строк может быть два атрибута, которые, возможно, заинтересуют вас. Это align и valign. Они используются для определения выравнивания текста в ячейках по горизонтали и вертикали соответственно. В следующем примере используется атрибут align. Это показано на рис. 8.2.

<table border="l">
<tr align="center"><th>Год onpoca</th>
<th>Я предпочитаю кофе</th><th>Я предпочитаю чай</th></tr>
<tr align="right"><th>1980</th><td>65%</td><td>35%</td></tr>
<tr align="right"><th>1990</th><td>60%</td><td>40%</td></tr>
<tr align="nght"><th>2000</th><td>45%</td><td>55%;</td></tr>
</table>

Атрибут align может иметь значения center, left и right (что означает выравнивание по центру, левому и правому краю). У атрибута valign могут быть значения: top, bottom и center (верх, низ, середина). Эти атрибуты очень полезны, особенно при выравнивании изображений, как показано в следующем примере:

 <table border="1">
<tr valign="top">
<td><img src="image1.png"></td>
<td><img src="image2.png"x/td>
<td><img src="1mage3.png"></td>
</tr>
</table>

Рис. 8.2. Текст в ячейках выравнен по правому краю

Рис. 8.3. В первой таблице данные в ячейках выравниваются по верхнему краю, во второй — по центру

Хотя изображения должны подстраиваться по высоте под самое «высокое» из них, в этом примере они выравниваются по верхнему краю своих ячеек, что придает таблице более стройный вид. На рисунке 8.3 показана таблица с таким выравниванием, а также таблица с выравниваем center.

СОВЕТ

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

Элементы ячеек таблицы

Вы уже использовали элементы <th> и <td> для добавления заголовков и данных и знаете, что единственная видимая разница между ними состоит в том, что шрифт, которым написан <th>, выделяется (обычно жирным), а шрифт <td> — не выделяется. С теоретической точки зрения <th> должен отличаться от элемента обычной ячейки: это заголовочный элемент, поэтому он должен быть как-то выделен. На практике это означает выделение жирным шрифтом. Но это справедливо только для обычных графических браузеров, в текстовых же <th> должен обрабатываться особо. Поэтому пренебрегать различием не следует.

ПРИМЕЧАНИЕ

Для более полной совместимости с различными браузерами старайтесь включать <th> везде, где это требуется по смыслу. Это даст возможность лучше организовывать данные в таблицах.

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

<td align="center" valign="bottom">

Рис. 8.4. Ячейки с разным выравниванием по вертикали

Атрибут align применяется для выравнивания данных по горизонтали и може принимать значения 1 eft, п ght и center. Обратите внимание на то, что использова ние align в <td> или <th> избыточно, если этот атрибут уже имеется в <tr>, только вы не хотите для конкретной ячейки задать свое выравнивание.

val ign — это атрибут, позволяющий выравнивать данные по вертикали внутри ячейки. Возможные значения: top, bottom и center. В некоторых случаях разница не очег заметна, особенно если во всех ячейках у вас содержится примерно одинаково количество данных. Тем не менее если соседние ячейки сильно отличаются по кс личеству содержащейся в них информации, то разница при просмотре в браузер будет заметна. На рисунке 8.4 показан пример применения val ign. Обратите внимание на то, как сильно отличаются вторая и третья ячейка от первой. А все потому, что изображение в первой растянуто на всю ячейку, тогда как во второй и третьей применяется выравнивание.

Кроме этих атрибутов у <th> может быть ещё один — scope. Он позволяет указатв для чего служит <th> заголовком — для строки или столбца (значения атриб} соответственно должны быть равны row и col). Например:

 <tr><th scope="row">npoцeccop</th><td>69-1.6</td><td>G9-1.7</td></tr>

Диапазон ячейки

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

Рис. 8.5. Атрибуты colspan и rowspan позволяют растягивать ячейки на несколько строк или столбцов

Каковы бы ни были причины, инструмент для «растягивания» ячеек в ХНТД представляет собой два атрибута <th> и <td>: col span и rowspan. Один из них позляет расширять диапазон охвата по горизонтали (по строке), другой — по вертикали (по столбцу). Рассмотрим пример:

<table border="1l">
<сарtion>Спецификации компьютеров</сарtion>
<tr><th>&nbsр;</th><th>модель 100</1И><th>модель 200</th></tr>
<tr><th>npoцeccop</th><td>G9-l .6</td><td>G9-l.7</td></tr>
<tr><th>Винчестер</th><td>78 T6</td><td>90 T6</td></tr>
<tr><th>Видеокарта</th><td colspan="2">Rageous 428p</td></tr>
<tr><th>A/B Bыходl</th><td rowspan="2">Heт</td><td>EcTb</td>
</tr> <th>Порт сменного дисковода</th><td>Опционально</td></tr>
</table>

Итак, col span растягивает ячейку с надписью Rageous 428p на две колонки — назначение этого атрибута вполне понятно. Что касается rowspan, то он растягивает вт рую колонку на две строки. Таким образом, хотя надпись Опционально, казалось бы должна появиться во второй колонке (потому что она описана сразу после <th>), она появится в третьей. Важно не запутаться в этом, а для этого нужно как мож чаще проверять себя, просматривая страницу в браузере. А выглядит табли в браузере так, как показано на рис. 8.5.

Цвета ячеек и строк

Во время работы с таблицами может понадобиться изменить цвет фона некотор строк или даже отдельных ячеек. Любой элемент может иметь атрибут bgcolor, который применяется как раз для таких целей. Как вы, наверное, догадались, этот спос оформления таблиц несовместим с DTD для XHTML Strict, его можно испрль: вать только в том случае, если вы придерживаетесь стандарта XHTML Transitior.

Рис. 8.6. Разные цвета фона помогают лучше воспринимать информацию

Значением атрибута bgcolor должно быть имя или номер цвета. Применение атрибута bgcolor показано па примере:

<table>
<trxth>Регион</ th><th=Июнь</th><th>Июль</th><th>Август</th></tr>
<tr bgcolor="yellow"><th>Ceвep</th><td>600  000</td>
<td>400 000</td><td>800 000</td></tr>
<tr><th>Юг</th><td>300 000</td><td>200 000</td><td>400 000</td></tr>
<tr bgcolor-"yellow"><th>Bocток</th><td>230 000</td><td>=490 OO0</td>
<td>980 000</td></tr>
<tr><th>3aпад</th><td>320 000</td><td>120 000</td>
<td>490 000</td></tr>
</table>

СОВЕТ

Можно использовать не только имя ивете в качестве значения атрибута bgcolor, но и тройку двухразрядных шестнадцатиричных чисел в формате RGB (красный, зеленый, синий). Например, bgcolor="#fffff" задает задний фон белого цвета (глава 10).

Из рисунка 8.6 видно, что различные цвета фона имеет смысл использовать для того, чтобы выделять строки, содержащие разные данные. И бухгалтерам, и инженерам давно известно, что гораздо легче воспринимать таблицы, если их строки выделены цветом.

Дополнительные атрибуты таблиц

Кроме align и border элемент <table> может иметь еще множество других атрибутов. Они не являются обязательными, но позволяют более гочно настроить вид таблицы. Это следующие атрибуты:

• width. Устанавливает ширину таблицы —либо относительно (в процентах) ширины окна браузера, либо абсолютно (обычно в пикселах). Значения могут быть выражены как в процентах (например, border="50J"), так и в целых числах, обозначающих количество пикселов.
  
• border. Определяет ширину рамки вокруг таблицы. Значение — целочисленное (количество пикселов).
  
• align. Я бы не сказал, что это атрибут строго XHTML, но для XHTML Transitional тоже подходит. Он используется примерно так же, как элемент <img>, позволяя создавать «плавающие таблицы», окруженные текстом.
  
• cellspacing. Определяет расстояние между «стенками" таблицы и между отдельными ячейками. Значение — в пикселах.
  
• cell padding. Задает расстояние между границами ячейки и элементами данных. Значение — в пикселах.
  
• rules и frames. Определяет, какие из границ должны рисоваться внутри таблицы (rules) и снаружи (frames). Эти атрибуты используются исключительно в графических браузерах, но нато включены в спецификацию XHTML Strict. DTD.

Рассмотрим эти атрибуты.

Атрибут width

По умолчанию таблица в XHTML занимает ровно столько места по цтпрпнс, сколько нужно для того, чтобы поместилась самая длинная строка. Только когда таблица заполнит всю ширину экрана, браузер будет переносить данные в ячейках на новые строки Распахивание окна при этом изменяет вид страницы (рис. 8.7).

Рис. 8.7. Атрибут width позволяет изменять размер таблицы

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

Например, таблица, занимающая 75% ширины окна браузера, может быть создана следующим образом:

<table width="75%>
<tr bgcolor="yellow"><th>Ceвep</th><td>600 000</td>
<td>400 000</td><td>800 000</td></tr>
<tr><th>Юr</th><td>300 000</td><td>200 000</td>
<td>400 000</td></tr>
<tr bgcolor="yellow"><th>Bocток</th><td>320 000</td>
<td>120 000</td><td>490 000</td></tr>
<tr><th>3aпад</th><td>320 000</td>
<td>120 000</td><td>490 000</td></tr>
</table>

Помните, что width задает определенный размер таблицы, и уже не важно, есть в ней данные, которым действительно требуется столько места, или нет. Например, таблица, у которой width="100%" займет всю ширину экрана, даже если в ней вообще не будет данных.

СО BET

Если вы используете абсолютные значения ширины, можно к ним добавлять суффиксы, определеяющие единицы измерения: рх означает пикселы, in означает дюймы. (Например: width="3.5in"). Но вообще-то, абсолютные значения использовать нежелательно. Хотя бы потому, что такие таблицы никак не реагируют на изменение размеров экрана. Нельзя назвать применение абсолютных значений ширины таблицы широко распространенной практикой, особенно если дело касается разработки целых страниц на основе таблиц (глава 9).

Атрибуты border и align

По умолчанию большинство браузеров создают таблицы без линий, ограничивающих их периметр и ячейки. При помощи атрибута border можно изменить эту ситуацию таким образом, чтобы у таблицы эти линии присутствовали Кроме того, можно задавать их толщину в пикселах. Например: <table border="8">.
Атрибут align применяется для выравнивания таблицы по центру либо для того, чтобы сделать ее «плавающей», то есть выравнять ее по левому или правому краю с обтеканием текстом. Хотя это и удобно, но идет вразрез с XHTML Strict, поэтому ничего не остается, как отказаться либо от такого DTD, либо от атрибута align.

Далее показан пример использования обоих атрибутов. Результат — на рис. 8.8.

<table border="8" align="center" width="50%'>
<сарtion>Уровень продаж конфет разных типов
 среди студентов</сарtion>
<tr><th>Tип</th><th>Melissa</th><th>Brian</th><th>Roger</th></tr>
<tr><th>Шоколадные плитки</th><td>50</td><td>25</td><td>50</td></tr>
<tr><th>Фруктовые тянучки</th><td>50</td><td>45</td><td>30</td></tr>
<tr><th> Лeденцы</th><td>15</td><td>25</td><td>40</td></tr>
</table>

Рис. 8.8. Таблица с широкой рамкой, выравнена посередине

Атрибуты cellpadding и cellspacing

Хотя с помощью border и можно задать ширину линий, ограничивающих ячейки таблицы, атрибуты cellpadding и cellspacing дают возможность управлять пространством, отводимым под другие элементы. Конкретно cellspacing определяет расстояние между ячейками в пикселах. Как видно из рис. 8.9, это увеличивает также размер самих границ ячеек, даже если атрибут border имеет малое значение. Например:

<table border ="1" ce11spacing="10">

Тем не менее, сellspacing работает не менее эффективно и при отсутствии атрибута border:

<table cellspacing="10">

Что касается атрибута cellpadding, то он используется для определения количества пространства, которое должно быть отведено под расстояние между границей ячейки и ее содержимым. (Значения, как и прежде, задаются в пикселах). По умолчанию значением этого атрибута является 1. Можно поставить и нулевой cell padding, но это приведет к тому, что содержимое ячеек будет наползать на границы. Приведенный далее пример показан на второй таблице рис. 8.9:

<tаble border»"1" cellpadding="10">

Рис. 8.9. Две таблицы демонстрируют cellspacing и cellpadding

Резюме

В этой главе вы узнали об основах построения таблиц на XHTML. Мы начали с цемента <table>, к которому добавили понятия об элементах строк (<tr>), ячеек (<td>), заголовках внутри таблицы (<th>). Были представлены некоторые атрибуты как отдельных элементов, так и таблиц в целом, позволяющие задавать расположение, цвет фона, растягивать ячейки на несколько строк или столбцов. Затем вы изучили некоторые дополнительные атрибуты элемента <table>, позволяющие изменять расстояния между ячейками и внутри них. Все это было как бы предисловием к главе 9, из которой вы узнаете о том, каким мощным средством оформления веб-страниц на самом деле являются таблицы.