CSS

Добрый день, уважаемые читатели блога БЛОGГЕР!

Каждый из вас стремится сделать интересный блог. Достигается это разными способами, в том числе средствами визуализации или проще говоря более наглядным предоставлением информации.

В этой статье вы узнаете, как быстро и просто создать таблицу при помощи CSS, и при этом, что бы она выглядела красиво и привлекала внимание читателей.

 В самом простом виде код HTML таблицы выглядит примерно так:
<table><tbody>
<tr>
<th>Блог</th>
<th>Тиц</th>
</tr>
<tr>
<td>Название</td>
<td>Показатель</td>
</tr>
<tr>
<td>Название</td>
<td>Показатель</td>
</tr>
</tbody></table>

Мы же с вами создадим таблицу — «зебру». Это не значит, что она будет скакать по экрану 🙂 , просто она будет в красивую полосочку.

Как создать красивую таблицу — добавляем стиль

Открываем Шаблон › Изменить HTML, ставим отметку в поле «Расширить шаблоны виджета».

При помощи горячих клавиш Ctrl+F находите закрывающий тег:
]]></b:skin>И перед этим тегом вставляете следующий код CSS:
/* table-zebra*/
#zebra
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#zebra td, #zebra th
{
font-size:1em;
border:1px solid #5E5D5A;
padding:3px 7px 2px 7px;
}
#zebra th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#5E5D5A;
color:#ffffff;
}
#zebra tr.row td
{
color:#000000;
background-color:#C3C2C0;
}

Теперь нужно этот стиль добавить в таблицу:
<table id="zebra"><tbody>
<tr>
<th>Блог</th>
<th>Тиц</th>
</tr>
<tr class="row">
<td>Название</td>
<td>Показатель</td>
</tr>
<tr>
<td>Название</td>
<td>Показатель</td>
</tr>
</tbody></table>

Как вы видите стиль CSS и HTML код таблицы связаны между собой при помощи стилевого имени (уникального идентификатора) ID и при помощи атрибута class.

Смотрим пример оформления такой таблицы.

Как создать красивую таблицу — подобор цвета

Естественно вы захотите подобрать для вашей таблицы цвета, которые подходят под дизайн вашего блога.


Для этого рекомендую воспользоваться чудесным и главное бесплатным онлайн приложением colorwizard.

В заключение немного юмора в картинках.

Яндекс юмор

Если эта статья была вам полезна, поблагодарите автора — активно плюсуем.

На эту же тему читайте:
Как создавать сайты
Как встроить PDF документ в Blogger
Исправление геометрических искажений
Закругленные углы в картинке при помощи программы Photoshop

Если у вас остались вопросы как создать красивую таблицу — задавайте.

5 комментариев к «Как создать красивую таблицу»
  1. CSS великая штука. Я вот сделал кнопку на css для своего проекта — так это просто загляденье. Вывод: нужно постоянно эксперементировать!

  2. статья не плоха, но как то уж совсем для новичков, быть может стоит рассмотреть работу с дивами, и людям будет полезно и людей привлечет кто шаблоны пытается сам переделывать.

  3. @керакам

    Спасибо за комментарий.
    Да, статья была рассчитана именно на новичков и одной из целей статьи было — простота изложения и использования информации.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *