Как создать таблицы HTML

Основные теги

• border - ширина бордюра в пикселях. Если указать значение, равное 0, то границы не будет.
• widht - ширина таблицы. можно указать значение в процентах (какое место она будет занимать на странице) или в пикселях.

Параметры задаются такими переменными, как ALIGN, BGCOLOR, BORDER, BORDERCOLOR, CELLPADDING, CELLSPACING, HEIGHT, WIDTH, COLSPAN, NOWRAP, ROWSPAN, VALIGN. Их еще называют атрибутами.

Атрибуты тега table

• ALIGN - Выравнивание по правому (right) или левому (left) краю.
• BGCOLOR - цвет фона. 
• BORDER - толщина бордюра в пикселях. 
• BORDERCOLOR - цвет бордюра. 
• CELLPADDING - расстояние между бордюром и содержимым ячейки. 
• CELLSPACING - расстояние между двумя рамками таблицы (т.к. по умолчанию, таблица имеет двойную рамку, и если задать значение cellspacing=0, то рамка будет одинарная.
• HEIGHT - высота, может измеряться как в пикселях ( в этом случае единицу измерения опускаем, т.е. например, height="100", так и в % (тогда это будет выглядеть следующим образом: height="100%").
• WIDTH - ширина, так же как и высота измеряется в пикселях и в процентах.
• style="float: left; margin: 0 5px 2px 0;" - обтекание таблицы текстом слева,
• style="float: right; margin: 0 0 2px 5px;" - обтекание таблицы текстом справа.

Атрибуты тега td

• ALIGN - так же означает выравнивание содержимого ячеек.
• BGCOLOR - цвет фона ячейки,
• BORDERCOLOR - цвет рамки ячейки,
• COLSPAN - число ячеек таблицы, объединенных по горизонтали, таким образом можно задать, например, шапку таблицы. Более подробно в примерах разберем ниже.
• NOWRAP - заставляет содержимое ячейки отображаться в ней без переноса по строке.
• ROWSPAN - показывает число ячеек, объединенных по вертикали.
• VALIGN - вертикальное выравнивание содержимого. Переменные: top - по верхнему краю, middle - по середине, bottom - по нижнему краю.

Простая таблица

Код простой таблицы, состоящей из 2 столбцов и 3 строк будет иметь следующий вид:

<table border="1" width="52%"> <tr>   <td>содержимое в 1 столбце и 1 строке</td>   <td>содержимое во 2 столбце и 1 строке</td> </tr> <tr>   <td>содержимое в 1 столбце и 2 строке</td>   <td>содержимое в 2 столбце и 2 строке</td> </tr> <tr>   <td>содержимое в 1 столбце и 3 строке</td>   <td>содержимое в 2 столбце и 3 строке</td> </tr></table>

Внешний вид:

Сложные таблицы

Наибольшие затруднения вызывает у начинающих вебмастеров создание сложных таблиц. Для этого воспользуемся приёмами - "таблица в таблице", объединение столбцов и объединение строк.

Таблица в таблице

<table border="3"><tr><td>1 ячейка</td><td>2 ячейка</td>
<td><table border="1" bgcolor="A1CCDD"><tr><td>ячейка 1 таблицы 2</td><td>ячейка 2 таблицы 2</td></tr><tr><td>ячейка 3 таблицы 2</td><td>ячейка 4 таблицы 2</td></tr></table></td></tr><tr><td>4 ячейка</td><td>5 ячейка</td><td>6 ячейка</td></tr></table>

<table>
<tbody>
<tr>
<th style="text-align: center;" colspan="2">Ячейка на два столбца</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>

<table>
<tbody>
<tr>
<th rowspan="2">Ячейка на две строки</th>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
<td>Ячейка 7</td>
</tr>
</tbody>
</table>

Для корректного отображения таблицы в сообщении на сайте, нужно добавлять теги таблицы в запись в режиме HTML (для вордпресс - это режим "Текст"). Некоторые платформы и движки некорректно отображают таблицы (такие, как например, Blogger и Ucoz). Есть секрет вставки таблицы в сложных случаях - необходимо перед вставкой сжать код в любом онлайн-компрессоре кода.