содержать текст и рисунки.
Таблицы используются для упорядочения и представления
данных.
C их помощью удобно верстать макеты страниц, располагая нужным образом фрагменты текста и изображений.
Для добавления таблицы на Веб-страницу используется тег . Он служит контейнером для элементов, определяющих содержимое таблицы.
Таблица состоит из строк и ячеек. Они задаются с помощью тегов и , , , или . Толщина границы указывается с помощью параметра border.
WIDTH. Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. Если это невозможно (в таблице находятся изображения), параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Как и высота, если ширина явно не указана, то она будет вычисляться на основе содержимого таблицы.
Слайд 41
Параметры тега
21.04.2012
Параметры тега
Каждая ячейка таблицы, задаваемая через тег
, тоже имеет свои параметры. Некоторые совпадает с параметрами тега
| . В таблиеа должна быть хотя бы одна ячейка. Можно вместо тега | использовать тег | . Текст в ячейке, оформленной с помощью тега | , отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги | и | нет. (12.1.htm).
Слайд 38
Параметры тега
21.04.2012
Гибкость и универсальность таблиц обеспечивается обилем параметров тегов
, и .
ALIGN
Задает выравнивание таблицы по краю окна браузера.
Допустимые значения:
left — выравнивание таблицы по левому краю,
center — по центру и
right — по правому краю.
Когда используются аргументы left и right, текст начинает обтекать таблицу сбоку и снизу.
BGCOLOR
Устанавливает цвет фона таблицы.
BORDER
Устанавливает толщину границ в пикселах. Границы отображается вокруг таблицы и между ячейками.
Слайд 39Параметры тега
21.04.2012
CELLPADDING
Определяет расстояние между границей ячейки и ее содержимым.
Он добавляет пустое пространство к ячейке, увеличивая ее размеры. Без
cellpadding текст в таблице «налипает» на рамку и снижает восприятие. Добавление cellpadding улучшает читабельность текста. Этот параметр не имеет особого значения, но помогает , когда требуется установить пустой промежуток между ячейками.
CELLSPACING
Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет и входит в общее значение.
Параметр COLS указывает количество столбцов в таблице. Он помогает браузеру в подготовке к ее отображению. Без него таблица будет показана тогда, когда все ее содержимое будет загружено в браузер и проанализировано.
Слайд 40
Параметры тега
21.04.2012
RULES. Сообщает браузеру, где отображать границы между ячейками.
По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым
сетку. В дополнение можно указать отображать линии между колонками (значение cols), строками (rows) или группами (groups), которые определяются наличием тегов |
|---|
.
ALIGN задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left —- выравнивание по левому краю, center — по центру и right — по правому краю ячейки.
BGCOLOR Устанавливает цвет фона ячейки. Используя этот параметр совместно с атрибутом bgcolor тега
можно получить разнообразные цветовые эффекты в таблице.
COLSPAN
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк.
Слайд 42
Параметры тега
21.04.2012
Здесь содержатся две строки и две колонки. верхние
горизонталь-ные ячейки объединены с помощью параметра colspan.
На нижнем рисунке
применяется вертикальное объединение ячеек
Слайд 43
Параметры тега
21.04.2012
HEIGHT
Браузер сам устанавливает высоту таблицы и ее ячеек
исходя из их содержимого. Однако при использовании параметра height высота
ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. Если высота ячейки, превышающает ее содержимое, добавляется пустое пространство по вертикали.
ROWSPAN
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк.
WIDTH
Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину.
Слайд 44
Параметры тега
21.04.2012
VALIGN
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию содержимое
ячейки располагается по ее вертикали в центре. Возможные значения:
top —
выравнивание по верхнему краю строки,
middle — выравнивание по середине,
bottom — выравнивание по нижнему краю,
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.
Слайд 45
Параметры тега
21.04.2012
Особенности таблиц
У каждого параметра таблицы есть свое значение
установленное по умолчанию. Это означает, что если какой-то атрибут пропущен,
то неявно он все равно присутствует, и с некоторым значением. Из-за этого вид таблицы может оказаться совсем другим, нежели предполагал разработчик. Чтобы знать, что можно ожидать от таблиц, нужно знать их явные и неявные особенности.
Можно одну таблицу помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или тогда, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, как обычная таблица.
Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически исходя из суммарной ширины содержимого ячеек плюс ширина границ между ячейками.
Слайд 46
Параметры тега
21.04.2012
Особенности таблиц
Поля вокруг содержимого, устанавливаемые через параметр cellpadding
и расстояние между ячейками, которые определяются значением cellspacing.
Если для
таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры. Браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Иногда ширину содержимого ячейки невозможно изменить, когда работают с рисунками. Тогда ширина таблицы увеличивается, несмотря на указанные размеры.
Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. Но для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.
Слайд 47
Параметры тега
21.04.2012
Выравнивание таблиц
Чтобы выравнить таблицы по центру веб-страницы или
по одному из ее краев используют параметр align тега .
Результат будет заметен только в том случае, если ширина таблицы не занимает всю доступную область, т.е. меньше, чем 100%. На самом деле align не только устанавливает выравнивание, но и заставляет текст обтекать таблицу с других сторон аналогично поведению тега
![]()
.
Слайд 48
Параметры тега
21.04.2012
Выравнивание таблиц
По умолчанию таблица формируется в виде сетки,
при этом в каждой строке таблицы содержится одинаковое количество ячеек.
Такой вариант вполне подходит для формирования простых таблиц, но совершенно не годится для тех случаев, когда предстоит сделать сложную таблицу. В подобных ситуациях применяются два основных метода:
объединение ячеек и
вложенные таблицы.
Слайд 49
Параметры тега
21.04.2012
Объединение ячеек
Для объединения двух и более ячеек в
одну используется параметр colspan тега . Он устанавливает, сколько ячеек
следует объединить по горизонтали. Аналогично работает и параметр rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, . Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В листинге приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.
Слайд 50
Параметры тега
21.04.2012
Неправильное использование параметра colspan
| заменяет три ячейки, поэтому в следующей строке должно быть три тега | или конструкция вида | ... | ... |
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
alt="Адрес размещения изображения относительно корня сайта">
