Создание простых таблиц

Практическое занятие № 4

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

Цель: научиться размещать информацию на Web-страницах с использованием различных видов таблиц.

Методические указания

Таблица представляет собой расположенную на HTML-странице прямоугольную сетку строк и столбцов, в которую можно вводить разнообразную информацию, включая текст, числа, связи и даже изображения.

Все таблицы обрамляются тегами <TABLE> и </TABLE>, остальные теги таблицы находятся между ними. Чтобы показать в таблице рамку, вместо тега <TABLE> применяется тег <TABLEBORDER>, однако закрывается таблица тегом </TABLE>.

Создание простых таблиц

Тег <table> является парным, таблица состоит из строк и ячеек, соответственно задаваемых парными тегами <tr> и <td>.

Атрибуты <table>:

· align – задает тип выравнивания таблицы;

· background – задает фоновый рисунок таблицы;

· border – задает толщину рамки таблицы (в пикселях);

· bordercolor –задает цвет рамки;

· cellpadding – задает величину отступа от рамки до содержимого ячейки;

· cellspacing – задает величину расстояния между ячейками;

· cols – задает число колонок в таблице;

· frame – задает отображение границ вокруг таблицы, может принимать значения:

o void – не отображать границы;

o border – отображать границу вокруг таблицы;

o above – провести границу только по верхнему краю таблицы;

o below – провести границу только по нижнему краю таблицы;

o hsides – отрисовать только горизонтальные границы;

o vsides – отрисовать только вертикальные границы;

o rhs – провести границу только по правой стороне таблицы;

o lhs – провести границу только по левой стороне таблицы;

· height – задает высоту таблицы;

· rules – задает отображение границ между ячейками, может принимать значения:

o all – отображать границы вокруг каждой ячейки таблицы;

o groups – отображать границы между группами, задаваемыми тегами <thead>, <tfoot>, <tbody>, <colgroup>,<col>;

o cols - отображать границы между колонками;

o none – скрыть все границы;

o rows – отображать границы между строками таблицы;

· summary – задает краткое описание таблицы;

· width – задает ширину таблицы.

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

Результат:

Рис. 5.1. Простейшая html-таблица

Внутри тега <table>, помимо <tr> и <td> допускается использование тегов:

· < caption > – задает заголовок таблицы;

· <col> – задает характеристики одной, или нескольких колонок таблицы;

· <colgroup> – задает стиль для группы колонок таблиц;

· <tbody> – хранит одну, или несколько строк таблицы, допустимо применение только одного такого тега в рамках <table>;

· <tfoot> – хранит одну, или несколько строк, отображаемых внизу таблицы;

· <th> – задание ячейки таблицы, которая является заголовочной, т.е. текст ячейки отображает полужирным шрифтом с выравниванием по центру;

· <thead> –хранит одну, или несколько строк, отображаемых вверху таблицы;

В следующем примере приведен код создания таблицы с наименованием, шапкой и заголовочной ячейкой:

Результат:

Рис. 5.2. Пример html-таблицы

Не нашли, что искали? Воспользуйтесь поиском: