HTML таблицы могут использоваться как для отображения таблиц, так и для создания невидимого каркаса для нужного распределения материала на странице.

Раньше шаблоны сайтов имели табличную структуру, хотя в последнее время набирает популярность структура сайтов на дивах (div и CSS ). 

Для создания таблицы используются следующие элементы:

TABLE - важный элемент для создания таблицы. В основном используется с атрибутом BORDER который задает толщину рамки html таблицы, так как по умолчанию рамка отсутствует.

TR (Table Row) - отвечает за ряды в таблице.

TD (Table Data) - отвечает за начало и конец каждой ячейки ряда html таблицы.

Например, так будет выглядеть таблица из трех рядов и двух столбцов:

<table border="1">
<tr>
<td>ряд 1 ячейка 1</td> <td>ряд 1 ячейка 2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
<tr>
<td>ряд 3 ячейка 1</td> <td>ряд 3 ячейка 2</td>
</tr>
</table>

Вот результат:

ряд 1 ячейка 1 ряд 1 ячейка 2
ряд 2 ячейка 1 ряд 2 ячейка 2
ряд 3 ячейка 1 ряд 3 ячейка 2

Таким образом, таблица состоит с <table>, затем идёт <tr>, который указывает на начало нового ряда. В ряду  две ячейки: <td>ряд 1 ячейка 1</td> и <td>ряд 1 ячейка 2</td>. Затем идет закрывающийся тег </tr> и т. д. В самом конце - закрывающийся тег </table>

Также существуют атрибуты, необходимые для объединения ячеек:

COLSPAN – используется, если необходимо объединить ячейки по горизонтали. 

ROWSPAN – используется, если необходимо объединить ячейки по вертикали.

Например:

<table border="2">
<tr>
<td colspan="2">ряд 1 ячейка 1+2</td> <td>ряд 1 ячейка 3</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td> <td>ряд 2 ячейка 3</td>
</tr>
</table>

В браузере увидим:

ряд 1 ячейка 1+2 ряд 1 ячейка 3
ряд 2 ячейка 1 ряд 2 ячейка 2 ряд 2 ячейка 3

Другой пример:

<table border="2">
<tr>
<td rowspan="2">Ячейка 1, ряд 1+2</td> <td>ряд 1 ячейка 3</td>
<td>ряд 1 ячейка 2</td>
</tr>
<tr>
<td>ряд 2 ячейка 2</td> <td>ряд 2 ячейка 3</td>
</tr>
</table>

Результат:

Ячейка 1, ряд 1+2 ряд 1 ячейка 2 ряд 1 ячейка 3
ряд 2 ячейка 2 ряд 2 ячейка 3


Дополнительные атрибуты:

CELLPADDING – применяется для изменения расстояния между рамкой каждой ячейки html таблицы и содержащемся в ней материалом.

CELLSPACING – для изменения расстояния между границами соседних ячеек таблицы html.

WIDTH – для изменения ширины таблицы html. Ширину можно задать в пикселах или в процентном соотношении к ширине страницы.

HEIGHT – для изменения высоты таблицы.

Например:

<table border="1" cellpadding="10">
<tr>
<td>ряд 1 ячейка 1</td><td>ряд 1 ячейка 2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Получится:

таблица с атрибутом cellpadding

Еще пример:

<table border="1" cellspacing="10">
<tr>
<td>ряд 1 ячейка 1</td><td>ряд 1 ячейка 2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Увидим:

Таблица с атрибутом cellspacing

Последние атрибуты:

ALIGN – необходим для выравнивания таблицы ячеек по горизонтали значениями left, center, right.

VALIGN – для выравнивания таблицы или ячеек с помощью значений top (прижимает к верху), bottom (к низу), middle (располагает посередине).

BGCOLOR – для изменения фона ячеек в таблице.

BACKGROUND – можно сделать фоном таблицы изображения, указав указав url-путь к нему.

Примечание: задать фон или изображение можно для любой ячейки;
но если необходимо задать фон или изображение во всей таблице - прописываем атрибуты в элементе TABLE.

Например:

<!-- зададим ширину, высоту, толщину рамки и фоновый цвет всей таблицы-->
<table width="450" height="120" border="2" bgcolor="#B09AE9">
<tr>
<!-- эту ячейку менять не будем-->
<td>ряд 1 ячейка 1</td>
<!-- содержимое выравниваем по центру и располагаем вверху ячейки-->
<td align="center" valign="top">ряд 1 ячейка 2</td>
</tr>
<tr>
<!-- тоже выравниваем по центру, но располагаем внизу ячейки-->
<td align="center" valign="bottom">ряд 2 ячейка 1</td>
<!-- содержимое выравниваем по правому краю, вертикально - посередине, и задаем фон-->
<td align="right" valign="middle" bgcolor="yellow">ряд 2 ячейка 2</td>
</tr>
</table>

Посмотрим, что получилось:

Таблица пример

Предыдущая - цвет фона и текста