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

Для построения таблицы в языке HTML теги: < table > ‑ задание таблицы; < tr> ‑ задание строк в таблице; < td> ‑ задание ячеек.

В этих тегах можно использовать ряд дополнительных атрибутов: align, width, border, bordercolor, cellspacing и др.Некоторые из них нам уже знакомы.

Ширина таблицы может быть задана в пикселах или в процентном отношении к ширине страницы, например, width= 450или width = 40%. При построении таблицы создается «впечатление» их выпуклости с помощью двух рамок— фронтальной и боковой (рис. 4.22).

Рис. 4.22

Ширину боковой рамки в пикселах определяет атрибут border = ши­рина боковой рамки, а ширину фронтальной рамки определяет атрибут cellspacing = ширина фронтальной рамки, bordercolor= цвет границы таблицы.

Пример 1. Построить таблицу из двух строк и столбцов с фиксированной шириной 250 пикселей, шириной боковой рамки 2 пикселя и ячейками светло-зеленого цвета.

< table border=" 2" width=" 250" bgcolor=" #00FF00" > < tr> < td> Ячейка 1< /td> < td> Ячейка 2< /td> < /tr> < tr> < td> Ячейка 3< /td> < td> Ячейка 4< /td> < /tr> < /table>

Если указать атрибуты border=1, cellspacing=0 и bordercolor=blue, то эффект выпуклости границы рамки практически исчезнет и получим обычные границы таблицы синего цвета.

Ячейки в таблице могут быть объединены с помощью атрибутов rowspan= n, где n (n > 1) — количество строк, выделяемых под ячейку или colspan= k, где k (k > 1) — количество столбцов, выделенных под ячейку.

Пример 2. Построить таблицу с объединенными тремя ячейками в первом столбце второй строки.

< table border=4 cellspacings=0> < tr> < td bgcolor=" yellow" > Заголовок 1 < td bgcolor=" yellow" > Заголовок 2 < /tr> < tr> < td rowspan=3 bgcolor=" lime" > Ячейка 1 < td> Ячейка 2 < tr> < td> Ячeйкa 3 < /tr> < tr> < td> Ячейка 4 < /tr> < /table>

Припостроении таблицы на языке HTML допускается вложение в ячейки других таблиц.