Лабораторная работа №6. «Таблицы в html-документе»

Задание 6.1. Изучите материал темы «Таблицы в HTML-документе», добавьте новую ось в логико-смысловую модель «Структура HTML-приложения».

Таблицы в HTML-документе

Создание таблиц

Таблица – это структурированная информация, представленная в виде столбцов и строк.

В HTML-документе таблицы используются для отображения данных в строках и столбцах, а также как средство структурирования документов. Например, в HTML трудно точно разместить элементы по горизонтали, но, используя таблицы, можно добавлять столбцы для размещения элементов.

Создание таблиц вручную – одна из наиболее сложных задач в HTML, требующая внимательности и аккуратности. Сначала формируется таблица, затем – первая строка, затем – каж­дая ячейка с её содержимым. Каждый элемент требует открывающего и закрывающего тегов.

Таблица обозначается в HTML-документе парными тегами <TABLE> и </TABLE>. Тег <table> может иметь следующие атрибуты:

border – ширина рамки вокруг таблицы;

width – ширина таблицы;

align – выравнивание таблицы относительно боковых границ окна;

bgcolor – цвет фона под таблицей.

Элемент CAPTION задает заголовок таблицы:

<САРТION>Название таблицы</САРTION>

Тег <caption> может иметь атрибут align, определяющий способ вертикального выравнивания заголовка таблицы. Атрибут может при­нимать два значения:

top – над таблицей;

bottom – под таблицей.

Элемент TH создает ячейку и определяет ее как ячейку-заголовок:

<ТН>Заголовок столбца</ТН>

Содержимое заголовка автоматически размещается по центру ячей­ки и отображается полужирным шрифтом. Данный тег можно встав­лять в любом месте таблицы.

Элемент TR создает строку ячеек:

<ТR>Строка таблицы</ТR>

У тега <TR> есть следующие атрибуты:

align – способ горизонтального выравнивания содержимого всех ячеек строки: (left, right, center);

valign – вертикальное выравнивание содержимого всех ячеек строки (top, bottom, middle);

bgcolor – цвет фона для всех ячеек строки.

Столбцы таблицы задаются при помощи элемента TD:

<ТD>Столбец таблицы</ТD>

Атрибуты align, valign и bgcolor аналогичны атрибутам тега <TR>:

widht – ширина ячейки;

colspan – объединение ячеек нескольких столбцов;

rowspan – объединение ячеек несколько строк.

Пример создания простой таблицы

<Н2>Самая простая таблица</Н2>

<table border="4">

<tr>

<Тd>ячейка a</td>

<Тd>ячейка b</td> Первая строка

<Тd>ячейка c</td>

</tr>

<tr>

<Тd>ячейка d</td>

<Тd>ячейка e</td> Вторая строка

<Тd>ячейка f</td>

</tr>

</table>

Пример создания таблицы с названиями столбцов

<TABLE border="10" width="100%"> <САРТION>Название таблицы</CAPTION> <TR> <ТН>Заголовок1</ТН> <ТН>Заголовок2</ТН> <ТН>ЗаголовокЗ</ТН> </TR> <TR> <ТD>ячейка таблицы A</TD> <ТD>ячейка таблицы B</TD> <ТD>ячейка таблицы C</TD> </TR>

<TR> <ТD>ячейка таблицы D</TD> <ТD>ячейка таблицы E</TD> <ТD>ячейка таблицы F</TD> </TR> </TABLE>