Edytujesz Użytkownik:Lukasvonbayern/Tabele (sekcja)

==== 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.