388x60 Ads

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

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

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



Подпишитесь В закладки НапечататьPrint Friendly and PDF


Вячеслав Вареня
Статус: seo-специалист | Контакты


5 коммент.:

Denchick комментирует... [Ответить]

Как говорится, красота нужна везде! :)

Дмитрий комментирует... [Ответить]

CSS великая штука. Я вот сделал кнопку на css для своего проекта - так это просто загляденье. Вывод: нужно постоянно эксперементировать!

керакам комментирует... [Ответить]

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

БЛОGГЕР комментирует... [Ответить]

@керакам

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

Okxi комментирует... [Ответить]

Спасибо интересная идея!

Отправить комментарий