INTERNET-WEB.RU
Обучение работе с ПК
Операционные системы
Флеш (Flash)

Таблицы

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

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

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

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

Если вы включаете в таблицу вложенный в нее рисунок, то обязательно используйте в описании рисунка параметры HEIGHT и WIDTH. Это позволит программе просмотра зарезервировать место под рисунок и начать показ таблицы. В противном случае таблица не начнет выводиться на экран до тех пор, пока рисунок не будет полностью загружен из Интернета.

Таблицы могут быть вложены одна в другую (ячейка одной таблицы может содержать целую таблицу). Если вы используете такие варианты оформления, то будьте крайне аккуратны при написании всех элементов. В этом случае легко запутаться, и изображение на экране может стать совсем другим, чем вы рассчитывали!

Описание таблицы заключается в тэги <table> и </table>. В открывающем тэге можно определить ширину таблицы, ее выключку, параметр

CLEAE, цвет фона, толщину рамок (вокруг ячеек и всей таблицы). Кроме того, в описании таблицы используются параметры CELLPADDING и CELLSPACING. CELLPADDING определяет промежуток (в пикселях) между содержимым ячеек таблицы и сеткой (рамкой вокруг ячейки), a CELLPADDING задает промежутки между отдельными ячейками.

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

К, — с Как уже говорилось, программы просмотра осуществляют свой Щ пересчет ширины ячеек таблицы, при этом определенные вами

параметры могут быть проигнорированы.

В таблицах часто используются объединения ячеек между собой, причем стандарт HTML допускает объединение как по вертикали, так и по горизонтали. Параметр ROWSPAN = число_рядов определяет, сколько рядов объединяет в себе ячейка, в определение которой он включен, а параметр COLSPAN = число_ячеек — число ячеек (справа от этой ячейки), которые она объединяет.

Обратите внимание на следующую особенность данных параметров. После их введения в описание таблицы не надо включать описание тех ячеек, которые сольются с первой. Если вы использовали в первом ряду таблицы с тремя столбцами объединение двух ячеек по вертикали, то во втором ряду нужно уже описывать только две ячейки. Если вы включите описание всех трех ячеек, то программа посчитает первую ячейку за вторую (так как по представлениям программы первая ячейка описана как объединенная с предыдущим рядом), вторую — за третью, а содержимое последней ячейки будет просто проигнорировано, так как в таблице задано только три столбца.

 Пример оформления таблицы

На  приведена таблица так, как она показана в окне обозревателя:


 Вид таблицы в HTML-документе

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


Пояснения к коау описания таолицы

Строки 1—4, 40—42 сообщают о том, что это документ HTML.

Строка 5 начинает таблицу и сообщает, что границы таблицы должны быть проведены линиями толщиной в 1 пиксель и что в таблице нет зазоров между рядами и столбцами. Строка 39 завершает таблицу.

Строки 6, 20, 31 сообщают о начале каждого ряда таблицы, а строки 19, 30, 38 — о завершении описания ряда.

Строки, начинающиеся с тэгов <td>, описывают отдельные ячейки таблицы. В части тэгов использованы параметры выравнивания содержимого ячейки (по вертикали). Форматирование содержимого ячеек задано соответствующими тэгами в строках 11 (полужирный) и 14 (курсив). Выравнивание содержимого ячейки по центру задано в строках 22 и 25.

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

Тэг ячейки в строке 21 содержит параметр объединения колонок таб лицы (colspan = 2 — объединение двух колонок). На  видно, чт< ячейка реально объединила две соседние колонки, а ячейка, описанная непосредственно за данной, заняла место в третьей колонке (с пропускоы объединения).

Ячейка 2—2 (строка 24) объединяет два ряда (rowspan = 2). Обратите внимание, что следующий ряд таблицы содержит описания только двух ячеек из четырех столбцов: ячейка 3—2 (объединяет две колонки — см. строку 32) и ячейка 3—2 (строки 35—37). Ячейка, которая объединена с вышележащим рядом, опускается из описания.

(Рисунки Программы просмотра «понимают» не все форматы иллюстраций. Традиционно разрешено использовать только иллюстрации в форматах GIF и JPEG. Поэтому, если вы хотите вставить в свою страницу рисунок другого формата (например, TIFF), его надо конвертировать в один из этих двух. Для фотографий обычно используется формат JPEG, для диаграмм — GIF. Кроме того, рисунок в формате GIF может, например, иметь прозрачный фон, что удобно в некоторых случаях оформления страниц. zgKj Формат GIF позволяет сохранить в одном файле рисунка несколько -" «картинок» и задать время отображения каждой из них на экране. Таким способом можно получить простейшую мультипликацию, не применяя никаких специальных, зачастую сложных для изучения программ анимации.

© 2009 internet-web.ru. All Rights Reserved