Создание таблиц на языке 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 допускается вложение в ячейки других таблиц.