Размещение таблиц на html-странице. Объединение ячеек таблицы Лабораторная работа Размещение таблиц на html-странице. Форматирование текста в таблице Изучение тэгов <table>, <tr>,<td>,<th> Тег <table> Описание Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>. Синтаксис <table> <tr> <td>...</td> </tr></table> Атрибуты Align - Определяет выравнивание таблицы. background - Задает фоновый рисунок в таблице. Bgcolor - Цвет фона таблицы. Border - Толщина рамки в пикселах. Bordercolor - Цвет рамки. Cellpadding - Отступ от рамки до содержимого ячейки. Cellspacing - Расстояние между ячейками. Cols - Число колонок в таблице. Frame - Сообщает браузеру, как отображать границы вокруг таблицы. Height - Высота таблицы. Rules - Сообщает браузеру, где отображать границы между ячейками. Summary - Краткое описание таблицы. Width - Ширина таблицы. Тег <td> Описание Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>. Атрибуты Abbr - Краткое описание содержимого ячейки. Align - Определяет выравнивание содержимого ячейки по горизонтали. Axis - Группирует ячейки связанные между собой похожей информацией. background - Задает фоновый рисунок в ячейке. Bgcolor - Цвет фона ячейки. Bordercolor - Цвет рамки. Char - Выравнивает содержимое ячейки по заданному символу. Charoff - Смещает содержимое ячейки относительно заданного символа. Colspan - Объединяет горизонтальные ячейки. Headers - Позволяет связать ячейки с заголовком. Height - Высота ячейки. Nowrap - Запрещает перенос строк. Rowspan - Объединяет вертикальные ячейки. Scope - Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах. Valign - Выравнивание содержимого ячейки по вертикали. Width - Ширина ячейки. 1. Откройте приложение Блокнот 2. Создайте новую HTML-страницу. 3. Создайте новую Web-страницу. Разместите на странице таблицу. Ширина таблицы = 90%, высота = 600 пикселей. Высота рядов = 200 пикселей. Ширина колонок = 30% <!—Пример создания таблицы с одной строкой --> <table width="90%" height="600px" border="1"> <tr height="200px"> <td width="30%">1 - я колонка</td> <td width="30%">2 - я колонка</td> <td width="30%">2 - я колонка</td> </tr> </table> 4. Выполните форматирование текста в таблице, как показано в примере 3.1 Пример 3.1: В таблице могут использоваться следующие способы выравнивания: По горизонтали: - слева; По вертикали: - вверху. | По горизонтали: - слева; По вертикали: - по центру. (этот способ используется по умолчанию) | По горизонтали: - слева; По вертикали: - внизу. | По горизонтали: - по центру; По вертикали: - вверху. | По горизонтали: - по центру; По вертикали: - по центру. | По горизонтали: - по центру; По вертикали: - внизу. | По горизонтали: - справа; По вертикали: - вверху. | По горизонтали: - справа; По вертикали: - по центру. | По горизонтали: - справа; По вертикали: - внизу. | 5. Сохраните страницу в личной папке в файл table1.html Размещение таблиц на html-странице. Форматирование ячеек таблицы 1. Откройте приложение Блокнот 2. Создайте новую HTML-страницу. 3. Создайте новую Web-страницу. Разместите на странице таблицу. Выровняйте таблицу по центру страницы. Цвет заднего фона таблицы = "#E2E2E2". Ширина таблицы = 500 пикселей. Расстояние между границей ячейки и ее содержимым = 15 пикселей. Толщина границы = 5 пикселей, цвет границы = "#008000 Цвет второго ряда таблицы = #FFFFCA" Цвет ячейки 3 = "#FFCACA", цвет ячейки 5 = "#ECFFEC" (см. пример 3.2). Пример 3.2: Форматирование заднего фона таблиц, рядов и ячеек: 4. Сохраните страницу в личной папке в файл table2.html Размещение таблиц на html-странице. Объединение ячеек таблицы 1. Откройте приложение Блокнот 2. Создайте новую HTML-страницу. 3. Создайте новую Web-страницу. Разместите на странице таблицу из 5 рядов и 5 колонок. Выполните объединение ячеек таблицы, как показано в примере 3.3. Пример 3.3: Объединение ячеек таблицы: 4. Сохраните страницу в личной папке в файл table3.html |