Как создать свой стиль таблицы в CSS

Многие темы блогов требуют от нас публикации информации, сведенной в таблицы. И, поверьте мне, что нет ничего ужаснее уродливой таблицы, которая своим отвратительным внешним видом затмевает все то важное и полезное, чем вы ее наполнили. Я сама некоторое время страдала от этого, пока, наконец, не открыла учебники html и css, чтобы раз и навсегда создать шаблон своей таблицы, которая будет украшать, а не уродовать блог. И я расскажу вам, как это сделать.

Стиль таблицы в css и в html?

Ну а зачем, — спросите вы, — ты полезла в учебники CSS и HTML? В чем разница? Почему нельзя обратиться только к одной форме записи?

Отвечаю. Сначала мы запишем общие параметры нашей таблицы в CSS. Они будут распространяться на все таблицы, которым мы присвоим определенный класс (об этом позже). Почему необходимо прописывать общие стили в отдельном файле? – Я уже отвечала на этот вопрос в статье 15 мая. Кратко повторю, что это облегчает код отдельной записи, поста – ведь в него не приходится пихать все описание стиля каждого элемента. Если мы можем вывести какие-то правила, например, общие правила отображения таблиц – мы выносим их в таблицу стилей (style.php).

Но в каждой конкретной ситуации, для каждой конкретной таблицы нам может понадобиться дополнительное форматирование, которое происходит уже в html-редакторе. В результате я расскажу, как реально создать такую таблицу в HTML в конкретной публикации.

Шаблон таблицы в CSS

Итак, вот какие параметры мы отобразим в нашей таблице стилей (style.php) для блога на Вордпресс:

таблица №1

В принципе, у нас уже должна получиться нормальная таблица и можно на этом остановиться. Но мы допишем и дополнительные параметры, чтобы выделить верхнюю строчку таблицы. За нее отвечает тег <thead>, то есть, «заглавие таблицы»:

таблица №2

И далее прописываем стиль тела таблицы. Тег, который отвечает за строку выглядит так <tr>. А тег, который отвечает за отдельную ячейку – так <td>. Вот и получается:

таблица №3

И вот так это выглядит в целом.

.mytable {
        border: 3px ridge #666600;
        border-collapse: collapse; 

}

.mytable thead {
        background: #ffffcc;
        text-align: center;
        border: 3px ridge #666600;
        border-collapse: collapse; 
} 

.mytable td, tr {
       text-align:left;
       vertical-align: text-top;
       padding:10px;
       border: 1px solid #666600;
       border-collapse: collapse;
}

Обратите внимание, что вы можете записывать код CSS, как вам больше нравится — в столбик или в строчку (см. ниже). Количество пробелов и переносов между элементами кода ничего не меняет, главное, записать все правильно по сути:

.mytable {border: 3px ridge #666600; border-collapse: collapse;}               

.mytable thead {background: #ffffcc; text-align: center; border: 3px ridge #666600; border-collapse: collapse;} 

.mytable td, tr {text-align:left;vertical-align: text-top;padding:10px;border: 1px solid #666600;border-collapse: collapse;}

Пропишите эти стили (строчный вариант или вариант столбиком — выбирайте один из них!) в самом конце своей таблицы стилей (style.php)

А в следующей публикации я расскажу, как непосредственно создать и подкорректировать таблицу в публикации при помощи html-тегов. Несколько готовых стилей таблиц — можно брать и пользоваться.