WordPress. Создание таблиц в html без плагинов

Создание таблиц для сайта на WordPress без плагинов в html. Объединение ячеек в строках и столбцах. Шаблоны таблиц и частей кода для копирования. Примеры.

1. Теги html для создания таблиц
2. Шаблоны простых таблиц
3. Объединение ячеек

Теги html для создания таблиц

Таблицы в html создаются с помощью следующих тегов:

<table>...</table> – контейнер для таблицы;
<tbody>...</tbody> – тело таблицы;
<tr>...</tr> – строки;
<th>...</th> – ячейки с заголовками;
<td>...</td> – ячейки с данными.

Ячейки с заголовками обычно имеют другое форматирование, чем ячейки с данными. Я предпочитаю форматировать заголовки вручную, поэтому особые стили для тега th добавлять не стал. Изменять форматирование легко на вкладке «Визуально» классического редактора. В примерах ниже тег th не используется.

Шаблоны простых таблиц

Используйте шаблоны таблиц для вставки на свои страницы. Добавляйте нужное количество строк и столбцов, форматируйте заголовки.

Таблица из одной ячейки

<table>
<tbody>
<tr>
<td>Данные</td>
</tr>
</tbody>
</table>

Данные

Таблица из девяти ячеек

<table>
<tbody>
<tr>
<td>Заголовок 1</td>
<td>Заголовок 2</td>
<td>Заголовок 3</td>
</tr>
<tr>
<td>Текст 1</td>
<td>Текст 2</td>
<td>Текст 3</td>
</tr>
<tr>
<td>Текст 4</td>
<td>Текст 5</td>
<td>Текст 6</td>
</tr>
</tbody>
</table>

Заголовок 1	Заголовок 2	Заголовок 3
Текст 1	Текст 2	Текст 3
Текст 4	Текст 5	Текст 6

Замените в тегах заголовков td на th и вы увидите, поддерживает ли ваша тема WordPress форматирование заголовков.

Таблица с фиксированной относительной шириной столбцов

<table>
<tbody>
<tr>
<td width="15%">Узкий</td>
<td width="30%">Средний</td>
<td width="55%">Широкий</td>
</tr>
<tr>
<td>Текст 1</td>
<td>Текст 2</td>
<td>Текст 3</td>
</tr>
<tr>
<td>Текст 4</td>
<td>Текст 5</td>
<td>Текст 6</td>
</tr>
</tbody>
</table>

Узкий	Средний	Широкий
Текст 1	Текст 2	Текст 3
Текст 4	Текст 5	Текст 6

В данном случае зафиксирована относительная ширина столбцов, выраженная в процентах. Это сделано для того, чтобы таблица оставалась адаптивной для любых размеров экрана.

Объединение ячеек

Для объединения ячеек в таблице используется следующий код:

объединение ячеек в строке:
<td colspan="n">, где n - количество объединяемых ячеек;

объединение ячеек в столбце:
<td rowspan="n">, где n - количество объединяемых ячеек.

Пример объединения ячеек во второй строке

<table>
<tbody>
<tr>
<td>Заголовок 1</td>
<td>Заголовок 2</td>
<td>Заголовок 3</td>
</tr>
<tr>
<td colspan="2">Текст 1</td>
<td>Текст 2</td>
</tr>
<tr>
<td>Текст 3</td>
<td>Текст 4</td>
<td>Текст 5</td>
</tr>
</tbody>
</table>

Заголовок 1	Заголовок 2	Заголовок 3
Текст 1		Текст 2
Текст 3	Текст 4	Текст 5

Пример объединения ячеек во втором столбце

<table>
<tbody>
<tr>
<td>Заголовок 1</td>
<td>Заголовок 2</td>
<td>Заголовок 3</td>
</tr>
<tr>
<td>Текст 1</td>
<td rowspan="2">Текст 2</td>
<td>Текст 3</td>
</tr>
<tr>
<td>Текст 4</td>
<td>Текст 5</td>
</tr>
</tbody>
</table>

Заголовок 1	Заголовок 2	Заголовок 3
Текст 1	Текст 2	Текст 3
Текст 4		Текст 5

Пример посложнее

<table>
<tbody>
<tr>
<td colspan="5">Моя таблица</td>
</tr>
<tr>
<td colspan="2">Заголовок 1</td>
<td rowspan="2">Заголовок 2</td>
<td colspan="2">Заголовок 3</td>
</tr>
<tr>
<td>Подзаголовок 1.1</td>
<td>Подзаголовок 1.2</td>
<td>Подзаголовок 3.1</td>
<td>Подзаголовок 3.2</td>
</tr>
<tr>
<td>Текст 1</td>
<td>Текст 2</td>
<td>Текст 3</td>
<td>Текст 4</td>
<td>Текст 5</td>
</tr>
</tbody>
</table>

Моя таблица
Заголовок 1		Заголовок 2	Заголовок 3
Подзаголовок 1.1	Подзаголовок 1.2		Подзаголовок 3.1	Подзаголовок 3.2
Текст 1	Текст 2	Текст 3	Текст 4	Текст 5

В ячейках таблиц, кроме обычного текста, можно размещать изображения, ссылки и форматированные списки (ul, ol).