Перейти к содержимому

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).

Добавить комментарий

Ваш комментарий будет опубликован после прохождения обязательной модерации. Исходящие ссылки не допускаются. Время модерации составит от нескольких минут до нескольких часов в зависимости от времени суток и занятости модератора. При добавлении в комментарий кода VBA Excel, вставьте перед его началом тег [vb] и по окончании кода - [/vb].