Лабораторная работа 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 - Объединение ячеек по горизонтали

Пример создания таблицы для создания сайта, будет рассмотрен в практической работе