close

Вход

Забыли?

вход по аккаунту

?

Урок 4. Таблицы, их применение. Создание макета сайта

код для вставкиСкачать
Урок 4. Таблицы, их применение. Создание макета сайта
Таблицы - самая сложная, но самая важная тема при изучении языка HTML. Попробуем а этом разобраться по пунктам.
1. Таблицы определяются контейнером <table>, имеющим параметры: a. align - задает выравнивание таблицы.
b. Width, height - ширина и высота таблицы, в пикселях или в процентах от свободного пространства. c. border - толщина рамки таблицы в пикселях. d. cellspacing - расстояние между ячейками (создает объем рамки таблицы).
e. cellpadding - расстояние между рамкой ячейки таблицы и ее содержанием внутри. f. bgcolor - задает цвет фона, а background - рисунок фона таблицы.
2. Сразу после <table> идет заголовок таблицы в контейнере <caption>...</caption> с параметром align=top -сверху (по умолчанию) или bottom - заголовок внизу таблицы. 3. Далее начинается таблица. Новая строка ячеек в таблице - тег <tr> со следующими параметрами: a. align - задает горизонтальное выравнивание внутри всех ячеек строки (left, center, right). b. valign - задает вертикальное выравнивание (top, middle, bottom). c. height - задает высоту строки
d. bgcolor и background - задают цвет или изображение фона одной строки таблицы. 4. Для создания новой ячейки предназначен тег <td> (обычная ячейка) или <th> (выделенная ячейка для заголовков). Количество ячеек должно быть одинаково в каждом ряду таблицы.
a. В теги ячеек таблицы входят все вышеперечисленные параметры и несколько новых: b. rowspan - объединяет указанное количество ячеек в одну по вертикали. c. colspan - объединяет ячейки по горизонтали, например: <td colspan ="3"> объединяет 3 ячейки </td>
5. Таблицы можно использовать для создания навигационной панели, вставив в ячейки соответствующие кнопки-рисунки. Для этого border=0, cellspacing=0, cellpadding=0. 6. Таблицы можно вкладывать друг в друга, помещая одну таблицу внутрь другой. Просто поместите таблицу внутрь тега td, и у вас получится вложенная таблица, например: <table border="1">
<tr>
<td>
<table border="1"><tr><td>ячейка</td></tr></table>
</td>
</tr>
</table>
7. Эта возможность применяется при форматировании веб-страницы (для размещения контента по всей площади страницы). Однако, при использовании более сложных таблиц с глубокой степенью вложенности, может потребоваться много памяти, что сильно замедлит появление таблицы. Задание к уроку
1. Создайте такие таблицы (раскрасьте ячейки разными цветами, задайте толщину цвет рамки)
12351234123451234№ п/пФамилия и имяФотографияОценкиМартАпрельМай1Иванов Ваня7982. Составьте список вашей группы из 7 человек (используйте различное форматирование и цвета)
Задание на дом:
Создайте макеты страниц агентства недвижимости по предложенным вариантам. Показаны макеты двух страниц. Продумайте и сделайте еще одну. Таким образом, проект должен состоять из трех страниц, при щелчке по ссылкам должны открываться новые странички, имеющие одинаковую навигацию, но разное наполнение. Не забывайте про рисунки и фон, а главное, не забудьте границы таблиц сделать невидимыми :).
Создайте таблицы согласно приведенным скриншотам (см. примеры)
Автор
sob-mk
sob-mk146   документов Отправить письмо
Документ
Категория
Методические пособия
Просмотров
129
Размер файла
49 Кб
Теги
урок, создание, таблица, применению, макет, сайт
1/--страниц
Пожаловаться на содержимое документа