Теги, используемые при создании таблиц

Таблицы являются стандартом HTML. Таблица Web-страницы – это сетка для показа данных в строках и столбцах. Однако таблицы можно применять как средство обхода ограничений HTML. Например, в HTML нельзя точно расположить элементы по горизонтали, но при использовании таблицы можно добавлять столбцы для перемещения элементов. Чтобы создать таблицу вручную, необходимо сначала сформировать первую строку, затем каждую ячейку с ее содержимым. Таблица в WEB-страничку вставляется парным тегом <table> и </table>.

У тега <table> есть несколько параметров:

border - определяет ширину бордюра таблицы и может принимать значения от 0 до 10 .Если значение border равно 0, то бордюр будет невидимым, например,

width- задает ширину таблицы по отношению к ширине экрана в процентах., например,

bgcolor –определяет цвет фона под таблицей, например,

background – наклеивает обои под таблицу, например,

Между тегами <table > и </table>могут располагаться: теги заголовка таблицы (<caption> и </сaption>), теги заголовков строк или столбцов (<th>и </th>), теги формирования строк (<tr> и </tr>), теги формирования столбцов (<td. > и </td>).

Теги <caption> и </caption> используется для оформления заголовков таблицы,

например,

<caption>название таблица</caption>

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

align=top- заголовок расположен над таблицей,

align=bottom- заголовок расположен под таблицей,

например,

Теги <tr> и </tr> используются для формирования строки таблицы. Тег <tr> имеет следующие параметры:

1. align - горизонтальное выравнивание внутри строки. Он может принимать значения:

align=left - выравнивание содержимого строки по левому полю;

align=right - выравнивание содержимого строки по правому полю;

align=center- выравнивание содержимого строки по центру.

2. valign - вертикальное выравнивание внутри строки. Он может принимать значения:

align= top – выравнивание по верхнему полю строки;

align= bottom - выравнивание по нижнему полю строки;

align= middle - выравнивание по середине.

3. bgcolor– задает цвет фона под строкой,

например,

Теги <td> и </td> используются для формирования столбцов таблицы. Тег <td> имеет следующие параметры:

1. align - горизонтальное выравнивание внутри столбца. Он может принимать следующие значения:

align=left- выравнивание содержимого столбца по левому полю;

align=right- выравнивание содержимого столбца по правому полю;

align=center- выравнивание содержимого столбца по центру.

2. valign - вертикальное выравнивание внутри строки. Он может принимать следующие значения:

align= top – выравнивание по верхнему полю столбца ;

align= bottom - выравнивание по нижнему полю столбца ;

align= middle - выравнивание по середине.

3. bgcolor– задает цвет фона под столбцом.

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

<html>

<body>

<head>

<title>

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

</title>

<td>ячейка таблицы 1

</td>

<td>

ячейка таблицы 2

</td>

<tr>

<td>ячейка таблицы 3

</td>

<td>ячейка таблицы 4</td>

</tr>

</table>

<body>

</html>

Результат выполнения программы:

Чтобы назвать столбцы и строки таблицы используется парный тег <th> и </th>. Он имеет следующие параметры:

1. align – горизонтальное выравнивание заголовка.

2. valign – вертикальное выравнивание заголовка

3. width – ширина заголовка в пикселах.

4. bgcolor – цвет фона под заголовком.

Пример создания заголовков.

<html>

<body>

<head>

<title>

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

</title>

Самая простая таблица с заголовками

</caption>

<th> Заголовок 1</th>

<th> Заголовок 2</th>

<th> Заголовок 3</th>

<tr>

<td> Ячейка А </td>

<td> Ячейка b </td>

<td> Ячейка c </td>

</tr>

<tr>

<td> Ячейка d </td>

<td> Ячейка e </td>

<td> Ячейка f </td>

</tr>

</table>

<body>

</html>

Результат выполнения программы:

Гораздо чаще встречаются сложные таблицы. В них ячейки располагаются одновременно в нескольких соседних столбцах или строках. Для объединения ячеек используются параметры colspan и rowspan. Параметр colspan сообщает программе просмотра, что нужно растянуть клетку таблицы на несколько столбцов. Например, чтобы объединить ячейки двух столбцов, необходимо написать сolspan=2. Чтобы объединить ячейки двух строк необходимо написать rowspan=2.

Пример таблицы с использованием параметров colspan и rowspan.

<body>

<head>

<title>Создание таблицы</title>

<tr>

Большая ячейка а

</td>

<td> Маленькая ячейка 1 </td>

<td> Маленькая ячейка 2 </td>

</tr>

<tr>

<td> Маленькая ячейка 3 </td>

<td> Маленькая ячейка 4</td>

</tr>

<tr>

<td> Маленькая ячейка c </td>

Большая ячейка d

</td>

</tr>

</table>

</body>

</html>

Результат выполнения программы:

При создании таблицы ширина столбца оказывается равной самому широкому элементу в таблице. В HTML можно задать конкретную ширину и высоту ячейки таблицы. Чтобы задать ширину и высоту строки таблицы используются параметры width и height тега <tr>. Чтобы задать ширину и высоту столбца таблицы используются параметры width и height тега <td>.

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

<html>

<body>

<head>

<title>Создание таблицы</title>

Мы имеем опыт обучения детей посредством компьютерных сетей

</td>

</td>

</tr>

В 1986 году в

Международной лаборатории Вега

</a>

начали организовывать детский компьютерный клуб,

основанный на принципах американской программы

”5-е измерение”

</a>

</td>

</td>

</tr>

</table>

</body>

</html>

Результат выполнения программы:

В данном примере для большей наглядности бордюр таблицы сделан невидимым .