- •1.1.2 Структура html-документа
- •1.1.3 Теги уровня документа
- •1.1.4 Основные теги форматирования текста
- •1.1.5 Специальные символы и комментарии
- •1.2 Практическая часть
- •Добавьте к странице свой текст (не менее 1/3 кода) и отформатируйте его.
- •1.3 Контрольные вопросы
- •Лабораторная работа 2. Изображения. Списки. Ссылки
- •2.1 Теоретические сведения
- •2.1.1 Изображения
- •2.1.2 Списки
- •2.1.3 Ссылки
- •2.2 Практическая часть
- •Добавьте к странице свой текст и изображения (не менее 1/3 кода) и отформатируйте его.
- •2.3 Контрольные вопросы
- •Лабораторная работа 3. Таблицы
- •3.1 Теоретические сведения
- •3.1.1 Таблицы. Общие сведения
- •3.1.2 Операции над ячейками таблицы
- •3.2 Практическая часть
- •3.3 Контрольные вопросы
- •Лабораторная работа 4. Формы
- •4.1 Теоретические сведения
- •4.1.1 Формы. Общие сведения
- •4.1.1 Элементы управления формы
- •4.2 Практическая часть
- •Добавьте к странице свой элементы форм (не менее 3-х).
- •4.3 Контрольные вопросы
- •Лабораторная работа 5. Фреймы. Карты изображений
- •5.1 Теоретические сведения
- •5.1.1 Фреймы
- •5.2 Практическая часть
- •5.3 Контрольные вопросы
- •Лабораторная работа 6. Введение в каскадные таблицы стилей.
- •Практическая часть
- •Создайте свои 3-4 класса стилей текста (каждый стиль должен включать по 3-4 свойства форматирования текста) и используйте их на странице.
- •Лабораторная работа 7. Свойства блочных объектов
- •Практическая часть
- •Создайте свои 2-3 класса стилей блока (каждый стиль должен включать по 3-4 свойства) и используйте их на странице.
- •Лабораторная работа 8. Дополнительные свойства css
- •Практическая часть
- •Создайте и используйте css-стили для работы со списками и таблицами (не менее 5).
- •Лабораторная работа 9. Верстка html–страниц
Лабораторная работа 3. Таблицы
Цель: Научиться создавать таблицы заданного размера; Научиться объединять ячейки по горизонтали и вертикали; Научить создавать фиксированные и динамические таблицы; Научиться управлять расстоянием между ячейками и рамкой таблицы.
3.1 Теоретические сведения
3.1.1 Таблицы. Общие сведения
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм. Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
Для создания таблиц пользуются тегом <table>, который определяет начало и конец таблицы. Основные атрибуты тега <table> приведены в таблице 3.1.
Таблица 3.1 - Атрибуты тега <table>
Атрибут |
Назначение |
аlign |
определяет выравнивание таблицы относительно всего документа |
width |
ширина таблицы в процентах или в пикселях |
height |
высота таблицы. Часто не поддерживается браузерами. В случае если размер текста превышает размер таблицы – таблица растягивается на высоту текста. |
background |
задет фоновый рисунок для всей таблицы |
bgcolor |
задает цвет фона таблицы |
border |
ширина рамки вокруг таблицы, может быть значительно толще чем ширина рамки между ячейками |
cellspacing |
расстояние между ячейками |
cellpaddiing |
отступ от рамки до содержимого ячейки |
При построении таблица разделяется на строки (тег <tr>), которые в свою очередь делятся на ячейки (тег <td>). Пример таблицы приведен в листинге 3.1.
Листинг 3.1 - Реализации таблицы на две строки и три столбца
В предоставленной на листинге таблице, с помощью атрибутов установлены фиксированная ширина, рамка, шириной в два пикселя и цвет рамки. При наполнении ячеек, если между парой тегов … нет графических символов или специального символа неразрывный пробел – граница ячейки на странице не прорисовывается.
Вместо текста внутри ячейки может быть любой элемент: список, изображение, другая таблица и т.д.
Тег служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или . Тег может содержать следующие атрибуты: align, valign, bgcolor, bordercolor. Возможные атрибуты для тегов и : align, background, bgcolor, bordercolor, colspan, height, nowrap, rowspan, valign, width.
3.1.2 Операции над ячейками таблицы
Для объединения ячеек таблицы используют атрибуты colspan – для указания числа объединяемых ячеек по горизонтали и rowspan – для указания числа объединяемых ячеек по вертикали. Пример объединения ячеек таблицы приведены в листингах 3.2 и 3.3.
Листинг 3.2 - Объединение ячеек по вертикали
Листинг 3.3 - Объединение ячеек по горизонтали
Пример создания таблицы для создания сайта, будет рассмотрен в практической работе