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

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

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

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

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

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

.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;}

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

Это самые элементарные стили, без которых содержимое ячейки, скорее всего, будет выглядеть совершенно кривым. Но, безусловно, вам потребуется дописать некоторые параметры, чтобы сделать внешний вид таблицы подходящим. Это не трудно и не страшно: пользуйтесь сайтом 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) — прямиком под заголовок поста. Конечно, вы можете найти и другое расположение таблицы с данными о статье — попробуйте несколько вариантов.

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