Добавление таблицы на сайт на вордпресс
В процессе создания сайтов на Вордпресс я столкнулся с тем, что не нашел вариантов создания удобных таблиц средствами пустой ВП или с помощью плагинов.
Я нашел выход через преобразование таблицы excel в html код и вставку его в страницу.
Шаг 2
Получаем код таблицы в html
<table>
<tbody>
<tr>
<td>SEO продвижение сайтов</td>
<td>от 1000 руб</td>
</tr>
<tr>
<td>Настройка контекстной рекламы</td>
<td>от 400 руб</td>
</tr>
<tr>
<td>Ведение контекстной рекламы</td>
<td>от 220 руб</td>
</tr>
<tr>
<td>Создание сайтов</td>
<td>от 800 руб</td>
</tr>
<tr>
<td>Настройка вебаналитики</td>
<td>от 200 руб</td>
</tr>
</tbody>
</table>
Шаг 3
Добавляем класс нашей таблице
<table class=”tftable” border=”1″>
</table>
Шаг 4
Прописываем заголовок таблицы, для лучшего ее понимания поисковыми системами (между тегами table и body)
<thead>
<tr>
<th>Услуга</th>
<th>Цена</th>
</tr>
</thead>
Шаг 5
Если таблица состоит из множества столбцов и не вмещается в экран (как мобильного устройства, так и комрьютера), добавляем перед ней код
<div style=”overflow-x: auto;”>
а после нее зкарывающий тег </div>
Шаг 5
Задаем стили таблицы. Прописываем код
.tftable {font-size:16px;color:#333333;width:100%;border-width: 1px;border-color: #a9a9a9;border-collapse: collapse;}
.tftable th {font-size:16px;background-color:#b8b8b8;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;text-align:left;}
.tftable tr {background-color:#f5f5f5;}
.tftable td {font-size:16px;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;}
.tftable tr:hover {background-color:#ffffff;}
в custom.css сайта в настройках сайта.
Стилями мы задаем ширину таблицы и ячеек, толщину рамок, цвет фона в ячейках, цвет букв в ячейках.
Объединение ячеек
В HTML для объединения ячеек в таблицах используются атрибуты colspan и rowspan.
colspan— позволяет объединить несколько ячеек по горизонтали (в пределах одной строки).rowspan— позволяет объединить несколько ячеек по вертикали (в пределах нескольких строк).
1. Объединение ячеек по горизонтали (colspan):
<th colspan=”2″>Заголовок на две колонки</th>
2. Объединение ячеек по вертикали (rowspan):
<td rowspan=”2″>Ячейка на две строки</td>
3. Комбинирование colspan и rowspan:
<tr>
<th colspan=”2″>Заголовок на две колонки</th>
</tr>
<tr>
<td rowspan=”2″>Ячейка на две строки</td>
<td>Ячейка 1</td>
</tr>
<tr>
<td>Ячейка 2</td>
</tr>
Эти атрибуты можно использовать только с тегами <td> и <th>.
В итоге получаем вот такой итоговый код:
<div style=”overflow-x: auto;”>
<table class=”tftable” border=”1″>
<thead>
<tr>
<th>Услуга</th>
<th>Цена</th>
</tr>
</thead>
<tbody>
<tr>
<td>SEO продвижение сайтов</td>
<td>от 1000 руб</td>
</tr>
<tr>
<td>Настройка контекстной рекламы</td>
<td>от 400 руб</td>
</tr>
<tr>
<td>Ведение контекстной рекламы</td>
<td>от 220 руб</td>
</tr>
<tr>
<td>Создание сайтов</td>
<td>от 800 руб</td>
</tr>
<tr>
<td>Настройка вебаналитики</td>
<td>от 200 руб</td>
</tr>
</tbody>
</table>
</div>
Итоговый результат:
Таким образом, мы можем создавать любые таблицы и стилизовать их под стиль сайта.