Создание таблиц для сайта на WordPress без плагинов в html. Объединение ячеек в строках и столбцах. Шаблоны таблиц и частей кода для копирования. Примеры.
Теги html для создания таблиц
Таблицы в html создаются с помощью следующих тегов:
|
1 2 3 4 5 |
<table>...</table> – контейнер для таблицы; <tbody>...</tbody> – тело таблицы; <tr>...</tr> – строки; <th>...</th> – ячейки с заголовками; <td>...</td> – ячейки с данными. |
Ячейки с заголовками обычно имеют другое форматирование, чем ячейки с данными. Я предпочитаю форматировать заголовки вручную, поэтому особые стили для тега th добавлять не стал. Изменять форматирование легко на вкладке «Визуально» классического редактора. В примерах ниже тег th не используется.
Шаблоны простых таблиц
Используйте шаблоны таблиц для вставки на свои страницы. Добавляйте нужное количество строк и столбцов, форматируйте заголовки.
Таблица из одной ячейки
|
1 2 3 4 5 6 7 |
<table> <tbody> <tr> <td>Данные</td> </tr> </tbody> </table> |
| Данные |
Таблица из девяти ячеек
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table> <tbody> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </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 |
Таблица с фиксированной относительной шириной столбцов
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table> <tbody> <tr> <th width="15%">Узкий</th> <th width="30%">Средний</th> <th width="55%">Широкий</th> </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 |
В данном случае зафиксирована относительная ширина столбцов, выраженная в процентах. Это сделано для того, чтобы таблица оставалась адаптивной для любых размеров экрана.
Объединение ячеек
Для объединения ячеек в таблице используется следующий код:
|
1 2 3 4 5 |
объединение ячеек в строке: <td colspan="n">, где n - количество объединяемых ячеек; объединение ячеек в столбце: <td rowspan="n">, где n - количество объединяемых ячеек. |
Пример объединения ячеек во второй строке
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table> <tbody> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </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 |
Пример объединения ячеек во втором столбце
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table> <tbody> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </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 |
Пример посложнее
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<table> <tbody> <tr> <td colspan="5">Моя таблица</td> </tr> <tr> <th colspan="2">Заголовок 1</th> <th rowspan="2">Заголовок 2</th> <th colspan="2">Заголовок 3</th> </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).