Edytujesz Użytkownik:Lukasvonbayern/Tabele (sekcja)

=== Kilka tabel obok siebie ===
==== Metoda zagnieżdżania ====
Najprostszą metodą jest stworzenie nadrzędnej gołej tabeli bez formatowania (czyli bez „class="wikitable"”) składającej się tylko z jednego wiersza. W kolejnych komórkach tego wiersza umieszczamy normalne, wikipediowe tabele (czyli zawierające „class="wikitable"”), a najlepiej w co drugiej komórce, przeplatając to komórkami z odstępem (np. z &amp;nbsp;). Innymi słowy kilka tabel sformatowanych osadzamy w jednej tabeli niesformatowanej:
<source lang="text">
początek tabeli nadrzędnej:   {|
       komórka z 1. tabelą:   |
                              {| class="wikitable"
                              ...
                              |}
        komórka z odstępem:   | &nbsp;
       komórka z 2. tabelą:   |
                              {| class="wikitable"
                              ...
                              |}
koniec tabeli nadrzędnej:     |}
</source>

Osadzone tabele bez odstępów mają bardzo mały własny odstęp:
{|
|
{| class="wikitable"
|1||1
|-
|1||1
|}
|
{| class="wikitable"
|2||2
|-
|2||2
|}
|}

A tak jest po dodaniu komórki z odstępem (np. z &amp;nbsp;)
{|
|
{| class="wikitable"
| 1 || 1
|-
| 1 || 1
|}
| &nbsp;
|
{| class="wikitable"
| 2 || 2
|-
| 2 || 2
|}
|}

Metoda ta nie sprawdza się przy komórkach o różnej wysokości (a wysokość może się zmieniać w zależności od szerokości okna przeglądarki). Możemy wtedy uzyskać taki efekt:
{|
|
{| class="wikitable"
| inna<br />wysokość
|-
| inna<br />wysokość
|}
| &nbsp;
|
{| class="wikitable"
| inna<br />wysokość
|-
| inna&nbsp;wysokość
|}
| &nbsp;
|
{| class="wikitable"
| inna&nbsp;wysokość
|-
| inna<br />wysokość
|}
| &nbsp;
|
{| class="wikitable"
| inna&nbsp;wysokość
|-
| inna&nbsp;wysokość
|}
|}

Częściowo można poprawić wygląd poprzez justowanie do góry każdej komórki z osadzoną tabelą:
<source lang="text">
początek tabeli nadrzędnej:   {|
       komórka z 1. tabelą:   | style="vertical-align: top"|
                              {| class="wikitable"
                              ...
                              |}
        komórka z odstępem:   | &nbsp;
       komórka z 2. tabelą:   | style="vertical-align: top"|
                              {| class="wikitable"
                              ...
                              |}
koniec tabeli nadrzędnej:     |}
</source>

{|
| style="vertical-align: top"|
{| class="wikitable"
| inna<br />wysokość
|-
| inna<br />wysokość
|}
| &nbsp;
| style="vertical-align: top"|
{| class="wikitable"
| inna<br />wysokość
|-
| inna&nbsp;wysokość
|}
| &nbsp;
| style="vertical-align: top"|
{| class="wikitable"
| inna&nbsp;wysokość
|-
| inna<br />wysokość
|}
| &nbsp;
| style="vertical-align: top"|
{| class="wikitable"
| inna&nbsp;wysokość
|-
| inna&nbsp;wysokość
|}
|}

Metoda zagnieżdżania ma jeszcze jedną wadę – powiększa się nieco interlinia przed i po takiej tabeli:

Poniżej jedna tabela: zwykły odstęp ↓
{| class="wikitable"
!
!
|-
|
|
|-
|
|
|}
Poniżej tabele osadzone w tabeli: zwykły odstęp ↑, powiększony odstęp ↓
{|
|
{| class="wikitable"
!
!
|-
|
|
|-
|
|
|}
| &nbsp;
|
{| class="wikitable"
!
!
|-
|
|
|-
|
|
|}
|}
Nowy akapit: powiększony odstęp ↑

==== Metoda białej kolumny ====
Metodą dającą najlepszy efekt wizualny jest symulacja kilku tabel poprzez użycie tylko jednej tabeli, ale z nadaniem niektórym kolumnom białego koloru. W tym celu pierwszą komórkę w białej kolumnie rozciągamy na wszystkie pozostałe wiersze poleceniem <code>rowspan</code> (podając liczbę wierszy), przez co otrzymamy jedną wspólną pionową komórkę biegnącą przez całą tabelę. Tej komórce nadajemy biały kolor tła, ale również na biało musimy pokolorować jej górną i dolną krawędź. Wszystkie formatowania umieszczamy obok siebie w jednym wierszu kodu, np.: 
<source lang="text">{| class="wikitable"
! Pierwsza kolumna
! Druga kolumna
! rowspan=4 style="border-top-color: White; border-bottom-color: White; background-color: White;"| Trzecia<br />kol.
! Czwarta kolumna
! Piąta kolumna
|-
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 4
| wiersz 1, kolumna 5
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 4
| wiersz 2, kolumna 5
|-
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 4
| wiersz 3, kolumna 5
|}</source>

...co daje:
{| class="wikitable"
! Pierwsza kolumna
! Druga kolumna
! rowspan=4 style="border-top-color: White; border-bottom-color: White; background-color: White;"| Trzecia<br />kol.
! Czwarta kolumna
! Piąta kolumna
|-
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 4
| wiersz 1, kolumna 5
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 4
| wiersz 2, kolumna 5
|-
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 4
| wiersz 3, kolumna 5
|}

Identyczny efekt można uzyskać nieco innymi poleceniami, umieszczając jedną część w pierwszej linii kodu tabeli, a drugą przy wybranej kolumnie:
<source lang="text">{| class="wikitable" style="border: none"
! Pierwsza kolumna
! Druga kolumna
! rowspan=4 style="border: none; background-color: White"| Trzecia<br />kol.
! Czwarta kolumna
! Piąta kolumna
|-
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 4
| wiersz 1, kolumna 5
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 4
| wiersz 2, kolumna 5
|-
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 4
| wiersz 3, kolumna 5
|}</source>

...co również daje:
{| class="wikitable" style="border: none"
! Pierwsza kolumna
! Druga kolumna
! rowspan=4 style="border: none; background-color: White"| Trzecia<br />kol.
! Czwarta kolumna
! Piąta kolumna
|-
| wiersz 1, kolumna 1
| wiersz 1, kolumna 2
| wiersz 1, kolumna 4
| wiersz 1, kolumna 5
|-
| wiersz 2, kolumna 1
| wiersz 2, kolumna 2
| wiersz 2, kolumna 4
| wiersz 2, kolumna 5
|-
| wiersz 3, kolumna 1
| wiersz 3, kolumna 2
| wiersz 3, kolumna 4
| wiersz 3, kolumna 5
|}

W obu przypadkach szerokość pustej białej kolumny jest dostateczna:
{| class="wikitable"
| x
| x
! rowspan=2 style="border-top-color: White; border-bottom-color: White; background-color: White;"|
| x
| x
|-
| x
| x
| x
| x
|}

...aczkolwiek można ją powiększyć np. wypełniając encjami twardej spacji (&amp;nbsp;).

Dodatkową zaletą obu tych rozwiązań niby-dzielonej tabeli jest identyczna wysokość wszystkich komórek w wierszu (de facto jest to wciąż jedna tabela), np.:
{| class="wikitable"
| ta<br />sama<br />wysokość
| rowspan=4 style="border-top-color: White; border-bottom-color: White; background-color: White;"| biała<br />ko-<br />lu-<br />mna
| ta&nbsp;sama&nbsp;wysokość
|-
| ta<br />sama<br />wysokość
| ta&nbsp;sama&nbsp;wysokość
|-
| ta<br />sama<br />wysokość
| ta&nbsp;sama&nbsp;wysokość
|}

==== Metoda „float” ====
Tabele można ułożyć obok siebie tak, aby wraz ze zmianą szerokości ekranu przesuwały się z jednego wiersza do drugiego. Otacza się wtedy kilka tabel elementem <code><nowiki><div></nowiki></code> z opływaniem do lewej (<code>float:left</code>). Dzięki temu, zależnie od rozdzielczości monitora użytkownika, obok siebie widoczna będzie optymalna liczba tabel.

'''Przykładowy kod:'''
<div style="height:300px; overflow:scroll">
<source lang="xml">
<div style="float:left">
{|class="wikitable"
|tab1 A
|tab1 B
|tab1 C
|tab1 D
|-
|A coś tam
|B coś tam
|C coś tam
|D coś tam
|}
</div>
<div style="float:left">
{|class="wikitable"
|tab2 A
|tab2 B
|tab2 C
|tab2 D
|-
|A coś tu i tam
|B coś tu i tam
|C coś tu i tam
|D coś tu i tam
|}
</div>
<div style="float:left">
{|class="wikitable"
|tab3 A
|tab3 B
|tab3 C
|tab3 D
|-
|A coś tu i tu
|B coś tu i tu
|C coś tu i tu
|D coś tu i tu
|}
</div>
<div>
{|class="wikitable"
|tab4 A
|tab4 B
|tab4 C
|tab4 D
|-
|A coś tam i tam
|B coś tam i tam
|C coś tam i tam
|D coś tam i tam
|}
</div>
</source>
</div><br />

'''Efekt widoczny poniżej:'''
<div style="float:left">
{|class="wikitable"
|tab1 A
|tab1 B
|tab1 C
|tab1 D
|-
|A coś tam
|B coś tam
|C coś tam
|D coś tam
|}
</div>
<div style="float:left">
{|class="wikitable"
|tab2 A
|tab2 B
|tab2 C
|tab2 D
|-
|A coś tu i tam
|B coś tu i tam
|C coś tu i tam
|D coś tu i tam
|}
</div>
<div style="float:left">
{|class="wikitable"
|tab3 A
|tab3 B
|tab3 C
|tab3 D
|-
|A coś tu i tu
|B coś tu i tu
|C coś tu i tu
|D coś tu i tu
|}
</div>
<div>
{|class="wikitable"
|tab4 A
|tab4 B
|tab4 C
|tab4 D
|-
|A coś tam i tam
|B coś tam i tam
|C coś tam i tam
|D coś tam i tam
|}
</div>

; Pamiętaj!
: Zwróć uwagę, że do ostatniej tabelki nie należy dodawać float: left, co powoduje wyświetlanie dalszego tekstu poniżej, a nie z prawej strony tabelek.