Тэг - создает таблицу. Все прочие элементы таблицы – текст, рисунки, списки - должны быть вложенными в него. Допускается также вложение таблиц одна в. - презентация

1

2 Тэг - создает таблицу. Все прочие элементы таблицы – текст, рисунки, списки - должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Закрывающий тэг обязателен Тэги и - описывают строки и столбцы (ячейки таблицы). Тэг - описывает заголовки в первой строке таблицы. Тэг - описывает заголовок таблицы.

3 Таблицы в HTML

4 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Простейшая таблица Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. толщина рамки TABLEтаблица TR = table rowстрока таблицы TD = table dataданные таблицы TH = table header заголовок (жирный, по центру)

5 Атрибуты для тэга Атрибуты для тэга Align - выравнивание таблицы относительно документа. Возможные значения : center, left, right Valign - выравнивает текст в таблице по вертикали. Значения : top, bottom, middle, baseline. background =имя файла строка, определяющая рисунок для заднего фона таблицы bgcolor =цвет - определяет задний фон таблицы border - толщина внешней рамки в пикселях. Если атрибут не указан, то таблица выводится без видимой рамки bordercolor =цвет - цвет рамки bordercolorlight =цвет - цвет рамки слева и сверху bordercolordark =цвет - цвет рамки справа и снизу

По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине 6 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Выравнивание По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине всей таблицы: информации в ячейках: left, center, right left, center, right left, center, right left, center, right top, middle, bottom top, middle, bottom По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине...... всей таблицы: информации в ячейках: left, center, right left, center, right left, center, right left, center, right top, middle, bottom top, middle, bottom"> По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине

7 Атрибуты для тэга Атрибуты для тэга title =Текст - всплывающая подсказка width = число - ширина таблицы в процентах или пикселях height = число - рекомендуемая высота таблицы только в пикселях cellspacing = число - расстояние между ячейками cellpadding = число - расстояние между содержимым и рамкой colls = число - заранее сообщает браузеру количество столбцов в таблице. border cellspacing cellpadding

8 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Размеры ширина в пикселях или в % от ширины окна браузера высота в пикселях всей таблицы: строки: ячейки: ширина в пикселях или в % от ширины таблицы

9 A border cellspacing cellpadding

10 rules - описывает рамки внутри таблицы. Значения: all Отображает все части рамки внутри таблицы cols Отображает все вертикальные рамки внутри таблицы none Удаляет все рамки внутри таблицы rows Отображает все горизонтальные рамки внутри таблицы Атрибуты для тэга Атрибуты для тэга

11 frame - описывает параметры внешней рамки. Значения: box Отображает все части рамки вокруг таблицы void Удаляет все рамки вокруг таблицы above Рамка только сверху belov Рамка только снизу lhs Рамка только слева rhs Рамка только справа vsides Рамка только слева и справа hsides Рамка только сверху и снизу Атрибуты для тэга Атрибуты для тэга

12 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фон и цвет текста Привет! Таблица из двух строк и двух столбцов Привет! Таблица из двух строк и двух столбцов цвет фона фоновый рисунок

13 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Отступы интервал между ячейками отступ внутри ячеек CELLSPACING CELLPADDING

14 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Объединение ячеек COLSPAN Привет! Вася, Петя, Маша! COLSPAN Привет! Вася, Петя, Маша! ROWSPAN Привет! Вася, Петя, Маша! ROWSPAN Привет! Вася, Петя, Маша! column span охват столбцов row span охват строк

15 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Вложенные таблицы Вася Петя Маша Даша Вася Петя Маша Даша

16 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Добавление заголовка таблицы Заголовок таблицы можно создать с помощью известных вам тэгов Но поскольку ширина таблицы может отличаться от ширины окна обозревателя, выровнять текстовый заголовок относительно таблицы может оказаться довольно сложно. Поэтому для создания заголовков лучше использовать тэг, который создает заголовок непосредственно в таблице.

17 Пример создания таблицы с названиями столбцов. Название таблицы Заголовок 1 Заголовок 2 Заголовок 3 ячейка таблицы A ячейка таблицы В ячейка таблицы С ячейка таблицы D ячейка таблицы Е ячейка таблицы F