1 подписчик

Таблицы

13 августа 202213 авг 2022

5 мин

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

Таблицы и ячейки могут обладать различными свойствами: они могут быть видимыми и невидимыми, они могут иметь отступ «margin» (расстояние от границы таблицы, на которое отстоят внешние элементы) и отбивку «padding» (расстояние до границы таблицы помещённых внутрь таблицы элементов). Таблице могут быть приданы свойства, управляющие её позиционированием на странице. Она может быть позиционирована относительно других внешних элементов, ей могут быть приданы свойства, управляющие элементами, которые находятся внутри таблицы. Ячейкам также могут быть приданы свойства, которые управляют расположением находящихся внутри них элементов.

Таблица обозначается парным тегом: <table> </table>

Таблица может обладать атрибутами с параметрами:

<caption> ... </caption> - тег заголовка таблицы;
align – горизонтальное выравнивание таблицы на странице. Применяется в виде:
align=left (выравнивание влево);
align=center (выравнивание по центру);
align=right (выравнивание по правому краю);
width – ширина таблицы. Может выражаться:
в пикселях (width=100);
или процентах (width=40%);
border - устанавливает ширину границы таблицы и ячеек (в пикселах, border=5). Придаёт «видимость» таблице. Если атрибут отсутствует – таблица станет невидимой;
cellspacing – устанавливает расстояние между ячейками таблицы (в пикселях, cellspacing=2);
cellpadding - расстояние между границей ячейки и помещённым в ячейку объектом (в пикселах, cellpadding=1).

Таблица может состоять из строк, ячеек и столбцов. Для создания строк и ячеек предназначены специальные теги, вертикальный столбец представляет собой ячейку, созданную объединением нескольких находящихся одна над другой ячеек.

Строка является основной частью деления таблицы. Строки таблицы отмечаются тегом <tr> </tr>. Сколько строк должно быть в таблице, столько тегов должно быть включено в код таблицы.

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

align - горизонтальное выравнивание находящихся в ячейке элементов. Может применяться с одним из следующих атрибутов:
left – выравнивание по левому краю;
right – выравнивание по правому краю;
center – выравнивание по центру;
justify – распределение содержимого ячейки по всей ширине.
valign - вертикальное выравнивание. Применяется со значениями:
valign=top (выравнивание по верхнему краю);
valign=middle (выравнивание по центру);
valign=bottom (выравнивание по нижнему краю);
nowrap - содержимое ячейки будет показано в одну строку;
width - ширина ячейки;
height –высота ячейки. Ширина и высота устанавливается в пикселях (width="100") или процентах от размеров таблицы (height="50%").

Чтобы создать сложную таблицу, в которой одна ячейка по ширине или высоте должна соответствовать двум и более, применяются атрибуты colspan и rowspan.

colspan - устанавливает размер ячейки относительно находящихся ниже нее колонок. colspan=5 означает, что ширина ячейки соответствует ширине пяти колонок;
rowspan – размер ячейки по вертикали относительно строк; rowspan=3 устанавливает, что высота ячейки соответствует высоте трёх строк. При помощи параметра rowspan создаются вертикальные колонки.

Ниже приведён код таблицы, которая выровнена по центру страницы, составляя при этом 70 % её ширины. Она состоит из двух строк. Верхняя строка состоит из двух ячеек, левая из которых занимает ширину такую же, как две ячейки из нижней строки. Правая ячейка составляет 34 % ширины таблицы. Три ячейки нижней строки составляют каждая 1/3 ширины таблицы.

<caption>Таблица</caption>

<tr>

</tr>

<tr>

</tr>

</table>

Выглядит эта таблица следующим образом (рис. 2.7).

Рис. 2.7. Таблица

Каким образом происходит создание таблиц, теперь должно быть довольно понятно. Тем более что во FrontPage есть средства создания таблиц, значительно облегчающие этот процесс.

Довольно полезной представляется возможность позиционирования таблиц относительно друг друга и позиционирование других элементов относительно таблиц. Допустим, вам понадобилось поместить две таблицы в один ряд. В этом случае в код таблицы, которая должна находится слева, помещаете: align="left", а код таблицы, которая должна находится справа, помещаете: align="right" (в FrontPage эта возможность реализована в виде выбора атрибута «float»: float:left – расположение слева, float:right – расположение справа).

Всё вместе выглядит так:

<tr>

</tr>

</table>

<tr>

</tr>

</table>

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

<tr>

<td>

<table>

<tr>

</tr>

</table>

</td>

</tr>

</table>

Вставленный в ячейки этих таблиц код   называется символьным объектом. В тех случаях, когда вы применяете таблицу для представления текста и изображений, может возникнуть ситуация, при которой некоторые ячейки должны будут остаться «пустыми», т.е. в них не будет помещено никакого текста. Такие ячейки не будут отображаться на экране, что ухудшит дизайн вашей страницы. Чтобы избежать этого результата, вам потребуется вставить в пустые ячейки «символьный объект». Этот набор символов не будет отображён в качестве текста, но вокруг ячейки появится границы.

Пройдите курс по ссылке: Веб-технологии. Часть I