CSS оформление таблицы вывода данных о статье

Автор:Дата:Добавляем CSS оформление таблице, в которой будет выводиться информация о публикации
вывод данных о посте

ваш пост будет привлекать всеобщее внимание с нашей таблицей!

Итак, мы выбрали те php функции, которые помогут нам выводить нужную информацию о публикации (дату, а также, метки и количество комментариев). Мы собрали их в html-таблицу. Теперь нам предстоит не менее важное дело — настроить стиль этой таблицы, чтобы она была не только полезной для наших читателей, но и красивой. Ну, хотя бы, не раздражала глаз! Для этого мы прибегнем к CSS.

В который раз говорим о html, CSS и я снова рекомендую вам сайт htmlbook — это просто кладезь необходимых сведений! Дело в том, что нам, вряд ли, удастся охватить все возможности стилевого оформления таблицы. Мы сделаем только самые простые шаги. Поэтому, когда будете оттачивать отображение вашей таблицы на страницах блога — лучшим помощником для вас станет именно этот справочник.

Создаем новый класс CSS оформления

Давайте сначала запишем наш код в блокноте (я использую Notepad++), а потом скопируем его в файл style.php нашего блога. Напишем вот такую строку:

.table-data {border: none; width: 600px;  margin: 5px 0px 5px 0px}

Теперь рассмотрим подробно каждый параметр:

ПараметрЧто этоРазъяснение
.table-dataназвание классаможете назвать как хотите, только латиницей и лучше прописными буквами
{border: none;вид рамкирамки нет
width: 600px;ширина всей таблицыочень важно выставить ширину, которая подходит именно для вашего блога! поэтому смело меняйте значение в пикселях
margin: 5px 0px 5px 0px;отступ краев таблицы от внешних элементовчетыре цифры показывают отступы от: верхнего-правого-нижнего-левого внешних краев таблицы. Изменяя эти значения можно подвинуть ее и красиво вписать в дизайн блога

Повторюсь: это лишь самый простой и примерный стиль для таблицы. Но по его образцу вам будет нетрудно добавить свои параметры (используйте справочник CSS!). Например, можно поменять цвет шрифта, используя параметр font-color, или сделать его полужирным, используя font-weight… Не ленитесь и не бойтесь — пробуйте!

Далее, я предлагаю прописать отдельно стиль для ячеек:

.table-data td{border: none; width: 200px; padding: 5px; font-size: 11px;}

Вот, что значат эти параметры:

ПараметрЧто этоРазъяснение
.table-data tdприменение данного класса к ячейкам
{border: none;вид рамкирамки нет
width: 200px;ширина одной ячейкиу нас обая ширина = 600 px делим ее на 3 ячейки — получаем 200px. Если у вас в таблице будет больше данных — нужно выбрать соответствующее значение ширины
padding: 5px;отступ содержимого ячейки от ее краев внутриесли здесь (или для тега margin) указано одно число (а не четыре) — отступы сверху, справа, снизу и слева будут одинаковыми (5px)
font-size: 11px;размер шрифтаможете менять это значение, исходя из дизайна блога

Это самые элементарные стили, без которых содержимое ячейки, скорее всего, будет выглядеть совершенно кривым. Но, безусловно, вам потребуется дописать некоторые параметры, чтобы сделать внешний вид таблицы подходящим. Это не трудно и не страшно: пользуйтесь сайтом htmlbook и моей статьей о стилях таблиц.

И еще одна строка CSS кода будет задавать стиль строки:

.table-data tr{border: none;}

Ведь у нас таблица без рамок — значит, и в строке они не нужны.

Наконец, наши метки будут являться ссылками, при нажатии на которые пользователь сможет открыть страницу со всеми публикациями, которым присвоены эти теги. Поэтому стоит оформить их так же, как оформлены все ссылки у вас на блоге:

.table-data a{color:#ваш цвет ссылок}
.table-data a:hover{color:#ваш цвет ссылок; text-decoration:underline}

Первая строка кода отражает оформление ссылки. В данном случае мы прописываем лишь ее цвет. Посмотрите, какой код цвета прописан у вас в таблице стилей — это должно быть где-то ближе к началу файла. Если это трудно - подберите цвет, используя советы Блоготея.

Вторая строка описывает ссылку, на которую наведен курсор. Здесь, также, выставляем шестизначный код цвета (отличного от цвета обычной ссылки!) и добавляем подчеркивание. Можете перенести text-decoration: underline в предыдущую строку.

Напоминаю, что все эти строчки добавляем в наш файл style.php

Не бойтесь править стиль CSS!

Решила, что повторение этой истины не будет лишним. Откройте справочники, посмотрите, какие возможности предлагает нам CSS-форматирование — попробуйте применить их на практике. Даже если вы совершенно неправильно напишете свой код — это не причинит никакого вреда вашему блогу. Просто, внесенные изменения никак не проявят себя… Даже если какой-то элемент вдруг уехал в сторону — стоит лишь удалить новый фрагмент кода, и все вернется на место. Поэтому — смело экспериментируйте!

Добавляем таблицу с данными на страницы блога

Но, чтобы увидеть, как повлияют те или иные изменения CSS на нашу таблицу — нужно ее сначала опубликовать. Кстати, обратили внимание, что у меня данные выводятся в две строчки (сверху слово «дата:», а под ним уже число). Чтобы добиться этого, уберем наши «заглавия» в контейнер span и, заодно, добавим написанный нами класс оформления:

<div>			
<table class="table-data">
<tr>
<td><span>Дата:</span><?php the_time(' j F Y'); ?></td>
<td><span>Комментарии:</span><?php comments_number( 'пока нет', '1 коммент', '% коммент.' ); ?></td>
<td><span>Метки:</span><?php the_tags(''); ?></td>
</tr></table>
</div>

И вот этот фрагмент кода нужно отправить на главную страницу (Index.php) — прямиком под заголовок поста. Конечно, вы можете найти и другое расположение таблицы с данными о статье — попробуйте несколько вариантов.

На страницу одной записи, я думаю, не стоит добавлять подобный код — ведь посетитель уже читает текст. Так что, не будем его отвлекать. Он и сам может посмотреть, как много комментариев у данного поста, какие метки ему присвоены и так далее.

Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Введите свой E-MAIL:

     Katyaru 13.12.2012


    
Читайте БлоготеЙ! на Google+
Читайте БлоготеЙ! на Фейсбуке

К записи "CSS оформление таблицы вывода данных о статье" оставлено 7 коммент.

  1. Сергей:

    Здóрово!
    Катюш, а вот подскажи пожалуйста, как сделать в Вордпрессе страницу, на которой записи шли бы не одна под другой, а в виде квадратиков в ряд по три-четыре и затем друг под дружкой с фотками и подписями, как в интернет-магазинах, например. И при клике вели бы уже непосредственно на саму запись. Это тоже таблицы? С произвольными полями самого Вордпресса и плагинами полей всю голову сломал — ничего не получается!

    • katyaru:

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

      Верстаться такая страница будет — как таблица, чтобы все квадраты ровно распределялись. А внутри j-query. Вот сайт, на котором полно подобных решений http://ruseller.com/

      Конечно, это дико красиво. НО! Нужно помнить о скорости загрузки и пользователях, которые будут смотреть блог с мобильных устройств. И даже о кроссбраузерности. Я вот недавно сделала себе приклеенное меню и… пришлось отказаться, т.к. в Опере все расползалось…

      • Блогобабушка:

        Не знаю,как будет со скоростью, но такая таблица есть только на главной. Это просто фишка, а пользы?..

        • katyaru:

          Такие таблицы могут быть на всех страницах блога (ну, то есть, в шаблоне index.php)- есть такие темы

    • tanichka:

      Сергей, могу подсказать сайт, где можно найти такую тему бесплатно.

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


3 + девять =

Палю тему!
Гугл в помощь
Надо подписаться!

Введите свой E-MAIL:

Delivered by FeedBurner

Дружите с Блоготеем в соцсетях


Смотрите все ВИДЕО Блоготея на YouTube


Blogotey | 


Спутник Блоготея в Tumblr

Наверх.