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

Содержание статьи показать

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

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

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

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

 

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

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

таблица №1

ПараметрЧто этоРазъяснение
.mytableНазвание классаможете назвать как хотите, только латиницей и лучше прописными буквами
{border: 3px ridge #666600;Вид рамкиуказываем сразу три параметра: толщину (3px), стиль (ridge) – такой чуть выпуклый, есть и другие (можно погуглить); цвет – подходящий к моему оформлению.
border-collapse: collapse;}Слияние рамоккаждая ячейка таблицы обводится своей рамкой, поэтому получается, что таблица должна состоять из множества прямоугольников-ячеек. Чтобы слить эти отдельные прямоугольнички в единую сетку существует данный тег

 

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

таблица №2

ПараметрЧто этоРазъяснение
.mytable theadНазвание дочернего классаздесь пишите сначала свое название класса (если придумывали что-то более оригинальное, чем у меня) и потом thead
{background: #ffffcc;Цвет фонау меня фон заглавной строки таблицы отличает ее от остальных. Подберите для себя удачное сочетание
 text-align: center;Выравнивание текстау меня по центру
 border: 3px ridge #666600;см. в таблице №1Далее снова описывается размер, вид, цвет рамок и их «склеивание»
border-collapse: collapse;}см. в таблице №1 и их «склеивание»

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

таблица №3

ПараметрЧто этоРазъяснение
 .mytable td, trНазвание дочерних классовсм. таблицу №2
{text-align:left;Выравнивание текстаздесь он выравнивается по левому краю
vertical-align: text-top;Вертикальное выравнивание текста в ячейкеу меня оно строится по самому верхнему элементу текста. Есть и другие возможности выравнивания
padding:10px;Отступ текста от границ ячейкиПлохо, если текст «приклеен к рамкам таблицы. Я думаю, что отступа в 10 пикселей, как правило, хватает
border: 1px solid #666600;Стиль границСнова описано сразу несколько свойств: толщина границы (1px), вид границы (отличается от границ, очерчивающих всю таблицу и ее заглавную строку – выглядит проще), цвет границы
border-collapse: collapse;}см. в таблице №1 и их «склеивание»

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

.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-тегов.

Как связать свой стиль CSS и HTML

Это небольшое дополнение к статье. Когда уже стиль создан возникает необходимость связать его непосредственно со страницей html, если не вдаваться в нюансы, то для этого есть несколько простых способов. Расскажу о самом легком.

<head>
  ...
   <link rel="stylesheet" type="text/css" href="путь к файлу/style.css">
  ...
</head>

Это самый простой и способ.

 

 

Услуги ДиректологаВедение Яндекс ДиректаКейсыОтзывыНастройка рекламы

Другие интересные статьи: