Создание таблиц для сайта на WordPress без плагинов в html. Объединение ячеек в строках и столбцах. Шаблоны таблиц и частей кода для копирования. Примеры.
Теги 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).