Wracamy dzisiaj do tematu sprzed kilku miesięcy – wtedy pojawił się pierwszy wpis, dotyczący tworzenia tabeli na WordPressie za pomocą wtyczki TablePress. Pokazałam w nim, jak ustawić kolory kolumn i wierszy, jak dostosować szerokość kolumn czy obramowanie. Dzisiaj podpowiadam jak użyć dwóch innych funkcji, równie ważnych szczególnie ze względów estetycznych, a mianowicie jak wyśrodkować i wyrównać do środka tekst.

Wyśrodkowanie a wyrównanie tekstu do środka

Zacznijmy od tego, że wyrównanie, a wyśrodkowanie treści do środka to dwie różne rzeczy. Wyśrodkowanie odpowiada za umieszczenie tekstu po środku danego wiersza w poziomie, a wyrównanie to umieszczenie tekstu po środku danego wiesza w pionie. Wiem – czarna magia, ale zaraz wszystko stanie się prostsze 🙂 Poniżej przykład na podstawie excela. W tabelach WordPressa zarówno wyrównanie jak i wyśrodkowanie mają dokładnie takie samo zastosowanie:

wyrównanie i wyśrodkowanie

Ale w excelu nie tylko wyśrodkowujemy czy wyrównujemy tekst do środka. Mamy jeszcze przecież opcje Wyrównaj do lewej, Wyrównaj do prawej oraz Wyrównaj do góry i wyrównaj do dołu. Identyczne polecenie możemy wydać naszej tabeli stworzonej w TablePress.

left – Wyrównanie do lewej
center – Wyśrodkowanie
right – Wyrównanie do prawej

top – Wyrównaj do góry
middle – Wyrównaj do środka
bottom – Wyrównaj do dołu

A oto jak będzie wyglądała część potrzebnego do użycia w TablePress kodu i gdzie będzie znajdował się tekst:

różne warianty ustawienia tekstu w tabeli

Ustawienie pozycji tekstu w TablePress

O tym jak dodawać kody CSS do TablePress i jakie funkcje ta wtyczka posiada, pisałam już wcześniej. Dzisiaj pokażę Ci jak ustawiać tekst. Jeżeli opanowałeś już pierwszy wpis na temat TablePress to wiesz, że za pomocą kodu CSS możesz spersonalizować jedną, wybraną tabelę, albo wszystkie, które już dodałeś, i które dodasz w przyszłości.

Jeżeli chcesz ustawić w konkretny sposób tekst w konkretnej tabeli, będziesz potrzebował jej numeru ID. ID tabeli tworzy się samoistnie, zaraz po jej stworzeniu. Dodatkowo niezbędny będzie jeden z kodów, które podałam powyżej. W efekcie na karcie Opcje Wtyczki w TablePress powinieneś dodać taki kod CSS:

Opcje: podstaw lub wybierz dane w miejscach zaznaczonych na pomarańczowo

.tablepress-id-numer id Twojej tabeli tbody td {
text-align: left; lub center; lub right;
vertical-align: top; lub middle; lub bottom;
}

Przykład: jak powinien wyglądać poprawny kod. (Tekst zaznaczony na pomarańczowo zmień wg potrzeb)

.tablepress-id-26 tbody td {
text-align: left;
vertical-align: middle;
}

Powyższy kod odpowiada za Wyrównanie tekstu do lewej (w poziomie) i wyrównanie tekstu do środka (w pionie). Jest to według mnie najbardziej estetyczny i czytelny sposób prezentowania danych w tabeli, ponieważ tekst nie zlewa się ze sobą, przez co łatwiej go odczytać. Kod, który umieściłam powyżej zmieni położenie tekstu w konkretnej tabeli, ponieważ został dla niego wskazany numer ID wybranej tabeli. Możesz jednak ustawić położenie tekstu dla wszystkich tabel, które będziesz tworzyć poprzez dodanie poniższego kodu:

.tablepress tbody td {
text-align: left;
vertical-align: middle;
}

Jeżeli tworząc tabelę, zaznaczyłeś te dwie opcje: „Pierwszy wiersz tabeli jest wierszem nagłówkowym.” oraz „Ostatni wiersz tabeli jest wierszem-stopką.” kod będzie nieco inny:

.tablepress thead th,
.tablepress tbody td
.tablepress tfoot th {
text-align: left;
vertical-align: middle;
}

.tablepress thead th – odpowiada za nagłówek
.tablepress tfoot th – odpowiada za stopkę
.tablepress tbody td – odpowiada za wiersze pomiędzy stopką, a nagłówkiem. Jeżeli jednak opcje „Pierwszy wiersz tabeli jest wierszem nagłówkowym.” oraz „Ostatni wiersz tabeli jest wierszem-stopką.” nie zostały zaznaczone .tablepress tbody td odpowiada za wszystkie wiersze i kolumny wliczając w to zarówno nagłówek jak i stopkę.

Line-height – jak dodać interlinię?

interliniaPolecenie line-height odpowiada za wstawienie interlinii. Jest to odległość tekstu w wierszu. Interlinię możesz kojarzyć między innymi z Worda. Dzięki niej, możesz ustawić odległość wierszy w taki sposób, aby nie zlewały się ze sobą i były czytelne dla odbiorcy.

Dla konkretnej tabeli kod CSS to:

.tablepress-id-26 tbody td {
.tablepress-id-26 tfoot th
.tablepress-id-26 tfoot th
line-height: 17px;
}

Dla wszystkich tabel kod CSS to:

.tablepress thead th,
.tablepress tbody td
.tablepress tfoot th {
line-height: 17px;
}

Jak połączyć różne kody CSS w TablePress?

Zacznijmy od tego, że najpierw musimy wiedzieć, co dokładnie chcemy zmienić. Czy ma to być wielkość i rodzaj czcionki, czy ma to być umiejscowienie tekstu w tabeli, czy zwiększenie odstępu między wierszami, czy kolor itp.  Następnie konieczne będzie określenie czy zmiany mają być zastosowane do nagłówka i stopki, czy do całej tabeli. Dodatkowo czy zmiany chcesz wprowadzić do jednej tabeli czy do wszystkich. Mając te informacje możemy np stworzyć taki kod CSS, a następnie dodać go Opcjach wtyczki TablePress. Przykładowy zmieniający wszystkie, albo jedną tabelę kod, może wyglądać w taki sposób:

Dla konkretnej tabeli:

.tablepress-id-27 tbody {
font-family: Arial;
font-size: 13px;
color: #000000;
text-align: left;
vertical-align: middle;
line-height: 25px;
}

 

Dla wszystkich tabel:

.tablepress tbody {
font-family: Arial;
font-size: 13px;
color: #000000;
text-align: left;
vertical-align: middle;
line-height: 25px;
}

Może zdarzyć się też tak, że będziesz chciał wprowadzić zmiany w konkretnej kolumnie, czy konkretnym wierszu tylko jednej, wybranej tabeli. Wówczas wystarczy delikatnie zmodyfikować kod, który już znasz, bo wokół niego obraca się cały ten wpis:

Zmiana dla całego wiersza 5-go w tabeli o numerze ID 27:

.tablepress-id-27 .row-5 td {
font-family: Arial;
font-size: 13px;
color: #000000;
text-align: left;
vertical-align: middle;
line-height: 25px;
}

Zmiana dla całej kolumny 4-ej w tabeli o numerze ID 27:

.tablepress-id-27 .column-4 {
font-family: Arial;
font-size: 13px;
color: #000000;
text-align: left;
vertical-align: middle;
line-height: 25px;
}

Zmiana wyłącznie dla jednego pola w tabeli, w wierszu 3-im, w kolumnie 4-ej:

.tablepress-id-27 .row-3 .column-4 {
font-family: Arial;
font-size: 13px;
color: #000000;
text-align: left;
vertical-align: middle;
line-height: 25px;
}

Mam nadzieję, że ten wpis Ci pomoże. Masz pytania pisz śmiało. Jest coś co jeszcze potrzebujesz wiedzieć o TablePress, również daj znam znać – opiszemy, pokażemy, pomożemy 😉

by Paulina Kanak

właścicielka domen Canaq.net | Canaq.pl

© Copyright 2014 | Wszelkie prawa zastrzeżone
cq.canaq@gmail.com