Хотя редактор блоггера имеет вполне боеспособный набор инструментов, все же есть и такие инструменты, которые на данный момент отсутствуют в нем и таблица одна из них. Где, где, а в поисковой системе Google она очень даже ценится, так же, как картинки, видео и другие графические элементы. Впрочем добавить в статью таблицу не составит никакого труда, ее можно перенести из того же Microsoft Word. Но вот, как сделать так, чтобы она отображалась нормально не только на компьютерах, но и на мобильных устройствах? В этом нам поможет адаптивный дизайн, пример на картинке ниже:
Blogger, как добавить таблицу в блог
Переходим к установке:
Данный вариант подойдет для любой платформы, будь то Blogger, Wordpress, Joomla и т.д.. Я покажу ее пример на Blogger - Посмотреть демо.
1). Сперва нужно разместить CSS код, для этого откройте 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>Замените названия ячеек на свои и опубликуйте сообщение.
Переходим к просмотру видео:
Вот и все, если возникнут вопросы задавайте в комментариях.
