Вмъкване на таблици в WordPress без плъгин

29 май 2016 | Без плъгини
Вмъкване на таблици във WordPress без плъгин

Понякога се нуждаем от таблици в текста си, за да публикуваме информация, разположена прегледно в редове и колони. Но в пост редактора на WordPress няма такъв инструмент, поне засега. Естествено, има много плъгини, които биха могли да добавят тази функционалност. Знаем обаче, че всяко добавяне на плъгини утежнява сайта. Освен това, трябва да се съобразяваме дали плъгинът е съвместим с нашата WordPress версия, както и постоянно да следим дали има някакви ъпдейти за плъгина, за да не се получат грешки в базата данни и визуализацията на сайта.

Вижте как може съвсем лесно да си добавим таблица в публикацията, без да се налага инсталация на плъгини.

1. Създайте нов пост или страница във вашия WordPress сайт.
2. Копирайте кода по-долу и променете информацията в него с вашата.
3. Изберете таба „Текстов редактор“ (или „HTML editor“, ако по някаква причина WordPress сайтът ви не е преведен на български), и поставете кода там.
4. Вижте как ще изглежда публикацията, като натиснете бутона „Преглед“ („Preview“).
5. Ако всичко е по ваш вкус, публикувайте готовата статия.

<table>
<tr><th colspan="2">Заглавие, което заема две колони</th></tr>
<tr><td>Лява колона</td> <td>Дясна колона</td></tr>
<tr><td>Лява колона</td> <td>Дясна колона</td></tr>
</table>

Естествено, кодът е примерен и вие бихте могли да си добавите редове и колони, следвайки шаблона, както и да си поиграете с CSS, за да направите таблицата по ваш вкус. Всички WordPress теми имат включен стил на оформление на таблиците в своя CSS файл. Но ако все пак няма, добавете във файла код, подобен на този по-долу.

table {border:1px solid #999;}
table th {width:500px; text-align:center; padding:15px; text-transform:uppercase;}
table td {padding:2px 15px;border:1px solid #999;}
table td:nth-child(2) {text-align:right;}
.collapse {border-collapse: collapse;}
.separate {border-collapse: separate;}

Ето и каква е разликата между border-collapse: collapse; и border-collapse: separate;. Естествено, таблицата може да бъде и без видими граници – border: none;.
Разлика между border-collapse: collapse и separate

В таблиците, показани на снимката, текстът в заглавния ред е центриран. В лявата и дясната колони е подравнен, съответно вляво и вдясно. Различен стил за различните редове или колони се постига чрез CSS3 селектора :nth-child(). В скобите слагате номера на реда или колоната, за която ще задавате съответния стил. Този селектор е приложим не само за таблици, а и за другите HTML елементи, като параграфа например. Вместо цифри, в скобите могат да бъдат задавани и други стойности – например четен или нечетен параграф, дори и формули:

p:nth-child(odd) {background: red;}
p:nth-child(even) {background: gray;}