Как вставить таблицу в Blogger

Таблица для Blogger WordPress Joomla

Хотя редактор блоггера имеет вполне боеспособный набор инструментов, все же есть и такие инструменты, которые на данный момент отсутствуют в нем и таблица одна из них. Где, где, а в поисковой системе Google она очень даже ценится, так же, как картинки, видео и другие графические элементы. Впрочем добавить в статью таблицу не составит никакого труда, ее можно перенести из того же Microsoft Word. Но вот, как сделать так, чтобы она отображалась нормально не только на компьютерах, но и на мобильных устройствах? В этом нам поможет адаптивный дизайн, пример на картинке ниже:

Таблица с адаптивным дизайном

Переходим к установке:
Данный вариант подойдет для любой платформы, будь то Blogger, Wordpress, Joomla и т.д.. Я покажу ее пример на Blogger - Посмотреть демо.

1). Сперва нужно разместить CSS код, для этого откройте HTML редактор своего сайта.

html редактор

Затем после закрывающего тега */]]></b:skin> вставьте код:

<style type='text/css'>
table {border: 1px solid #eee;border-collapse: collapse;margin: 0;padding: 0;width: 100%;color:#555;}
table caption {font-size: 1.5em;margin: .25em 0 .75em;}
table tr {background: #eee;border: 1px solid #ccc;padding: .35em;}
table th,table td {border-right: 1px solid #ccc!important;text-align: center;border:0;padding: 3px;}
table th {font-size: .85em;letter-spacing: .1em;text-transform: uppercase;background: #ddd;}
table td img {text-align: center;}
@media screen and (max-width: 600px) {
table {border: 0;}
table caption {font-size: 1.3em;}
table thead {display: none;}
table tr {border-bottom: 3px solid #ccc;display: block;margin-bottom: .725em;}
table td {border-bottom: 1px solid #ccc;display: block;font-size: .8em;text-align: right;}
table td:before {content: attr(data-label);float: left;font-weight: bold;text-transform: uppercase;}
table td:last-child {border-bottom: 0;}}
</style>

Сохраните тему.

2). Теперь добавим HTML структуру. Создайте новое сообщение (пост) перейдите на вкладку HTML и вставьте следующий код:

<table>
<caption>Caption Table</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name" scope="row">David Beckham</td>
<td data-label="Address">Manchester, England</td>
<td data-label="Email">davidbe@example.com</td>
<td data-label="Phone Number">021-0101099189</td>
</tr>
<tr>
<td data-label="Name" scope="row">Mike Tyson</td>
<td data-label="Address">California, US</td> 
<td data-label="Email">miketys@example.com</td>
<td data-label="Phone Number">021-9198199189</td>
</tr>
<tr>
<td data-label="Name" scope="row">Justin Bieber</td>
<td data-label="Address">New York, US</td>
<td data-label="Email">justinbr@example.com</td>
<td data-label="Phone Number">021-2929292929</td>
</tr>
<tr>
<td data-label="Name" scope="row">Selena Gomez</td>
<td data-label="Address">Texas, US</td>
<td data-label="Email">sel.gom@example.com</td>
<td data-label="Phone Number">021-8191991919</td>
</tr>
</tbody>
</table>

Замените названия ячеек на свои и опубликуйте сообщение.

Вот и все, если возникнут вопросы задавайте в комментариях.



Поделиться в социальных сетях:
Facebook Twitter Google+ Vkontakte

Рекомендуем

7 Коммент.

Оставить комментарий
avatar
Doctor
ноября 27, 2018

Интересная статья! А можно так вставлять таблички в ваш шаблон BlogBoard?

Ответить
avatar
Марк Корвин
ноября 27, 2018

Можно.

Ответить
avatar
Doctor
ноября 30, 2018

Не идут такие таблицы в этом шаблоне. Съезжает всё. Уже и вообще без изменений вставляю html-код в сообщение...

Ответить
avatar
Doctor
декабря 01, 2018

Уточнение: сбиваются колонки при повороте смартфона в горизонтальное положение.

Ответить
avatar
Все для Blogger Блог Марка Корвина
декабря 02, 2018

В том шаблоне есть свой код для таблиц в результате происходит конфликт между кодами. Вам нужно в шаблоне удалить код который идет после /* Post Table */ до строки .sr {visibility:hidden;width:0;height:0;}

Ответить
avatar
Doctor
декабря 06, 2018

Спасибо.
Может быть Вы подскажете какой удалить код неработающей Подписки по email в блоге BlogBoard? Давненько уже висит вопрос в электронке.

Ответить
avatar
Марк Корвин
декабря 07, 2018

Ответил email

Ответить