Pomoc:Tabele

Budowa tabeli[edytuj]

Wprowadzenie[edytuj]

Tabela to sposób organizacji danych w formie dwuwymiarowej. Wyróżnia się kolumny (w poligrafii rubryki pionowe), wiersze (w poligrafii rubryki poziome) i komórki (pola rubrykowe lub rubryki). Pierwszy wiersz (lub przy hierarchii kilka wierszy) może mieć charakter nagłówka – a więc definiować, opisywać zawartość danej rubryki pionowej. Z boku tabeli (zazwyczaj po lewej stronie) można znaleźć boczek pełniący tę samą funkcję dla rubryk poziomych. Spotyka się również tzw. drabinkę – numerację poszczególnych rubryk ułatwiającą orientację w długich tabelach.

Składnia tabel[edytuj]

Zasadniczo na wiki działa zwykła składnia html-owska, jednak w praktyce nie jest ona często wykorzystywana. Kod jest mało czytelny i dość długi. Z reguły redaktorzy korzystają ze składni wiki, który występuje w dwóch odmianach/stylach. Style te mogą być mieszane w obrębie jednej tabeli. W niniejszym dokumencie stosowany jest dłuższy styl, gdzie każde pole tabeli jest zapisywane w osobnym wierszu kodu.
Składnia html

<table style="margin-left: auto; margin-right: auto; border-collapse:collapse;">
     <tr>
          <td style="border:1px solid black">LG</td>
          <td style="border:1px solid black">ŚG</td>
          <td style="border:1px solid black">PG</td>
     </tr>
     <tr>
          <td style="border:1px solid black">LŚ</td>
          <td style="border:1px solid black">ŚŚ</td>
          <td style="border:1px solid black">PŚ</td>
     </tr>
     <tr>
          <td style="border:1px solid black">LD</td>
          <td style="border:1px solid black">ŚD</td>
          <td style="border:1px solid black">PD</td>
     </tr>
</table>

Składnia wiki – każda komórka w osobnym wierszu kodu

{| style="margin-left: auto; margin-right: auto; border-collapse:collapse;"
  | style="border:1px solid black"|LG
  | style="border:1px solid black"|ŚG
  | style="border:1px solid black"|PG
 |-
  | style="border:1px solid black"|LŚ
  | style="border:1px solid black"|ŚŚ
  | style="border:1px solid black"|PŚ
 |-
  | style="border:1px solid black"|LD
  | style="border:1px solid black"|ŚD
  | style="border:1px solid black"|PD
|}

Składnia wiki – cała rubryka pozioma tabeli w jednym wierszu kodu

{|style="margin-left: auto; margin-right: auto; border-collapse:collapse;"
 |-
  | style="border:1px solid black"|LG|| style="border:1px solid black"|ŚG|| style="border:1px solid black"|PG
 |-
  | style="border:1px solid black"|LŚ|| style="border:1px solid black"|ŚŚ|| style="border:1px solid black"|PŚ
 |-
  | style="border:1px solid black"|LD|| style="border:1px solid black"|ŚD|| style="border:1px solid black"|PD
|}

Efekt

LG	ŚG	PG
LŚ	ŚŚ	PŚ
LD	ŚD	PD

Składnia wiki w wariancie „cała rubryka pozioma w jednym wierszu” jest wygodna szczególnie gdy całe formatowanie jest określone na poziomie tabeli lub wiersza.

Kod

Efekt

{|style="margin-left: auto; margin-right: auto; border-collapse:collapse;"
 |-style="background:lightgray;"
  |LG||ŚG||PG
 |-
  |LŚ||ŚŚ||PŚ
 |-style="background:lightgray;"
  |LD||ŚD||PD
|}

LG	ŚG	PG
LŚ	ŚŚ	PŚ
LD	ŚD	PD

Składnia wiki[edytuj]

Składnia tabeli to:

{| — początek tabeli (konieczny)
|+ — tworzy nagłówek tabeli (opcjonalny) - bez możliwości ingerencji niepraktyczny na WŹ
|- — opcjonalny przed pierwszym wierszem
! — tworzy nagłówkowe komórki (opcjonalny) - bez możliwości ingerencji niepraktyczny na WŹ
|tekst lub ||tekst lub |format|tekst — wnętrze komórki
|} — koniec tabeli (konieczny)

te znaczniki muszą być w osobnych wierszach (z wyjątkiem podwójnych || i !!, które pozwalają na umieszczanie kolejnych komórek w jednym wierszu.
spacje na początku wiersza są ignorowanie
by uniknąć „zapadania” się komórek, w ewentualne puste rubryki należy wstawiać np.  
zawartość (po znaczniku) może się zaczynać zaraz po znaczniku lub w następnym wierszu,^[1]

O ile format tabel w innych projektach wiki rządzi się pewnymi regułami – np. spójność artykułów, możliwość sortowania kolumny itp., o tyle nadrzędną zasadą Wikiźródeł jest zgodność z oryginałem. Reguły rządzące składem tabel były kiedyś zupełnie inne niż nasze wyobrażenie o tabelach. Niektóre reguły zawodu zecera łatwo jest zaimplementować (np. składanie tym samym krojem pisma tabel, co reszta działa, składanie zazwyczaj na całą szerokość kolumny, przy wąskich tabelach raczej po lewej lub prawej stronie kolumny a nie na środku). Część wymaga po prostu więcej pracy: na przykład wiersze tabeli często nie były oddzielane liniami, dół tabeli nie był zamknięty linią. Inne są bardziej problematyczne: zachowania szerokości kolumn^[2] Wreszcie reguły dotyczące nieprzecinania linii pionowych przez poziome (w drukowanej książce tradycyjnie linie poziome prawie dochodziły do pionowych jednak ich nie przecinały) są niemożliwe do uzyskania.

Technika druku nie pozwalała też na szare krawędzie tabel czy kolorowe tło. Dlatego klasy tabel przygotowane do wikiprojektów są użyteczne zazwyczaj jedynie na stronach pomocy itp.

Sposoby formatowania[edytuj]

Tabelę, formalnie rzecz biorąc, można utworzyć bez jakiegokolwiek formatu.

Kod

Efekt

{|
  |LG
  |ŚG
  |PG
 |-
  |LŚ
  |ŚŚ
  |PŚ
 |-
  |LD
  |ŚD
  |PD
|}

LG	ŚG	PG
LŚ	ŚŚ	PŚ
LD	ŚD	PD

Jest to jednak często niewystarczające. Zazwyczaj chcemy określić w tabeli na przykład jej położenie na stronie, szerokość kolumn, obramowanie komórek itp. Istnieją dwa sposoby formatowania tabeli: przy pomocy atrybutów HTML i stylów CSS.
W obu wypadkach konieczne jest stosowanie cudzysłowów zawsze wtedy, gdy w wartości występuje spacja. Ujęcie wartości w cudzysłów, gdy ta nie zawiera spacji nie jest błędem.

Atrybuty HTML[edytuj]

Cała tabel lub jej część może zostać sformatowana przez tzw. atrybuty HTML. Format ich jest atrybut1=wartość1 atrybut2=wartość .... Wiele takich atrybutów jest przestarzała i dubluje funkcjonalność stylów css.
Przykłady atrybutów nieprzestarzałych i często stosowanych:

rowspan, colspan
class
style (formalnie rzecz biorąc jest to atrybut HTML wprowadzający style css)
scope – nie omawiany tutaj, zalecany przy tworzeniu tabel, nie ma wpływu na wygląd tabeli^[3]

Style CSS[edytuj]

Części tabeli mogą być formatowane w dużej części przy pomocy tych samych stylów, co części tekstu (<div> i <span>). A więc podobnego kodu, jaki stosujemy w szablonach {{f}} i {{f*}}. Część stylów jednak jest specyficzna dla tabel.

Zasady zapisu kodu:

zbór reguł stylu jest wprowadzany przez atrybut HTML: style="reguły stylu"
każda reguła stylu składa się z własności (property) i wartości (value)
własność jest oddzielona od wartości dwukropkiem
kolejne reguły stylu są oddzielane średnikiem
zbiór reguł stylu jest ujęty w cudzysłów (ściśle rzecz biorąc jest on niezbędny, gdy występują spacje)

style="background: ligtyellow; color: royalblue;"

Zasady formatowania reguł stylu

niedozwolone są podziały wiersza wewnątrz reguły stylu
przed dwukropkiem nie może być spacji
części złożonych wartości np. 2px solid black muszą być od siebie oddzielane spacjami
jeśli obok siebie występuje atrybut HTML i wyrażenie CSS konieczne jest oddzielenie ich od siebie przy pomocy spacji

Fakultatywnie dla poprawy czytelności kodu można stawiać:

spacje po dwukropku i średniku
spacje między symbolem tabeli ({|), wiersza (|-), komórki (|) a słowem style
spacje wokół znaków równości
spacje wokół cudzysłowów
na końcu reguły średnik

Części tabeli[edytuj]

Każdy zna zapewne określenia dotyczące tabel takie jak wiersz czy kolumna. Mniej istotne są terminy takie, jak główka i boczek. Specjalną formą tabeli jest zestawienie – to tabela bez główki a jedynie z boczkiem.

Dalej skupię się na elementach istotnych ze względu na składnię tabel w oprogramowaniu wiki.

Dłuższy tekst w komórce tabeli. Jest łamany na wiersze tak, by wypełniał komórkę. Komórka tabeli ma wielkość wynikającą z zawartości komórki, wysokości, szerokości komórek w danym wierszu i kolumnie ale także określaną formatowaniem.

	— table margin
	— obramowanie tabeli (table border)
	— obramowanie tabeli (table border)
	— table padding
	— cell spacing
	— obramowanie komórki (cell border)
	— obramowanie komórki (cell border)
	— cell padding
	— zawartość komórki

Formatowanie całej tabeli[edytuj]

Położenie tabeli na stronie[edytuj]

Pozycja tabeli na stronie może być w pewnych wypadkach definiowana jako własność tabeli, w innych korzystamy z definicji całego bloku. Przypadki te są omówione w rozdziale #Położenie tabeli.

Szerokość tabeli[edytuj]

Atrybut width=... jest przestarzały w HTML i nie powinien być używany. Należy w takim wypadku użyć stylu style="width:...". Rzadko jednak sztywne zadanie szerokości tabeli jest celowe; nawet gdy na ekranie czy wydruku brak miejsca tabela nie dostosuje bowiem swojej szerokości. Z reguły znacznie lepiej jest użyć style="max-width:...". Maksymalna szerokość tabeli powinna być określona w jednostkach względnych. Najczęściej stosowana jest tutaj jednostka em – tj. szerokość litery m w danym kroju, danej wielkości pisma. Ponieważ styl dotyczy całej tabeli podawany jest w pierwszej linii kodu np.:

{| style="max-width:15em".

Wysokość tabeli[edytuj]

Wysokość tabeli jest określana przy pomocy style="height:...". Znowu wskazane jest tutaj z reguły użycie względnych jednostek (em).
I tak wysokość tabeli może być przykładowo określona w ten sposób (w pierwszej linii tabeli ponieważ styl dotyczy całej tabeli):

{| style="height:15em".

Części całej tabeli[edytuj]

W tej części będą omówione marginesy, obramowanie tabeli i table padding. Zasady podawania wartości mają jednak również zastosowanie w przypadku stylów dotyczących komórek tabeli.

Marginesy[edytuj]

Marginesy to przestrzeń otaczająca tabelę i oddzielająca ją od pozostałych elementów na stronie (głównie otaczającego tekstu). Marginesy mogą być podane osobno dla każdej z czterech stron tabeli, mogą mieć też wartość negatywną, co spowoduje częściowe nachodzenie się tabeli i otaczających elementów. Składnia określająca marginesy ma następującą formę: {| style="margin: 1em 1em 3em 0em;"
Jak w przypadku innych właściwości określanych po czterech stronach danego elementu kolejność podawania wartości jest góra, prawy, dół, lewy. Na tarczy zegara północ, trzecia, szósta, dziewiąta : .

Możliwe są również różne warianty zapisu:

cztery wartości dla każdego kierunku	{\| style="margin: ↑ → ↓ ← ;"
dwie wartości (razem góra-dół i lewa-prawa)	{\| style="margin: ⬍ ⟷ ;"
jedna wartość dla wszystkich kierunków	{\| style="margin: ✢ ;"
osobne własności dla każdego kierunku	margin-top: 2em; margin-right: 3em; margin-bottom .1em;margin-left: .5em

Jednostki względne em (szerokość litery m używanej w danym kroju pisma) ewentualnie ex są z reguły lepsze niż bezwzględne px, cm, ...

Ramka[edytuj]

Obramowanie tabeli jest określane następująco:

{| style="border:1px solid black;"

LG	PG
LD	PD

Możliwe jest określenie różnych części ramki indywidualnie:

{| style="border-top:1px solid black; border-right:2px solid black; border-bottom:1px dashed red; border-left:1px dotted black;"

LG	PG
LD	PD

Możliwe jest też użycie wartości none co oznacza brak ramki.
Możliwe jest też określenie osobno różnych składowych wartości dla właściwości ramki:

{| style="border-width: 1px; border-style: solid; border-color: black;"

LG	PG
LD	PD

Table padding[edytuj]

Własność table padding bywa używana dla poprawy wyglądu tabeli, przy pomocy własności padding można dodać dodatkowe wolne miejsce między komórkami a ramką tabeli. Niektóre przeglądarki internetowe pomijają tę własność. Określenie jej nie działa również w przypadku gdy styl border-collapse nie ma własności collapse ({|style="border-collapse:collapse"^[4]. Deklaracja wygląda następująco:

{| style="padding:0.5em 1em 0.25em 0.75em"

Zasady określania poszczególnych stron table padding są identyczne jak opisano w przypadku marginesów. Możliwe jest również indywidualne określenie przy pomocy padding-top, padding-right, padding-bottom, padding-left.

Kolumny, wiersze i komórki[edytuj]

W tej części zostanie omówione formatowanie komórek a więc cell spacing, obramownie komórki , cell padding i zawartość komórki.

Zakres formatowania[edytuj]

Zasadniczo format dotyczy komórek, jednak może dotyczyć wszystkich komórek tabeli lub wiersza tabeli.
Jako przykład ułatwiający wizualne uchwycenie zostanie użyte formatowanie tekstu, dokładniej określenie wysokości pisma (200% wartości zwykłej). Składnia wygląda następująco:

style="font-size: 200%;"

Istotna jest na tym etapie zależność miejsca wpisania formatu i zakresu jego obowiązywania.

Formatowanie na poziomie tekstu

Formatowanie pojedynczej komórki

Formatowanie wszystkich komórek danego wiersza

Formatowanie wszystkich komórek tabeli

Kod

{|
  |LG
  |ŚG
  |PG
 |-
  |LŚ
  |Ś{{f*|w=200%|Ś}}
  |PŚ
 |-
  |LD
  |ŚD
  |PD
|}

{|
|LG
|ŚG
|PG
|-
|LŚ
|style="font-size: 200%;"|ŚŚ
|PŚ
|-
|LD
|ŚD
|PD
|}

{|
  |LG
  |ŚG
  |PG
 |-style="font-size: 200%;"
  |LŚ
  |ŚŚ
  |PŚ
 |-
  |LD
  |ŚD
  |PD
|}

{|style="font-size: 200%;"
  |LG
  |ŚG
  |PG
 |-
  |LŚ
  |ŚŚ
  |PŚ
 |-
  |LD
  |ŚD
  |PD
|}

Efekt

LG	ŚG	PG
LŚ	ŚŚ	PŚ
LD	ŚD	PD

LG	ŚG	PG
LŚ	ŚŚ	PŚ
LD	ŚD	PD

LG	ŚG	PG
LŚ	ŚŚ	PŚ
LD	ŚD	PD

LG	ŚG	PG
LŚ	ŚŚ	PŚ
LD	ŚD	PD

Cellspacing[edytuj]

Cell spacing (własność border-spacing) określa przestrzeń między zawartością poszczególnych komórek oraz wokół wszystkich komórek. Można określić osobno wartości dla odstępu komórek w pionie i poziomie.
Atrybut cellspacing jest przestarzały.
Mimo że dotyczy komórek, może być ustawiony jedynie globalnie, dla całej tabeli (por. #Zakres formatowania).
Bardzo istotna jest też własność border-collapse. Może ona przyjąć wartości separate i collapse.
Wartość separated jest domyślna. W przypadku ustawienia własności style="border-collapse:collapse" określenie style="border-spacing:WARTOŚĆ" jest ignorowane.

style="border-spacing:.3em" – odstęp 0,3 em
style="border-spacing:.3em .5em" – odstęp 0,3 em w pionie i 0,5 em w poziomie
style="border-collapse:collapse" – brak odstępu między komórkami, krawędzie sąsiadujących komórek zlewają się ze sobą (patrz następny podrozdział)
style="border-collapse:collapse;border-spacing:.3em" – brak odstępu między komórkami, krawędzie sąsiadujących komórek zlewają się ze sobą

Własność Cellspacing (oraz border-collapse) mogą być tylko określone dla całej tabeli.

Obramowanie komórki[edytuj]

Obramownie komórki ma bardzo istotne znaczenie na Wikiźródłach. Tabele w drukowanych książkach znacznie odbiegały od prostych tabelek z arkuszów kalkulacyjnych czy prezentacji rzutnikowach.
Grubość linii bywa różna, część komórek nie jest oddzielana od siebie liniami, tabele bywają otwarte od dołu itp.
By odwzorować te niuanse typograficzne, istotne jest z reguły formatowanie osobno każdej z komórek.
Jeśli własność style="border-collapse:collapse" jest ustawiona jest to o tyle prostsze, że podwójne określenie krawędzi sąsiadujących komórek nie spowoduje pogrubienia krawędzi.^[5] Zasady formatowania ramek są identyczne, jak dla tabeli (#Ramka).

style="border-top:5px solid black"	style="border-right:3px solid green"	style="border-bottom:2px solid maroon"	style="border-left:3px solid tomato"	style="border-top:2px solid red; border-right:3px dotted black"
bez ramki	bez ramki	bez ramki	bez ramki	bez ramki
style="5px dashed dimgray"	bez ramki	style="border:2px solid gray"	bez ramki	style="border:2px solid black; border-right:none"

W prawej dolnej komórce drugi ze zdefiniowanych stylów (border-right:none) wykasował styl nadany wcześniej (ramka 2px naokoło komórki).

Do naszych celów (na Wikiźródłach), wartości dashed (ramka z przerywanych linii), dotted (ramka z kropkowanych linii), groove (efekt 3D), ridge (efekt 3D), inset (efekt 3D), outset (efekt 3D), , double (podwójna ramka) są zbędne. Przydatne wartości to jedynie solid (pełna linia) i none (brak ramki).

Podobnie w tradycyjnej technice druku używano jedynie czarnej farby drukarskiej stąd kolor black jest właściwym wyborem.
Grubość ramki jest określana pierwszym parametrem, zazwyczaj jest podawana w pikselach (px).

Cellpadding[edytuj]

Cell padding określa przestrzeń wokół zawartości komórki (najczęściej tekstu) i oddzielający od krawędzi (jeśli jest widoczna).
Określany jest w sposób analogiczny do marginesu tabeli (#Marginesy):

cztery wartości dla każdego kierunku	\| style="padding: ↑ → ↓ ← ;" \| style="padding: .2em 0.3em 0.4em 0.5em ;"
dwie wartości (razem góra-dół i lewa-prawa)	\| style="padding: ↕ ⟷ ;" \| style="padding: .2em .3em ;"
jedna wartość dla wszystkich kierunków	\| style="padding: ✢ ;" \| style="padding: .4em ;"

Formatowanie zawartości komórki[edytuj]

Szerokość komórki[edytuj]

Ponieważ w danej kolumnie wszystkie komórki mają tę samą szerokość (jeśli komórki nie są połączone), to wystarczy podanie szerokości w jednej z nich. Kod i uwagi można zobaczyć w rozdziale dotyczącym określania szerokości całej tabeli (#Szerokość tabeli). W przypadku określania szerokości kolumn bardzo wygodne jest również podawanie jej w %. Zdefiniowanie szerokości całej tabeli w procentach odnosi się przy tym do szerokości strony. Gdy definiujemy szerokość na poziomie rubryk pionowych tabeli (tj. kolumn), dotyczy to szerokości całej tabeli.^[6]

Z określeniem maksymalnej szerokości

Bez określenia maksymalnej szerokości

Kod

{|
  |style="max-width:8em"| '''Stan'''
  |style="max-width:8em"| '''Powierzchnia w km²'''
  |style="max-width:8em"| '''Stolica'''
 |-
  |style="max-width:8em"| '''Australia Południowa'''
  |    983 482
  |Adelaide
 |-
  |style="max-width:8em"| '''Australia Zachodnia'''
  |  2 529 875
  |Perth
 |-
  |style="max-width:8em"| '''Nowa Południowa Walia'''
  |    800 642
  |Sydney
 |-
  |style="max-width:8em"| '''Queensland'''
  |  1 730 648
  |Brisbane
|}

{|
  |'''Stan'''
  |'''Powierzchnia w km²'''
  |'''Stolica'''
 |-
  |'''Australia Południowa'''
  |    983 482
  |Adelaide
 |-
  |'''Australia Zachodnia'''
  |  2 529 875
  |Perth
 |-
  |'''Nowa Południowa Walia'''
  |    800 642
  |Sydney
 |-
  |'''Queensland'''
  |  1 730 648
  |Brisbane
|}

Efekt

Stan	Powierzchnia w km²	Stolica
Australia Południowa	983 482	Adelaide
Australia Zachodnia	2 529 875	Perth
Nowa Południowa Walia	800 642	Sydney
Queensland	1 730 648	Brisbane

Stan	Powierzchnia w km²	Stolica
Australia Południowa	983 482	Adelaide
Australia Zachodnia	2 529 875	Perth
Nowa Południowa Walia	800 642	Sydney
Queensland	1 730 648	Brisbane

Wysokość komórki[edytuj]

Ponieważ w danym wierszu wszystkie komórki mają tę samą wysokość (jeśli komórki nie są połączone), to wystarczy podanie wysokości w jednej z nich. Kod i uwagi można zobaczyć w rozdziale dotyczącym określania wysokości całej tabeli (#Wysokość tabeli).

Kod

Efekt

{|
  |'''Miasto'''
  |'''Powierzchnia'''
 |-
  |'''Adelaide'''
  |   3 260 km²
 |-
  |'''Perth'''
  |   6 418 km²
 |-
  |style=height:6em|'''Sydney'''
  |  12 367 km²
 |-
  |'''Brisbane'''
  |  15 842 km²
|}

Miasto	Powierzchnia
Adelaide	3 260 km²
Perth	6 418 km²
Sydney	12 367 km²
Brisbane	15 842 km²

Poziome wyrównanie zawartości komórek[edytuj]

Wyrównanie tekstu w lewo, wyśrodkowanie i wyrównanie do prawej jest określane przy pomocy stylu css text-align:WARTOŚĆ. Możliwe jest określenie tych własności na poziomie całej tabeli, wiersza lub komórki.

style="text-align:left" – do lewej krawędzi komórki
style="text-align:center" – do środka komórki
style="text-align:right" – do prawej krawędzi komórki
style="text-align:justify" – wyjustowanie (ma sens tylko przy długim tekście)

Przykład wspólny z wyrównaniem w pionie zawartości komórek.

Pionowe wyrównanie zawartości komórek[edytuj]

Wyrównanie zawartości komórki w pionie jest określane przy pomocy stylu vertical-align:WARTOŚĆ (atrybut valign=... jest przestarzały).

Niestety nie można określić wyrównania dla całego wiersza, konieczne jest określenie dla każdej komórki osobno.

Możliwe wartości to:

style="vertical-align:top" – do górnej krawędzi komórki
style="vertical-align:center" – do środka komórki
style="vertical-align:bottom" – do dolnej krawędzi komórki

Kod

Efekt

{|
  |style="text-align:left;vertical-align:top"|Lewa górna krawędź
  |style="text-align:center;vertical-align:top"|Ṡrodkowa górna krawędź
  |style="text-align:right;vertical-align:top"|Prawa górna krawędź
 |-
  |style="text-align:left;vertical-align:center"|Lewy<br>środek
  |style="text-align:center;vertical-align:center"|Ṡrodkowy<br>środek
  |style="text-align:right;vertical-align:center"|Prawy<br>środek
 |-
  |style="text-align:left;vertical-align:bottom"|Lewy<br>dół
  |style="text-align:center;vertical-align:bottom"|Ṡrodkowy<br>dół
  |style="text-align:right;vertical-align:bottom"|Prawy<br>dół
|}

Lewa górna krawędź	Ṡrodkowa górna krawędź	Prawa górna krawędź
Lewy środek	Ṡrodkowy środek	Prawy środek
Lewy dół	Ṡrodkowy dół	Prawy dół

Nowrap[edytuj]

Algorytm wyświetlania tabeli zazwyczaj ustawia szerokość nieoptymalnie, a przynajmniej inaczej, niż byśmy sobie życzyli. Rubryki zawierające krótki, kilkuwyrazowy tekst są na przykład zwężane tak, że tekst się zawija, co może wyglądać niewłaściwie wstawienie w kodzie komórki (wystarczy jeden najdłuższy w kolumnie) kodu style="white-space: nowrap" uniemożliwia łamanie tekstu w danej kolumnie.

Kod

Efekt

bez nowrap

{|
  |Stan
  |Data ustanowienia kolonii
  |Wyjaśnienie
 |-
  |Australia Południowa
  |19. lutego 1863
  |Historia [...] eukaliptusów.
 |-
  |Australia Zachodnia 
  |2. maja 1829
  |Historia [...] eukaliptusów.
 |-
  |Nowa Południowa Walia
  |26. stycznia 1788
  |Historia [...] eukaliptusów.
 |-
  |Queensland
  |6. czerwca 1859
  |Historia [...] eukaliptusów.
|}

Stan	Data ustanowienia kolonii	Wyjaśnienie
Australia Południowa	19. lutego 1863	Historia tego stanu jest bardzo zagmatwana. Gdy na te tereny dotarli pierwsi koloniści zastali rdzennych mieszkańców Australii. Po bezkresnych terenach wesoło skakały kangury, biegały strusie. Na niektórych obszarach Australii można było spotkać niedźwiadki koala jedzące liście eukaliptusów.
Australia Zachodnia	2. maja 1829	Historia tego stanu jest bardzo zagmatwana. Gdy na te tereny dotarli pierwsi koloniści zastali rdzennych mieszkańców Australii. Po bezkresnych terenach wesoło skakały kangury, biegały strusie. Na niektórych obszarach Australii można było spotkać niedźwiadki koala jedzące liście eukaliptusów.
Nowa Południowa Walia	26. stycznia 1788	Historia tego stanu jest bardzo zagmatwana. Gdy na te tereny dotarli pierwsi koloniści zastali rdzennych mieszkańców Australii. Po bezkresnych terenach wesoło skakały kangury, biegały strusie. Na niektórych obszarach Australii można było spotkać niedźwiadki koala jedzące liście eukaliptusów.
Queensland	6. czerwca 1859	Historia tego stanu jest bardzo zagmatwana. Gdy na te tereny dotarli pierwsi koloniści zastali rdzennych mieszkańców Australii. Po bezkresnych terenach wesoło skakały kangury, biegały strusie. Na niektórych obszarach Australii można było spotkać niedźwiadki koala jedzące liście eukaliptusów.

nowrap

{|
  |Stan
  |style="white-space: nowrap"|Data ustanowienia kolonii
  |Wyjaśnienie
 |-
  |Australia Południowa
  |19. lutego 1863
  |Historia [...] eukaliptusów.
 |-
  |Australia Zachodnia 
  |2. maja 1829
  |Historia [...] eukaliptusów.
 |-
  |style="white-space: nowrap"|Nowa Południowa Walia
  |26. stycznia 1788
  |Historia [...] eukaliptusów.
 |-
  |Queensland
  |6. czerwca 1859
  |Historia [...] eukaliptusów.
|}

Stan	Data ustanowienia kolonii	Wyjaśnienie
Australia Południowa	19. lutego 1863	Historia tego stanu jest bardzo zagmatwana. Gdy na te tereny dotarli pierwsi koloniści zastali rdzennych mieszkańców Australii. Po bezkresnych terenach wesoło skakały kangury, biegały strusie. Na niektórych obszarach Australii można było spotkać niedźwiadki koala jedzące liście eukaliptusów.
Australia Zachodnia	2. maja 1829	Historia tego stanu jest bardzo zagmatwana. Gdy na te tereny dotarli pierwsi koloniści zastali rdzennych mieszkańców Australii. Po bezkresnych terenach wesoło skakały kangury, biegały strusie. Na niektórych obszarach Australii można było spotkać niedźwiadki koala jedzące liście eukaliptusów.
Nowa Południowa Walia	26. stycznia 1788	Historia tego stanu jest bardzo zagmatwana. Gdy na te tereny dotarli pierwsi koloniści zastali rdzennych mieszkańców Australii. Po bezkresnych terenach wesoło skakały kangury, biegały strusie. Na niektórych obszarach Australii można było spotkać niedźwiadki koala jedzące liście eukaliptusów.
Queensland	6. czerwca 1859	Historia tego stanu jest bardzo zagmatwana. Gdy na te tereny dotarli pierwsi koloniści zastali rdzennych mieszkańców Australii. Po bezkresnych terenach wesoło skakały kangury, biegały strusie. Na niektórych obszarach Australii można było spotkać niedźwiadki koala jedzące liście eukaliptusów.

Kolor tła[edytuj]

W drukowanych kiedyś tabelach nie stosowano w ogóle wypełnienia komórek. W nowszych tekstach, składanych komputerowo, drukowanych metodą offsetową wypełnienie tła się zdarza. Co do oznaczeń kolorów, można je znaleźć bez problemu w internecie (html named colors, css named colors).

Kod

Efekt

{|style="border-collapse:collapse"
  |style="background:lightgray"|'''Region'''
  |style="background:lightgray"|  '''Powierzchnia'''  
 |-
  |Marlborough
  |     12 484 km²
 |-
  |style="background:lightgray"|Nelson
  |style="background:lightgray"|        445 km²
 |-
  |Tasman
  |      9 771 km²
 |-
  |style="background:lightgray"|Canterbury
  |style="background:lightgray"|     45 346 km²
 |-
  |West Coast
  |     23 336 km²
 |-
  |style="background:lightgray"|Otago
  |style="background:lightgray"|     31 990 km²
 |-
  |Southland
  |     34 347 km²
|}

Region	Powierzchnia
Marlborough	12 484 km²
Nelson	445 km²
Tasman	9 771 km²
Canterbury	45 346 km²
West Coast	23 336 km²
Otago	31 990 km²
Southland	34 347 km²

W powyższym przykładzie zapewne dużo wygodniej by było formatować całe wiersze (por. #Zakres formatowania):
|-style="background:lightgray". Można by było wtedy również pominąć style="border-collapse:collapse" (wymusza brak odstępu między komórkami tabeli) w pierwszej linii kodu tabeli (por. #Cellspacing).

Kolor tekstu[edytuj]

Jest to raczej mało użyteczny format na polskich Wikiźródłach. Książki, które opracowujemy były zazwyczaj drukowane czarną farbą drukarską, co nie wymaga specjalnego formatu. Ponieważ jednak może się to przydać np. przy opracowywaniu jakiejś tabeli na stronie pomocy poniżej zamieszczony jest prosty przykład:

Kod

Efekt

{|
  |style="color:black"|czarny (black)
  |style="color:darkblue"|granatowy (darkblue)
  |style="color:midnightblue"|midnightblue
 |-
  |style="color:darkgreen"|ciemnozielony (darkgreen)
  |style="color:darkolivegreen"|ciemnooliwkowy (darkolivegreen)
  |style="color:royalblue"|royalblue
 |-
  |style="color:navy"|navy
  |style="color:darkslateblue"|darkslateblue
  |style="color:blue"|niebieski (blue)
 |-
  |style="color:darkred"|ciemnoczerwony (darkred)
  |style="color:maroon"|kasztanowy (maroon)
  |style="color:brown"|brązowy (brown)
 |-
  |style="color:firebrick"|ceglasty (firebrick)
  |style="color:red"|czerwony (red)
  |style="color:white; background:fuchsia"|biały (white)
|}

czarny (black)	granatowy (darkblue)	midnightblue
ciemnozielony (darkgreen)	ciemnooliwkowy (darkolivegreen)	royalblue
navy	darkslateblue	niebieski (blue)
ciemnoczerwony (darkred)	kasztanowy (maroon)	brązowy (brown)
ceglasty (firebrick)	czerwony (red)	biały (white)

Uwagi:

Polskie nazwy kolorów podane powyżej są jedynie przykładowym tłumaczeniem i nie mają znaczenia.
Nazwy innych kolorów można znaleźć bez problemu w internecie.
Można również określać kolory przy pomocy wartości szesnastkowych np.: kolor „DarkSalmon” to inaczej #E9967A. Odpowiednie definicje są równoważne: |style="color:darksalmon"|... i |style="color:#E9967A"|...
Kolor tekstu może być określony również dla całego wiersza lub całej tabeli (por. #Zakres formatowania).

Wielkość czcionki[edytuj]

Czasami tabela jest składana mniejszymi czcionkami niż tekst główny. Efekt ten można osiągnąć wstawiając na początku tabeli {|style="font-size:80%;". Szczegóły widoczne są w przykładach w sekcji #Zakres formatowania.

Inne aspekty formatowania tekstu[edytuj]

Poniżej podam inne parametry, które można wykorzystać do formatowania tekstu. Wygodne jest to zwłaszcza do określenia zbiorczo dla całej tabeli (por. #Zakres formatowania), mogą być jednak określone również na poziomie wiersza lub komórki:

font-family:... – np. font-family:Courier New – wybór kroju pisma
font-style:italic – (italic lub normal) kursywa dla tekstu w tabeli – zazwyczaj osiągamy ten efekt przez użycie prostych apostrofów (''....'')
font-style:bold – (bold lub normal) wytłuszczenie dla tekstu w tabeli – zazwyczaj osiągamy ten efekt przez użycie prostych apostrofów ('''....''')
line-height:... – np. line-height:2em – interlinia (może być określona jako normal lub podana w em, px, pt, cm, %)^[7] – (zalecany sposób podawania jest wytłuszczony)
letter-spacing:... – np. letter-spacing:.1em – odstęp międzyliterowy, tekst rozstrzelony
word-spacing:... – np. word-spacing:1em – odstęp międzywyrazowy

Scalanie komórek[edytuj]

Scalanie komórek w obrębie kolumny[edytuj]

Komórki można scalić przy pomocy atrybutu rowspan="X", gdzie X oznacza liczbę komórek, które należy scalić. Istotne jest by pamiętać, że cała zbiorcza komórka jest formatowana a jej treść określana w wierszu, w którym się zaczyna. W kolejnych wierszach jest ona całkowicie pomijana.

Kod

Efekt

{|
 |-
  |1 A
  |1 B
  |1 C
 |-
  |2 A
  |rowspan="3" style="background-color:Cornsilk"|2-4 B
  |2 C
 |-
  |3 A
  |3 C
 |-
  |4 A
  |4 C
 |-
  |5 A
  |5 B
  |5 C
|}

1 A	1 B	1 C
2 A	2-4 B	2 C
3 A		3 C
4 A		4 C
5 A	5 B	5 C

Scalanie komórek w obrębie wiersza[edytuj]

Komórki można scalić przy pomocy atrybutu colspan="X", gdzie X oznacza liczbę komórek, które należy scalić. Istotne jest by pamiętać, że cała zbiorcza komórka jest formatowana a jej treść określana raz, następne kolumny są już w kodzie pomijane.

Kod

Efekt

{|
|-
  |1 A
  |1 B
  |1 C
  |1 D
  |1 E
 |-
  |2 A
  |colspan="3" style="background-color:HoneyDew"|2 B-D
  |2 E
 |-
  |3 A
  |3 B
  |3 C
  |3 D
  |3 E
 |-
  |4 A
  |4 B
  |4 C
  |4 D
  |4 E
|}

1 A	1 B	1 C	1 D	1 E
2 A	2 B-D			2 E
3 A	3 B	3 C	3 D	3 E
4 A	4 B	4 C	4 D	4 E

Jednoczesne scalenie komórek w obrębie kilku wierszy i kolumn[edytuj]

Scalenie komórek w kształcie prostokąta jest możliwe przez kombinację atrybutów colspan i rowspan.

Kod

Efekt

{|
 |-
  |1 A
  |1 B
  |1 C
  |1 D
  |1 E
 |-
  |2 A
  |colspan="3" rowspan="2" style="background-color:LavenderBlush"|2-3 B-D
  |2 E
 |-
  |3 A
  |3 E
 |-
  |4 A
  |4 B
  |4 C
  |4 D
  |4 E
|}

1 A	1 B	1 C	1 D	1 E
2 A	2-3 B-D			2 E
3 A	2-3 B-D			3 E
4 A	4 B	4 C	4 D	4 E

Położenie tabeli[edytuj]

opis kod efekt

tabele koło siebie

{{f...| style=display:inline-table}}
tabela
{{...f}}
{{f...| style=display:inline-table}}
tabela 2
{{...f}}

A	B
C	D

E	F
G	H

tabele koło siebie (bezpośrednio)


{{f...| style=display:inline-table}}
tabela
{{...f}}{{f...| style=display:inline-table}}
tabela 2
{{...f}}

A	B
C	D

E	F
G	H

niewyrównane w pionie


{{f...| style=display:inline-table}}
tabela
{{...f}}
{{f...| style=display:inline-table}}
tabela 2
{{...f}}

A	B
C	D

E	F	G
H	I	J
L	M	N
O	P	Q

wyrównane w pionie


{{f...| style=display:inline-table}}
tabela
{{...f}}
{{f...| style=display:inline-table; vertical-align:bottom}}
tabela 2
{{...f}}

A	B
C	D

E	F	G
H	I	J
L	M	N
O	P	Q

wyrównane i margines


{{f...| style=display:inline-table; margin-left:3em}}
tabela
{{...f}}
{{f...| style=display:inline-table; vertical-align:bottom}}
tabela 2
{{...f}}

A	B
C	D

E	F	G
H	I	J
L	M	N
O	P	Q

tabela po lewej

{|style="float:left; margin:0 1em 1em 0"
 |-
  |A
  |B
  |C
 |-
  |D
  |E
  |F
 |-
  |G
  |H
  |I
|}
Jak widać...

A	B	C
D	E	F
G	H	I

Jak widać obiekt (w tym wypadku tabela) znajduje się po lewej stronie akapitu. Tekst jest oddzielony od obiektu (np. grafiki czy tabeli jak w tym wypadku) odstępem zdefiniowanym powyżej style="margin:...". Opływanie jest określane przez styl float. Ponieważ jednak może się zdarzyć, że obiekt (tutaj tabela) jest dłuższy niż akapit, może być konieczne na końcu użycie szablonu {{clear}}.

tabela po prawej

{|style="float:right; margin:0 0 1em 1em"
 |-
  |A
  |B
  |C
 |-
  |D
  |E
  |F
 |-
  |G
  |H
  |I
|}
Podobnie jak ...

A	B	C
D	E	F
G	H	I

Podobnie jak w poprzednim przykładnie i tutaj obiekt (w tym wypadku tabela) jest opływany przez tekst. Znajduje się po prawej stronie akapitu (style="float:right"). Tekst jest oddzielony od obiektu (np. grafiki czy tabeli jak w tym wypadku) odstępem zdefiniowanym powyżej style="margin:...". Również tutaj może być konieczne użycie szablonu {{clear}} na końcu akapitu, by obiekt nie „wchodził” na następny akapit.

tabela na środku

{|style="margin-left: auto; margin-right: auto;"
 |-
  |A
  |B
  |C
 |-
  |D
  |E
  |F
 |-
  |G
  |H
  |I
|}
W przypadku...

A	B	C
D	E	F
G	H	I

W przypadku tabeli wycentrowanej, a więc umieszczonej na środku strony, nie można uzyskać efektu opływania przez tekst.

Uwaga
Używane tutaj szablony {{f...}} i {{...f}} dają efektywnie kod:

{{f...|style=display:inline-table; vertical-align:bottom}} → <div style="display:inline-table; vertical-align:bottom">

{{...f}} → </div>

Różne triki[edytuj]

Wyrównywanie liczb do przecinka[edytuj]

Każda z przedstawionych metod ma różne wady.
1. Rozbicie liczby na dwie kolumny, lewa jest wyrównana do prawej, prawa do lewej. Ważne jest przy tym wstawienie style="border-collapse:collapse" by nie było między kolumnami zbędnego odstępu.

Kod

Efekt

{|style="border-collapse:collapse"
  |A
  |style="padding:0 0 0 2.5em;text-align:right;border-right:none"|987&nbsp;654
  |style="padding:0 2.5em 0 0;text-align:left;border-left:none"|&nbsp;
 |-
  |B
  |style="padding:0 0 0 2.5em;text-align:right;border-right:none"|23&nbsp;456
  |style="padding:0 2.5em 0 0;text-align:left;border-left:none"|&nbsp;
 |-
  |C
  |style="padding:0 0 0 2.5em;text-align:right;border-right:none"|2&nbsp;234
  |style="padding:0 2.5em 0 0;text-align:left;border-left:none"|&nbsp;
 |-
  |E
  |style="padding:0 0 0 2.5em;text-align:right;border-right:none"|11
  |style="padding:0 2.5em 0 0;text-align:left;border-left:none"|&nbsp;
 |-
  |F
  |style="padding:0 0 0 2.5em;text-align:right;border-right:none"|123&nbsp;456
  |style="padding:0 2.5em 0 0;text-align:left;border-left:none"|,789
 |-
  |G
  |style="padding:0 0 0 2.5em;text-align:right;border-right:none"|890
  |style="padding:0 2.5em 0 0;text-align:left;border-left:none"|,21
 |-
  |H
  |style="padding:0 0 0 2.5em;text-align:right;border-right:none"|2&nbsp;123
  |style="padding:0 2.5em 0 0;text-align:left;border-left:none"|,1
 |-
  |I
  |style="padding:0 0 0 2.5em;text-align:right;border-right:none"|456
  |style="padding:0 2.5em 0 0;text-align:left;border-left:none"|,0
 |-
  |J
  |style="padding:0 0 0 2.5em;text-align:right;border-right:none"|21
  |style="padding:0 2.5em 0 0;text-align:left;border-left:none"|,123
 |-
  |K
  |style="padding:0 0 0 2.5em;text-align:right;border-right:none"|0
  |style="padding:0 2.5em 0 0;text-align:left;border-left:none"|,227
|}

A	987 654
B	23 456
C	2 234
E	11
F	123 456	,789
G	890	,21
H	2 123	,1
I	456	,0
J	21	,123
K	0	,227

2. Użycie   tj. odstępu, tak zaprojektowanego, bym miał stałą szerokość równą szerokości cyfry w danym kroju pisma (pisma są z reguły tak projektowane, by cyfry miały stałą szerokość); przydatny może być również   – wąski odstęp np. do oddzielania cyfr po trzy w liczbach wielocyfrowych, &minus – pozioma kreska tak zaprojektowana, by pasowała krojem, szerokością do znaku +, kreska liczbowa ‒ – nadająca się być może do numerów telefonów, NIP‑ów o szerokości równej szerokości cyfry

Kod

Efekt

{|
  |A
  |style="padding:0 2.5em"|987&thinsp;654
 |-
  |B
  |style="padding:0 2.5em"|&#8199;23&thinsp;456
 |-
  |C
  |style="padding:0 2.5em"|&#8199;&#8199;2&thinsp;234
 |-
  |E
  |style="padding:0 2.5em"|&#8199;&#8199;&#8199;&thinsp;&#8199;11
 |-
  |F
  |style="padding:0 2.5em"|123&thinsp;456,789
 |-
  |G
  |style="padding:0 2.5em"|&#8199;57&thinsp;890,21
 |-
  |H
  |style="padding:0 2.5em"|&#8199;&#8199;2&thinsp;123,1
 |-
  |I
  |style="padding:0 2.5em"|&#8199;&#8199;&#8199;&thinsp;456,0
 |-
  |J
  |style="padding:0 2.5em"|&#8199;&#8199;&#8199;&thinsp;&#8199;21,123
 |-
  |K
  |style="padding:0 2.5em"|&#8199;&#8199;&#8199;&thinsp;&#8199;&#8199;0,227
|}

A	987 654
B	23 456
C	2 234
E	11
F	123 456,789
G	57 890,21
H	2 123,1
I	456,0
J	21,123
K	0,227

3. Możliwe jest również uzyskanie odstępów przy pomocy   (bez „gwarancji”, że stosunek szerokości spacji niełamliwej i cyfry jest w różnych krojach stały – choć często dwie spacje mają szerokość jednej cyfry) i {{tab|.5|em}} (bez „gwarancji”, że cyfry we wszystkich krojach pisma mają szerokość 0.5 em)

Kod

Efekt

{|
  |A
  |style="padding:0 2.5em"|987&nbsp;654
 |-
  |B
  |style="padding:0 2.5em"|&nbsp;&nbsp;23&nbsp;456
 |-
  |C
  |style="padding:0 2.5em"|&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;234
 |-
  |E
  |style="padding:0 2.5em"|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11
 |-
  |F
  |style="padding:0 2.5em"|123&nbsp;456,789
 |-
  |G
  |style="padding:0 2.5em"|&nbsp;&nbsp;57&nbsp;890,21
 |-
  |H
  |style="padding:0 2.5em"|&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;123,1
 |-
  |I
  |style="padding:0 2.5em"|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;456,0
 |-
  |J
  |style="padding:0 2.5em"|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;21,123
 |-
  |K
  |style="padding:0 2.5em"|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0,227
|}

A	987 654
B	23 456
C	2 234
E	11
F	123 456,789
G	57 890,21
H	2 123,1
I	456,0
J	21,123
K	0,227

Kod

Efekt

{|
  |A
  |style="padding:0 2.5em"|987{{tab|.25|em}}654
 |-
  |B
  |style="padding:0 2.5em"|{{tab|.5|em}}23{{tab|.25|em}}456
 |-
  |C
  |style="padding:0 2.5em"|{{tab|.5|em}}{{tab|.5|em}}2{{tab|.25|em}}234
 |-
  |E
  |style="padding:0 2.5em"|{{tab|.5|em}}{{tab|.5|em}}{{tab|.5|em}}{{tab|.25|em}}{{tab|.5|em}}11
 |-
  |F
  |style="padding:0 2.5em"|123{{tab|.25|em}}456,789
 |-
  |G
  |style="padding:0 2.5em"|{{tab|.5|em}}57{{tab|.25|em}}890,21
 |-
  |H
  |style="padding:0 2.5em"|{{tab|.5|em}}{{tab|.5|em}}2{{tab|.25|em}}123,1
 |-
  |I
  |style="padding:0 2.5em"|{{tab|.5|em}}{{tab|.5|em}}{{tab|.5|em}}{{tab|.25|em}}456,0
 |-
  |J
  |style="padding:0 2.5em"|{{tab|.5|em}}{{tab|.5|em}}{{tab|.5|em}}{{tab|.25|em}}{{tab|.5|em}}21,123
 |-
  |K
  |style="padding:0 2.5em"|{{tab|.5|em}}{{tab|.5|em}}{{tab|.5|em}}{{tab|.25|em}}{{tab|.5|em}}{{tab|.5|em}}0,227
|}

A	987 654
B	23 456
C	2 234
E	11
F	123 456,789
G	57 890,21
H	2 123,1
I	456,0
J	21,123
K	0,227

4. Użycie szablonu {{0}}

Kod

Efekt

{|
  |A
  |style="padding:0 2.5em"|987{{0|.}}654
 |-
  |B
  |style="padding:0 2.5em"|{{0|0}}23{{0|.}}456
 |-
  |C
  |style="padding:0 2.5em"|{{0|00}}2{{0|.}}234
 |-
  |E
  |style="padding:0 2.5em"|{{0|000.0}}11
 |-
  |F
  |style="padding:0 2.5em"|123{{0|.}}456,789
 |-
  |G
  |style="padding:0 2.5em"|{{0|0}}57{{0|.}}890,21
 |-
  |H
  |style="padding:0 2.5em"|{{0|00}}2{{0|.}}123,1
 |-
  |I
  |style="padding:0 2.5em"|{{0|000.}}456,0
 |-
  |J
  |style="padding:0 2.5em"|{{0|000.0}}21,123
 |-
  |K
  |style="padding:0 2.5em"|{{0|000.00}}0,227
|}

A	987.654
B	023.456
C	002.234
E	000.011
F	123.456,789
G	057.890,21
H	002.123,1
I	000.456,0
J	000.021,123
K	000.000,227

5. Użycie szablonu {{1}}

Kod

Efekt

{|
  |A
  |style="padding:0 5em 0 2.5em;text-align: right;"|987&nbsp;654
 |-
  |B
  |style="padding:0 5em 0 2.5em;text-align: right;"|23&nbsp;456
 |-
  |C
  |style="padding:0 5em 0 2.5em;text-align: right;"|2&nbsp;234
 |-
  |E
  |style="padding:0 5em 0 2.5em;text-align: right;"|11
 |-
  |F
  |style="padding:0 5em 0 2.5em;text-align: right;"|123&nbsp;456{{1|,789}}
 |-
  |G
  |style="padding:0 5em 0 2.5em;text-align: right;"|57&nbsp;890{{1|,21}}
 |-
  |H
  |style="padding:0 5em 0 2.5em;text-align: right;"|2&nbsp;123{{1|,1}}
 |-
  |I
  |style="padding:0 5em 0 2.5em;text-align: right;"|456{{1|,0}}
 |-
  |J
  |style="padding:0 5em 0 2.5em;text-align: right;"|21{{1|,123}}
 |-
  |K
  |style="padding:0 5em 0 2.5em;text-align: right;"|0{{1|,227}}
|}

A	987 654
B	23 456
C	2 234
E	11
F	123 456,789
G	57 890,21
H	2 123,1
I	456,0
J	21,123
K	0,227

6. Użycie formatów bloków tekstowych wewnątrz komórki.

Kod

Efekt

{|
  |A
  |style="padding:0 1em;text-align: left; white-space: nowrap;"|{{f|align=right|width=4em|style=display:inline-block|987&nbsp;654}}
 |-
  |B
  |style="padding:0 1em;text-align: left; white-space: nowrap;"|{{f|align=right|width=4em|style=display:inline-block|23&nbsp;456}}
 |-
  |C
  |style="padding:0 1em;text-align: left; white-space: nowrap;"|{{f|align=right|width=4em|style=display:inline-block|2&nbsp;234}}
 |-
  |E
  |style="padding:0 1em;text-align: left; white-space: nowrap;"|{{f|align=right|width=4em|style=display:inline-block|11}}
 |-
  |F
  |style="padding:0 1em;text-align: left; white-space: nowrap;"|{{f|align=right|width=4em|style=display:inline-block|123&nbsp;456}}{{f|style=display:inline-block;|,789}}
 |-
  |G
  |style="padding:0 1em;text-align: left; white-space: nowrap;"|{{f|align=right|width=4em|style=display:inline-block|57&nbsp;890}}{{f|style=display:inline-block;|,21}}
 |-
  |H
  |style="padding:0 1em;text-align: left; white-space: nowrap;"|{{f|align=right|width=4em|style=display:inline-block|2&nbsp;123}}{{f|style=display:inline-block;|,1}}
 |-
  |I
  |style="padding:0 1em;text-align: left; white-space: nowrap;"|{{f|align=right|width=4em|style=display:inline-block|456}}{{f|style=display:inline-block;|,0}}
 |-
  |J
  |style="padding:0 1em;text-align: left; white-space: nowrap;"|{{f|align=right|width=4em|style=display:inline-block|21}}{{f|style=display:inline-block;|,123}}
 |-
  |K
  |style="padding:0 1em;text-align: left; white-space: nowrap;"|{{f|align=right|width=4em|style=display:inline-block|0}}{{f|style=display:inline-block;|,227}}
|}

A	987 654
B	23 456
C	2 234
E	11
F	123 456 ,789
G	57 890 ,21
H	2 123 ,1
I	456 ,0
J	21 ,123
K	0 ,227

Pionowy skład[edytuj]

Krótkie teksty w wąskich rubrykach bywają składane pionowo. Można do tego użyć szablonu {{Obrót|...|270}}. Trzeba jednak pamiętać o kilku aspektach:

Algorytm tworzenia tabeli, a więc określenie szerokości, wysokości komórki, podziału tekstu na wiersze działa przed obrotem tekstu
Oś obrotu tekstu wypada gdzieś w okolicy lewego dolnego rogu bloku tekstu

Przez zastosowanie szablonu {{1}} można ominąć problem dostosowywania się wielkości komórki do nieobróconego tekstu, jednak redaktor jest wtedy sam odpowiedzialny za zadbanie by cały tekst wyświetlał się w komórce niezależnie od możliwych konfiguracji (np. zmniejszenie szerokości okna) jak również o jego właściwe pozycjonowanie wewnątrz komórki.
By zapobiec podziałowi tekstu na słowa (złamaniu na linie), można np. w charakterze odstępów wstawić   lub ewentualnie style="white-space: nowrap".
Najlepsze wyniki, tj. najmniej podatne na zmiany szerokości całej tabeli, zmianę przeglądarki, uzyskujemy w przypadku wysokich komórek, gdzie chcemy umieścić pionowo jedną linię tekstu.
Gdy komórka jest bardzo wysoka, a tekst stosunkowo krótki i ma być wyśrodkowany w pionie, najprościej uzyskać ten efekt przez style="vertical-align:center;text-align:center", tekst wprawdzie nie jest idealnie na środku jednak efekt jest wizualnie bardzo zbliżony.
W innych wypadkach najlepiej jest zacząć od dolnej krawędzi komórki style="vertical-align:bottom;text-align:center". Przesunięcie tekstu można uzyskać przez użycie odpowiedniej liczby  .
W przypadku tekstu składającego się z dwóch wierszy, które mają być względem siebie wyśrodkowane, można ten tekst uzyskać przez odpowiednią liczbę  .

Niestety wszystko to jest stosunkowo żmudną pracą metodą prób i błędów.

Przenoszenie wyrazów[edytuj]

Zasadniczo rzecz biorąc na Wikźródłach nie wstawiamy miejsc podziału wyrazów, zostawiamy to ewentualnie oprogramowaniu czytnika. Niemniej jednak w przypadku tabel można rozważać wstawianie w tekście w rubrykach tabeli tzw. „miękkich dywizów”. W przypadku zmiany szerokości tabeli i co za tym idzie szerokości kolumn, tekst będzie w ten sposób czytelniejszy i estetyczniej prezentowany. Służy do tego encja . Np. W przypadku szerokiego łamu przenoszenie wyrazów nie jest tak istotne. W przypadku wąskich łamów czy rubryk tabeli dzielenie wyrazów może być niezbędne dla estetycznej prezentacji.

W przypadku szerokiego łamu przenoszenie wyrazów nie jest tak istotne. W przypadku wąskich łamów czy rubryk tabeli dzielenie wyrazów może być niezbędne dla estetycznej prezentacji.

Skośny podział komórki[edytuj]

Wskazania edytorskie w poligrafii ogólnie rzecz biorąc nie zalecają skośnego podziału komórki.

Efekt

Kod

niezalecane

ogier klacz	osioł	koń
osioł	osioł	osłomuł
koń	muł	koń

{| style="border-collapse:collapse;"
  | style="background:linear-gradient(to top right,transparent 49.5%,#000000 49.5%,#000000 51.0%,transparent 51.0%);line-height:1; width:8em;height:3em; border:1px solid black" |{{f|style=margin-left:2em;text-align:right; padding-right: .3em|ogier}}{{f|style=margin-right:2em; text-align:left; padding-left: .3em|klacz}}
  | style="border: 1px solid black; text-align: center; padding: 0 1em"  |osioł
  | style="border: 1px solid black; text-align: center; padding: 0 1em"  |koń
 |- 
  | style="border: 1px solid black; text-align: left; padding: 0 .5em"   |osioł
  | style="border: 1px solid black; text-align: center; padding: 0 1em"  |osioł
  | style="border: 1px solid black; text-align: center; padding: 0 1em"  |osłomuł
 |- 
  | style="border: 1px solid black; text-align: left; padding: 0 .5em"   |koń
  | style="border: 1px solid black; text-align: center; padding: 0 1em"  |muł
  | style="border: 1px solid black; text-align: center; padding: 0 1em"  |koń
|}

zalecane

klacz	ogier
klacz	osioł	koń
osioł	osioł	osłomuł
koń	muł	koń

{| style="border-collapse:collapse;"
  | rowspan="2" style="border: 1px solid black; vertical-align: center; text-align: left; padding: 0 .5em" | klacz
  | colspan="2" style="border: 1px solid black; text-align:center"                                         | ogier
 |-
  | style="border: 1px solid black; text-align: center; padding: 0 1em"                                    |osioł
  | style="border: 1px solid black; text-align: center; padding: 0 1em"                                    |koń
 |- 
  | style="border: 1px solid black; text-align: left; padding: 0 .5em"                                     |osioł
  | style="border: 1px solid black; text-align: center; padding: 0 1em"                                    |osioł
  | style="border: 1px solid black; text-align: center; padding: 0 1em"                                    |osłomuł
 |- 
  | style="border: 1px solid black; text-align: left; padding: 0 .5em"                                     |koń
  | style="border: 1px solid black; text-align: center; padding: 0 1em"                                    |muł
  | style="border: 1px solid black; text-align: center; padding: 0 1em"                                    |koń
|}

Niekiedy spotyka się taki podział górnej lewej komórki dlatego powyżej podany jest kod.

Tabela wewnątrz tabeli[edytuj]

Tabele zagnieżdżone są problematyczne ze względu na dostępność dla czytników, czytelność kodu itp. Jak w przypadku innych struktur w składni wiki (np. listy tworzone przy pomocy asterysków), definicja tabeli wewnętrznej powinna się zaczynać w następnej linii:

⋮
 | komórka zewnętrznej tabeli
 | komórka zewnętrznej tabeli
|-                           <!-- nowy wiersz tabeli zewnętrznej                  -->
 |                           <!-- ten wiersz (poza znakiem potoku) zostaje pusty  -->
   {|                        <!-- tu się zaczyna definicja tabeli wewnętrznej     -->
     | komórka wewnętrznej tabeli
     | komórka wewnętrznej tabeli
     ⋮
   |}                        <!-- tu się kończy definicja tabeli wewnętrznej      -->
 | komórka zewnętrznej tabel
⋮

Przenoszenie tabeli na krawędzi strony[edytuj]

Przy odwzorowywaniu fizycznej książki w przestrzeni Strona: czasami trafimy na sytuację, gdy tabela znajduje się fizycznie na dwóch lub więcej stronach. Wszystkie kolumny są jednak widoczne już na pierwszej ze stron. W przestrzeni głównej jednak chcemy by, tabela była widziana jako całość.
Najprościej w takim wypadku przepisać całą tabelę na jednej ze stron.
Druga możliwość to na pierwszej stronie w stopce^[8] (a więc w części ujętej w znaczniki <noinclude>...</noinclude>) zakończyć tabelę (|}), by na następnej stronie w nagłówku (a więc znowu w części ujętej w znaczniki <noinclude>...</noinclude>) otworzyć powtórnie tabelę ({|). Istotne jest przy tym by:

prawidłowo wstawić podział między wierszami (a więc na którejś ze stron – na końcu pierwszej albo na początku drugiej normalnie w tekście musi się znaleźć znak |-
jako pierwszy fizycznie wiersz na stronie nie może się znajdować znacznik tabeli (można poprzedzić go <nowiki />.

Obszerne omówienie sposobu łączenia tabeli wraz z przykładem można znaleźć w poradniku Łączenie stron.

Wyjaśnienie mechanizmu działania znacznika noinclude można znaleźć w poradniku Transkluzja i substytucja a użycie znaczników noinclude, includeonly, onlyinclude.

W przypadku, gdy tabela znajduje się na rozkładówce (a więc jest na dwóch kolejnych stronach ale podzielona w pionie) pozostaje umieszczenie tabeli na jednej ze stron.

Znak potoku pipe sign[edytuj]

Na Wikźródłach rzadko konieczne jest wstawianie w tekście (a więc nie w kodzie) pionowej kreski. Niemniej jednak krótka informacja:

ponieważ trzecia i kolejne kreski pionowe w wierszu nie mają w składni wiki znaczenia (jeśli nie występują parami), to można wstawić przed tekstem wiersza jakiś pseudoformat, który zostanie przy parsowaniu tabeli pominięty np |format|1 + |x| = 25 (nie działa przy dwóch kreskach koło siebie ||)
możliwe jest wstawienie kreski między znacznikami nowiki |1 + <nowiki>|</nowiki>x<nowiki>|</nowiki> = 25 lub |1 + <nowiki>|x|</nowiki> = 25 lub tp.
możliwe jest użycie html-owego znacznika: |1 + |x| = 25

Formatowanie i komentarze[edytuj]

Przy tworzeniu tabel czasami warto formatować właściwie kod ale i komentować, by uczynić go łatwiejszym do analizy, uzupełnienia czy naprawy.
Powyżej w sekcji #Style CSS omówiono formatowanie stylów. Czytelność na przykład mogą poprawić odstępy po dwukropkach i średnikach.
Należy dodać, że czytelność kodu można poprawić również przez konsekwentne wcięcia rozpoczynające definicje komórek, wierszy.
Komentarze wstawia się przy pomocy zwykłej składni wiki .

↑ Jednak składnia wiki np. listy, zagnieżdżone tabele muszą być w osobnym wierszu.
↑ Zecer przy składzie kolumny pracował na zadanej szerokości, my natomiast redagujemy na wyższym poziomie abstrakcji, nie wiemy jaka będzie szerokość ekranu, na którym będzie wyświetlany tekst, jaka wielkość czcionki będzie używana.
↑
Umieszczony w nagłówku informuje, że nagłówek dotyczy kolumny lub wiersza
- ! scope=row | – nagłówek dotyczy rubryki poziomej tabeli
- ! scope=col | – nagłówek dotyczy rubryki pionowej tabeli
Zaś dla tabel z połączonymi komórkami na przykład:
- ! scope="colgroup" colspan="2" |
- ! scope="rowgroup" rowspan="2" |
- ! scope="colgroup" colspan="2" rowspan="3" |
- ! scope="rowgroup" colspan="2" rowspan="3" |
etc.
↑ cellspacing="collapsed" jest przestarzałe

↑

{\|style=border-collapse:collapse
style="border-right:2px solid black"	bez zdefiniowanej ramki
bez zdefiniowanej ramki	style="border-left:2px solid black"
style="border-right:2px solid black"	style="border-left:2px solid black"
sąsiednie ramki się ze sobą zlewają

i

{\|style=border-collapse:separate (lub brak)
style="border-right:2px solid black"	bez zdefiniowanej ramki
bez zdefiniowanej ramki	style="border-left:2px solid black"
style="border-right:2px solid black"	style="border-left:2px solid black"
sąsiednie ramki są oddzielone domyślnym odstępem

i

{\|style="border-spacing:0;border-collapse:separate" (lub brak border-collapse)
style="border-right:2px solid black"	bez zdefiniowanej ramki
bez zdefiniowanej ramki	style="border-left:2px solid black"
style="border-right:2px solid black"	style="border-left:2px solid black"
nawet jeśli odstęp między ramkami zredukujemy do zera, ramki się ze sobą nie zlewają

↑ Tzw. parent element dla tabeli to strona, zaś dla kolumny (komórki) w tabeli jest nim sama tabela.
↑ Mieszanie jednostek jest możliwe przy pomocy funkcji css calc. Można tu też przeprowadzić proste obliczenia. Na przykład 50% minus 10em to jest: calc(50% - 10em) . Arytmetyka calc uwzględnia podstawowe cztery działania (dodawanie, odejmowanie, mnożenie, dzielenie).
↑ Jeśli nagłówek i stopka są niewidoczne, można je otworzyć przy pomocy przycisku z przybornika Narzędzia proofread.

[1] Jednak składnia wiki np. listy, zagnieżdżone tabele muszą być w osobnym wierszu.

[2] Zecer przy składzie kolumny pracował na zadanej szerokości, my natomiast redagujemy na wyższym poziomie abstrakcji, nie wiemy jaka będzie szerokość ekranu, na którym będzie wyświetlany tekst, jaka wielkość czcionki będzie używana.

[3] Umieszczony w nagłówku informuje, że nagłówek dotyczy kolumny lub wiersza
! scope=row | – nagłówek dotyczy rubryki poziomej tabeli

! scope=col | – nagłówek dotyczy rubryki pionowej tabeli
Zaś dla tabel z połączonymi komórkami na przykład:
! scope="colgroup" colspan="2" |

! scope="rowgroup" rowspan="2" |

! scope="colgroup" colspan="2" rowspan="3" |

! scope="rowgroup" colspan="2" rowspan="3" |
etc.

[4] ! scope=row | – nagłówek dotyczy rubryki poziomej tabeli

[5] ! scope=col | – nagłówek dotyczy rubryki pionowej tabeli

[6] ! scope="colgroup" colspan="2" |

[7] ! scope="rowgroup" rowspan="2" |

[8] ! scope="colgroup" colspan="2" rowspan="3" |

[9] ! scope="rowgroup" colspan="2" rowspan="3" |

[4] cellspacing="collapsed" jest przestarzałe

[5] 

{|style=border-collapse:collapse

style="border-right:2px solid black" bez zdefiniowanej ramki

bez zdefiniowanej ramki style="border-left:2px solid black"

style="border-right:2px solid black" style="border-left:2px solid black"

sąsiednie ramki się ze sobą zlewają

i

{|style=border-collapse:separate (lub brak)

style="border-right:2px solid black" bez zdefiniowanej ramki

bez zdefiniowanej ramki style="border-left:2px solid black"

style="border-right:2px solid black" style="border-left:2px solid black"

sąsiednie ramki są oddzielone domyślnym odstępem

i

{|style="border-spacing:0;border-collapse:separate" (lub brak border-collapse)

style="border-right:2px solid black" bez zdefiniowanej ramki

bez zdefiniowanej ramki style="border-left:2px solid black"

style="border-right:2px solid black" style="border-left:2px solid black"

nawet jeśli odstęp między ramkami zredukujemy do zera, ramki się ze sobą nie zlewają

[6] Tzw. parent element dla tabeli to strona, zaś dla kolumny (komórki) w tabeli jest nim sama tabela.

[7] Mieszanie jednostek jest możliwe przy pomocy funkcji css calc. Można tu też przeprowadzić proste obliczenia. Na przykład 50% minus 10em to jest: calc(50% - 10em) . Arytmetyka calc uwzględnia podstawowe cztery działania (dodawanie, odejmowanie, mnożenie, dzielenie).

[8] Jeśli nagłówek i stopka są niewidoczne, można je otworzyć przy pomocy przycisku z przybornika Narzędzia proofread.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]