Уроки HTML

Таблицы

Первоначально таблицы были разработаны всего лиш для представления табличных данных. Однако довольно быстро таблицы стали использовать как средство макетирования всего документа.

Чтобы разобраться в устройстве таблицы, расмотрим простой пример. Создадим таблицу состоящую из двух строк и трех столбцов.

<table width="100%" cellspacing="5" cellpadding="10" border="1">
<tr>
  <td>ячейка 1.1</td>
  <td>ячейка 1.2</td>
  <td>ячейка 1.3</td>
</tr>
<tr>
  <td>ячейка 2.1</td>
  <td>ячейка 2.2</td>
  <td>ячейка 2.3</td>
</tr>
</table>

А вот как наша таблица будет выглядеть в IE6

Начало и конец таблицы обозначают тегами <table> и </table>. Элемент <tr> обозначает строку таблицы, а элемент <td> – ячейку.

Рассмотрим возможные атрибуты элемента <table>.

width="n"	Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек.
border="n"	Устанавливает толщину рамки.
bordercolor="#ffffff"	Устанавливает цвет окантовки, где #ffffff (белый) - шестнадцатиричное значение цвета.
bgcolor="#ffffff"	Устанавливает цвет фона для всей таблицы, где #ffffff - шестнадцатиричное число.
background="image.gif"	Заполняет фон таблицы изображением.
cellspacing="n"	Определяет расстояние между рамками ячеек таблицы в пикселях.
cellpadding="n"	Определяет расстояние в пикселях между рамкой ячейки и текстом.
align="left"	Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: left (слева), center (по центру страницы) и right (справа).

При использовании таблиц есть возможность обЪединять ячейки таблицы. Для этого есть атрибуты colspan и rowspan. Colspan обЪединяет ячейки по горизонтали, а rowspan – по вертикали. Пример:

<table width="100%" cellspacing="5" cellpadding="10" border="1">
<tr>
  <td>ячейка 1.1</td>
  <td>ячейка 1.2</td>
  <td>ячейка 1.3</td>
</tr>
<tr>
  <td>ячейка 2.1</td>
  <td colspan="2">ячейки 2.2 и 2.3</td>
</tr>
</table>

А вот результат: