- •Пояснительная записка
- •Введение html редакторы
- •Что такое html?
- •Кто создал html?
- •При помощи чего создаются html-страницы?
- •Визуальные редакторы или wysiwyg (What You See Is What You Get — Что видишь, то и получаешь)
- •Текстовые html-редакторы
- •Урок 1. Как устроен сайт. Делаем первую страницу.
- •Урок 2. Оформляем html-страницу и форматируем текст.
- •Шаг 1. Меняем фон html-страницы и цвет текста
- •Шаг 2. Форматируем текст
- •Урок 3. Располагаем элементы на странице.
- •Урок 4. Соединяем html-страницы между собой.
- •Урок 5. Структура html документа
- •Заголовок документа - тег head и его элементы
- •Тело документа - тег body
- •Урок 6. Форматирование текста
- •Теги разделения на абзацы и переноса строки
- •Теги, выделяющие текст курсивом
- •Теги, выделяющие текст полужирным шрифтом
- •Теги, выделяющие текст подчеркиванием
- •Теги, выводящие текст моноширинным шрифтом
- •Теги, выводящие текст в верхнем и нижнем индексах
- •Тег font и его параметры
- •Совместное использование тегов
- •Урок 7. Форматирование текста (продолжение).
- •Теги, делающие текст заголовками
- •Теги разделения на абзацы и переноса строки
- •Теги, выделяющие текст курсивом
- •Теги, выделяющие текст полужирным шрифтом
- •Теги, выделяющие текст подчеркиванием
- •Теги, выводящие текст моноширинным шрифтом
- •Теги, выводящие текст в верхнем и нижнем индексах
- •Тег font и его параметры
- •Совместное использование тегов
- •Урок 8. Специальные символы.
- •Урок 9. Ссылки в html.
- •Ссылка - тег a
- •Урок 10. Создание списков.
- •Нумерованные списки
- •Маркированные списки
- •Списки определений
- •Вложенные списки
- •Списки списков
- •Урок 11. Работа с изображениями.
- •Размеры изображений
- •Отделение изображения от текста
- •Альтернативный текст
- •Изображение в качестве ссылки
- •Урок 12. Работа с таблицами - тег table.
- •Создаем таблицу
- •Оформляем строки (tr) и ячейки (td)
- •Атрибуты таблиц
- •Атрибуты ячеек
- •Урок 13. Работа с таблицами сложной структуры.
- •Тег colspan - объединение столбцов
- •Вложенные таблицы
- •Специальные символы
- •Домашнее задание №1.
- •Домашнее задание №2.
- •Домашнее задание №3.
- •Домашнее задание №4.
- •Домашнее задание №5.
- •Домашнее задание №6.
- •Домашнее задание №7.
- •Домашнее задание №8.
- •Домашнее задание №9.
- •Домашнее задание №10.
- •Домашнее задание №11.
- •Домашнее задание №12.
- •Домашнее задание №13.
- •Домашнее задание №14.
- •Домашнее задание №15.
- •Домашнее задание №16.
- •Домашнее задание №17.
- •Домашнее задание №18.
- •Домашнее задание №19.
- •Домашнее задание №20.
- •Домашнее задание №21.
Урок 13. Работа с таблицами сложной структуры.
Содержание урока:
Тег colspan - объединение столбцов
Тег rowspan - объединение строк
Вложенные таблицы
Тег colspan - объединение столбцов
Самым распространенным применением таблиц сложных структур является разметка web-страницы.
Посмотрите на рисунок:
шапка сайта |
|
меню |
контент |
низ сайта |
Если наложить на этот рисунок таблицу, то мы увидим, что она состоит из трех строк и двух столбцов фиксированной ширины.
шапка сайта |
|
меню |
контент |
низ сайта |
|
Получается, что нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра colspan тега <td>. Этот параметр указывает браузеру объединить несколько столбцов в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено. Например,
<td colspan="2">
Этот столбец включает в себя два столбца. Для нашего примера:
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<table width="715" border="1"
align="center" cellspacing="0" cellpadding="10">
<tr bgcolor="darkred">
<td colspan="2" height="100">шапка сайта</td>
</tr>
<tr bgcolor="oldlace">
<td width="190" height="300">меню</td>
<td>контент</td>
</tr>
<tr bgcolor="darkred">
<td colspan="2" height="30">низ сайта</td>
</tr>
</table>
</body>
</html>
Обратите внимание, что первая и третья строки теперь содержат по одному столбцу. Рассмотрим другой пример разметки web-страницы:
шапка сайта |
||||||
меню |
меню |
меню |
меню |
меню |
меню |
|
новости |
контент |
Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок. Получится три строки и шесть столбцов. Первая строка состоит из одного столбца, включающего в себя шесть столбцов. Запишем это:
<tr bgcolor="darkred">
<td colspan="6" height="60">шапка сайта</td>
</tr>
Вторая строка состоит из шести столбцов:
<tr bgcolor="oldlace">
<td height="30">меню</td>
<td height="30">меню</td>
<td height="30">меню</td>
<td height="30">меню</td>
<td height="30">меню</td>
<td height="30">меню</td>
</tr>
Третья строка состоит из двух столбцов, причем, первый включает в себя два столбца, а второй - четыре:
<tr>
<td colspan="2" height="190" bgcolor="darkred">новости</td>
<td colspan="4" bgcolor="#FFFFFF">контент</td>
</tr>
Не так и сложно. Накладываем зрительно сетку на рисунок и прописываем строки по очереди сверху вниз, описывая в каждой нужное количество столбцов. Тег rowspan - объединение строк А если нам понадобится вот такая разметка?
меню |
шапка |
контент |
Наложим зрительно сетку, получается две строки и два столбца. Но первый столбец первой строки объединяет две строки. Для такого случая есть параметр rowspan тега <td>. Этот параметр указывает браузеру объединить несколько строк в одну. Значением этого параметра является число, указывающее сколько строк будет объединено. Например,
<td rowspan="2">
Здесь столбец включает в себя две строки. Для нашего рисунка:
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<table width="715" border="1"
align="center" cellspacing="0" cellpadding="10">
<tr bgcolor="darkred">
<td rowspan="2" width="30%">меню</td>
<td height="60">шапка</td>
</tr>
<tr bgcolor="oldlace">
<td height="200">контент</td>
</tr>
</table>
</body>
</html>
Обратите внимание, во второй строке у нас только один столбец, т.к. первый столбец тянется из первой строки, просто включает в себя две. На первый взгляд, это может показаться сложным, на самом деле немного практики и вы будете создавать таблицы любой сложности. Рассмотрим еще один пример:
шапка |
меню |
контент |
|
низ сайта |
Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это:
<tr bgcolor="darkred">
<td width="70%" height="60">шапка</td>
<td rowspan="2">меню</td>
</tr>
Вторая строка - это один столбец (просто его часть скрыта вторым столбцом первой строки):
<tr bgcolor="oldlace">
<td height="200">контент</td>
</tr>
Наконец, третья строка - это один столбец, включающий в себя три столбца:
<tr bgcolor="darkred">
<td colspan="2" height="30">низ сайта</td>
</tr>
Используя эти два параметра rowspan и colspan можно создавать таблицы любой сложности. Потренируйтесь.