Модульная лекция: мл 3-5.

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

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

<table border=1 width="80%">

<caption> заголовок таблицы </caption>

<tr> - начало первой строки

<td> содержимое 1 колонки таблицы </td>

<td> содержимое 2 колонки таблицы </td>

. . . и т д.

</tr> - конец первой строки таблицы

<tr> - начало второй строки

<td> содержимое 1 колонки таблицы </td>

<td> содержимое 2 колонки таблицы </td>

. . . и т д.

</tr> - конец первой строки таблицы

то же самое для второй строки и т.д.

</table>

Параметр border - задает рамки таблицы, а параметр width ширину таблицы, которую рекомендуется задавать в процентах (относительно размера экрана).

У элемента table нет обязательных атрибутов. По умолчанию таблица печатается без рамки (border=0). Разметка таблицы в общем случае осуществляется автоматически в соответствии с объемом содержащейся в ней информации, однако у автора всегда имеется возможность самому выбрать ширину таблицы, воспользовавшись атрибутом width. Дополнительный контроль над процессом разметки (таблицы) достигается также через атрибуты border, cellspacing и cellpadding.

Заголовок таблицы caption выравниваются по верхнему или нижнему краю таблицы в зависимости от атрибута align. В таблице каждый ряд ячеек содержит открывающий тэг элемента tr, хотя соответствующий закрывающий тэг всегда может быть опущен. Отдельные клетки таблицы размечаются элементом td, если это данные, и элементом th, если это заголовки. Как и в случае с tr, эти элементы являются контейнерами и могут быть записаны без указания закрывающего тэга.

Элементы th и td могут иметь несколько атрибутов:

align и valign - для выравнивания содержимого ячейки,

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

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

align - данный атрибут принимает одно из следующих значений: left, center или right (используемый при этом регистр значения не имеет). Указывает для текущей таблицы, каким образом при разметке осуществляется ее горизонтальное выравнивание. По умолчанию выполняется выравнивание таблицы по левой границе листа. width - в отсутствии данного атрибута ширина таблицы определяется автоматически в соответствии с объемом содержащегося в ней материала. Однако посредством атрибута width вы можете сами задать ширину таблицы либо в пикселях (например width=212), либо как процент от расстояния между левой и правой границами экрана (например width="80%" ).

border - этот атрибут позволяет задавать для таблицы ширину внешней рамки - в пикселях (например, border=4). Данному атрибуту может быть также присвоено значение нуль, чтобы полностью отказаться от внешней рамки. Рамка таблицы не рисуется также, если атрибут border вообще отсутствует в разметке. Заметим, что некоторые из браузеров способны воспринимать также конструкцию <table border>, считая ее семантически эквивалентной атрибуту border=1.

cellspacing - в традиционных настольных издательских системах смежные ячейки в таблице имеют общую границу. В языке html это не так. Каждая ячейка имеет собственную границу, отделенную промежутком от границ соседних ячеек. Ширину этого промежутка в пикселях можно устанавливать посредством атрибута cellspacing, (например cellspacing=10). То же самое значение определяет расстояние между общей границей таблицы и границами крайних ячеек.

cellpadding - данный атрибут устанавливает для каждой ячейки в таблице расстояние в пикселах между рамкой ячейки и содержащимся в ней материалом.

Элемент caption может иметь только один атрибут - align, который может принимать два значения: align=top или align=bottom. Посредством этого атрибута можно выбирать, помещать ли заголовок над таблицей или, соответственно, под ней. Большинство браузеров по умолчанию ставит заголовок над таблицей. Для элемента caption необходимо всегда указывать начальный и конечный тэги. Содержание заголовка должно ограничиваться простым текстом . Использование блочных элементов в этом случае недопустимо.

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

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

valign - данный атрибут может использоваться при выборе правила, согласно которому - если нет других указаний - будет осуществляться вертикальное выравнивание во всех ячейках данной строки. Атрибут может принимать одно из следующих значений (независимо от используемого регистра): top, bottom или middle. При этом содержимое ячейки будет, соответственно, выравниваться по ее верхнему или нижнему краю, либо посередине.

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

nowrap - в присутствии этого атрибута блокируется автоматический перенос слов в пределах текущей ячейки (например в случае

<td nowrap>). Действие этого атрибута эквивалентно использованию в ячейке объектов , которые создают пробелы, неотменяемые браузером.

rowspan - данный атрибут имеет значением положительное целое число, определяющее количество рядов, на которые простирается данная ячейка. Этому атрибуту по умолчанию присваивается значение 1.

colspan - данный атрибут имеет значением положительное целое число, определяющее количество колонок, на которые простирается данная ячейка. По умолчанию атрибуту присваивается значение 1.

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

left, center и right. Если атрибут align для данной ячейки не был указан, то по умолчанию для элементов <td> выполняется выравнивание по левому краю. Напомним, что вы можете отменить это правило, задав требуемый атрибут align в элементе tr.

valign - определяет способ вертикального выравнивания для содержимого текущей ячейки, отменяя тем самым действие атрибута valign, заданного при общей разметке данного ряда таблицы. Использует при этом те же самые значения:

top, middle и bottom. Если для данной ячейки атрибуту valign вы не присвоили какого-либо значения, то по умолчанию для нее осуществляется выравнивание по центру. Те не менее вы можете изменить такое правило, задав нужный атрибут valign в элементе tr.

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

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

Ниже рассматривается пример оформления таблицы с использованием необязательных параметров. С целью комментарий все строки в коде пронумерованы (при создании страницы эти номера не указываются):

1. <table border="2" width="50%">

2. <tr>

3. <td rowspan="2">Фамилия</td>

4. <td align="center" colspan="3" bgcolor="#FF0000">Месяца</td>>

5. </tr>

6. <tr>

7. <td>январь</td>

8. <td>февраль</td>

9. <td>март</td>

10. </tr>

11. <tr><br>

12. <td>Петров</td>

13. <td>55</td>

14. <td>44</td>

15. <td>99</td>

16. </tr>

17. </table><br>

После запуска этого кода на экране браузер отобразит следующую таблицу:

Фамилия	Месяца
	январь	февраль	март
Петров	55	44	99

Комментарий к коду Web-страницы.

1. Начало таблицы: рамка шириной 2 пикселя, ширина – 50% от размера экрана.

2. Начало первой строки таблицы.

3. Две строки (начиная с текущей) таблицы объединены в одну строку.

4. Три колонки, начиная с текущей, объединены в одну с названием Месяцы, размещенному по центру. Фон объединенных ячеек – красный.

5. Конец первой строки.

6. Начало второй строки.

7. Первая колонка текущей строки с содержимым январь.

8. Вторая колонка текущей строки с содержимым февраль

9. Третья колонка текущей строки с содержимым март.

10. Конец второй строки.

11. Начало третьей строки.

12. Первая колонка третьей строки с содержимым Петров.

13. Вторая колонка третьей строки с содержимым 55.

14. Третья колонка третьей строки с содержимым 44.

15. Четвертая колонка третьей строки с содержимым 99.

16. Коней третьей строки.

17. Конец таблицы.

Рассмотрим таблицу следующей структуры. Ее размер 3х3 (три столбца и три строки). Каждая строка имеет свой фон. На пересечении любой строки и столбца размещается ячейка, содержимое которой можно оформить разными видами информации: текст, рисунок, ссылки и даже другие (встроенные таблицы). Обратите внимание, что фон данной страницы отличается от фона всех остальных страниц сайта. Это достигается путем использования каскадных таблиц стилей (смотри дальше).

Саша Самохвалов в детстве	Саша Самохвалов взрослый	Самохвалов А.И. читает лекцию
Долой информатику!	Самохвалов А.И.
Студент	Преподаватель	Что делать ?