Т а б л и ц ы в. Таблица в HTML организуется как набор столбцов и строк. Таблицы являются стандартом HTML. В первом приближении таблица Web-страницы – - презентация

1 Т а б л и ц ы в

2 Таблица в HTML организуется как набор столбцов и строк. Таблицы являются стандартом HTML. В первом приближении таблица Web-страницы – это сетка для показа данных в строках и столбцах. Однако таблицы можно применять как средство обхода ограничений HTML. Например, в HTML нельзя точно разместить элементы по горизонтали, но, используя таблицы можно добавлять столбцы для перемещения элементов. Удобно применять таблицы для размещения информации на экране. Ячейки таблицы могут содержать любые HTML-элементы: тексты, графику, списки и т.д. Создание таблиц вручную - одна из наиболее сложных задач в HTML. Сначала Вы формируете таблицу, затем первую строку, затем каждую ячейку с ее содержимым. Каждый элемент требует открывающего и закрывающего флагов разметки документа. Если Вы забыли один-единственный текстовый маркер, то Вашу страницу никто не сможет прочитать. Для задания таблицы используют тэги, и

3 Тэг, позволяет управлять внешним видом таблицы в целом. Используйте следующие параметры тэга: Параметр Описание (Значения) align= Определяет выравнивание таблицы относительно окна просмотра по горизонтали: "left" -по левому краю "center" -по центру "right" -по правому краю "justify" -по ширине valign= Определяет выравнивание таблицы относительно окна просмотра по вертикали: "top" -по верхней границе "middle" -по середине окна "bottom" -по нижней границе "baseline" -по линии текста background= Имя графического файла с фоновым изображением таблицы (формат GIF или JPG) bgcolor= Цвет фона для таблицы border= Толщина рамки таблицы * bordercolor= Цвет рамки * cellpadding= Расстояние между краями ячейки таблицы и ее содержимым cellspacing= Расстояние между рамкой таблицы и ее ячейками clear= Форматирование текста документа после таблицы: "no"-текст сразу после таблицы "left"-с выравниванием по левому краю "right"-с выравниванием по правому краю frame= Внешний вид рамки вокруг таблицы: "border"-рамка со всех сторон "void"- внешняя рамка не отображается "above"-отображается верхняя рамка "below"-отображается нижняя рамка "hsides"-отображаются верхняя и нижняя рамки "lhs"-отображается левая рамка "rhs"-отображается правая рамка "vsides"-отображаются правая и левая рамки "box"-отображается только внешняя рамка rules= Внешний вид разделительных линий ячеек таблицы: "none"-разделительных линий нет "rows"-отображаются горизонтальные линии "cols"-отображаются вертикальные линии "all"-отображаются все линии между строками и столбцами cols= Количество столбцов в таблице height = Высота таблицы в пикселах или в % от высоты окна width= Ширина таблицы в пикселах или в % от ширины окна

4 Пример 1 Пример 2 Пример 3 Пример 4 Пример 5

5 Тэг предназначен для создания строк таблицы. Изменяя его параметры, можно определить внешний вид строки: Пример 1 Параметр Описание (Значения) align= Определяет выравнивание текста в ячейках строки по горизонтали: "left"-по левому краю "center"-по центру "right"-по правому краю "justify"-по ширине valign= Определяет выравнивание текста в ячейках строки по вертикали: "top"-по верхней границе "middle"-по середине окна "bottom"-по нижней границе "baseline"-по линии текста background = Имя графического файла с фоновым изображением строки (формат GIF или JPG) bgcolor= Цвет фона для строки bordercolo r= Цвет рамки в пределах строки * Пример 2

6 Пример 1 При помощи тэга определяются ячейки таблицы: Параметр Описание (Значения) align= Определяет выравнивание текста в ячейке по горизонтали: "left"-по левому краю "center"-по центру "right"-по правому краю "justify"-по ширине valign= Определяет выравнивание текста в ячейке по вертикали: "top"-по верхней границе "middle"-по середине окна "bottom"-по нижней границе "baseline"-по линии текста background= Имя графического файла с фоновым изображением ячейки (формат GIF или JPG) bgcolor= Цвет фона для ячейки bordercolor = Цвет рамки ячейки * height= Высота ячейки в пикселах или в % от высоты таблицы width= Ширина ячейки в пикселах или в % от ширины таблицы Пример 2Пример 3Пример 4Пример 5

7 Обычно первая строка или первый столбец таблицы содержат заголовки. Вы можете оформить такие заголовки с помощью тэга. Он имеет тот же набор параметров, что и тэг : Пример 1 Если ячейка не содержит данных, она не будет иметь границ. Чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее пустую строку или неразрывный пробел   или  . Пример 2Пример 3 С помощью тэга можно снабдить таблицу подписью. У этого тэга есть параметр align, имеющий два значения: "top" - подпись сверху таблицы и "bottom" - подпись снизу таблицы: Пример 4 Тег - заголовок таблицы

8 В Web-документы можно вставлять не только простые прямоугольные таблицы, с равным числом ячеек в каждой строке, но и достаточно сложные. Например, можно объединять (группировать) соседние ячейки в строках или столбцах. Так можно получить сложные заголовки. Чтобы произвести объединение ячеек, необходимо использовать следующие параметры тэга (или ): Параметр Описание (Значения) colspan= Количество объединенных ячеек в столбце (снизу и сверху от данной) rowspan= Количество объединенных ячеек в строке (слева и справа от данной) Пример 1Пример 2Пример 3

9 Пример 1 Пример 2 Пример 3 Пример 4

10