1. Zwykła tablica: Jeden wiersz tablicy z jedną komórką, w której są dwie linie tekstu oddzielone od siebie za pomocą br.

<table border=1 cellspacing=0 cellpadding=0 width="100%">
<tr>
<td>
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td></tr></table>

Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa.

2. Marginesy wewnętrzne w komórce ustawione są na 4 pixele (table cellpadding=4).

<table border=1 cellspacing=0 cellpadding=4 width="100%">
<tr>
<td>
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td></tr></table>

Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa.

3. Centrowanie wnętrza komórki (td align=center) ustawia w centrum każdą linijkę z osobna (niestety).

<table border=1 cellspacing=0 cellpadding=4 width="100%">
<tr>
<td align=center>
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td></tr></table>

Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa.

4. Puste komórki (zawierające tylko spację &nbsp;) mogą być dodane po obu stronach komórki z tekstem.

<table border=1 cellspacing=0 cellpadding=4 width="100%">
<tr>
<td>&nbsp;</td>
<td align=center>
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td>
<td>&nbsp;</td>
</tr></table>

Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa.

5. Tekst do lewej. Usunięcie centrowania tekstu (td align=center) domyślnie zamienia na wyrównywanie do lewej (można zastąpić td align=left).

<table border=1 cellspacing=0 cellpadding=4 width="100%">
<tr>
<td>&nbsp;</td>
<td>
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td>
<td>&nbsp;</td>
</tr></table>

Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa.

6. Wymuszenie jak namniejszej szerokości środkowej komórki można osiągnąć za pomocą td width="1%".

<table border=1 cellspacing=0 cellpadding=4 width="100%">
<tr>
<td>&nbsp;</td>
<td width="1%">
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td>
<td>&nbsp;</td>
</tr></table>

Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa.

7. Zachowanie całych wierszy tekstu za pomocą td nowrap (nowrap = bez zawijania).

<table border=1 cellspacing=0 cellpadding=4 width="100%">
<tr>
<td>&nbsp;</td>
<td nowrap width="1%">
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td>
<td>&nbsp;</td>
</tr></table>

Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa.

8. Nowa komórka dodana na numer zwrotki (z td valign=top aby ten numer był u góry, na poziomie pierwszej linijki, a nie w środku zwrotki).

<table border=1 cellspacing=0 cellpadding=4 width="100%">
<tr>
<td>&nbsp;</td>
<td nowrap width="1%" valign=top>
1
</td>
<td nowrap width="1%">
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td>
<td>&nbsp;</td>
</tr></table>

1

Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa.

9. Nowy wiersz dodany do tablicy z następną zwrotką (nowrap wystarczy dodać tylko do najszerszej zwrotki, ale trudno przewidzieć, która jest najszersza, więc nie zaszkodzi dodać do wszystkich).

<table border=1 cellspacing=0 cellpadding=4 width="100%">
<tr>
<td>&nbsp;</td>
<td nowrap width="1%" valign=top>
1
</td>
<td nowrap width="1%">
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td nowrap width="1%" valign=top>
2
</td>
<td nowrap width="1%">
Niedługa nie krótka lecz w sam raz,<br>
Zaśpiewaj ją kotku jeszcze raz.
</td>
<td>&nbsp;</td>
</tr></table>

	1	Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa.
	2	Niedługa nie krótka lecz w sam raz, Zaśpiewaj ją kotku jeszcze raz.

10. Kolory dodane są w każdej komórce za pomocą td bgcolor= (granice tablicy usunięte dzięki border=0).

<table border=0 cellspacing=0 cellpadding=4 width="100%">
<tr>
<td>&nbsp;</td>
<td nowrap width="1%" valign=top bgcolor="ffccff">
1
</td>
<td nowrap width="1%" bgcolor="#8cc6ff">
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td nowrap width="1%" valign=top bgcolor="#8cc6ff">
2
</td>
<td nowrap width="1%" bgcolor="ffccff">
Niedługa nie krótka lecz w sam raz,<br>
Zaśpiewaj ją kotku jeszcze raz.
</td>
<td>&nbsp;</td>
</tr></table>

	1	Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa.
	2	Niedługa nie krótka lecz w sam raz, Zaśpiewaj ją kotku jeszcze raz.

11. Odstępy między komórkami za pomocą table cellspacing=2.

<table border=0 cellspacing=2 cellpadding=4 width="100%">
<tr>
<td>&nbsp;</td>
<td nowrap width="1%" valign=top bgcolor="ffccff">
1
</td>
<td nowrap width="1%" bgcolor="#8cc6ff">
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td nowrap width="1%" valign=top bgcolor="#8cc6ff">
2
</td>
<td nowrap width="1%" bgcolor="ffccff">
Niedługa nie krótka lecz w sam raz,<br>
Zaśpiewaj ją kotku jeszcze raz.
</td>
<td>&nbsp;</td>
</tr></table>

	1	Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa.
	2	Niedługa nie krótka lecz w sam raz, Zaśpiewaj ją kotku jeszcze raz.

12. Całość tekstu można wygodniej przetwarzać jako tablicę w jednej (centralnej) komórce w zewnętrznej tablicy. Puste komórki po bokach dodawane są wtedy tylko raz. W komórkach tej wewnętrznej tablicy nie trzeba już wymuszać minimalnej szerokości (td width="1%"), bo jest to raz zrobione na wyższym poziomie dla komórki, w której mieści się tablica z całym tekstem. Granice zenętrzenej tablicy w następnych przykładach znowu są pokazane (table border=1).

<table border=1 cellspacing=0 cellpadding=0 width="100%">
<tr>
<td>&nbsp;</td>

<td width="1%">

<table border=0 cellspacing=2 cellpadding=4 width="100%">
<tr>
<td nowrap valign=top bgcolor="ffccff">
1
</td>
<td nowrap bgcolor="#8cc6ff">
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td>
</tr>
<tr>
<td nowrap valign=top bgcolor="#8cc6ff">
2
</td>
<td nowrap bgcolor="ffccff">
Niedługa nie krótka lecz w sam raz,<br>
Zaśpiewaj ją kotku jeszcze raz.
</td></tr>
</table>

</td>
<td>&nbsp;</td>
</tr></table>

1 Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa. 2 Niedługa nie krótka lecz w sam raz, Zaśpiewaj ją kotku jeszcze raz.

13. Zanurzenie centralnej tablicy w jeszcze jednej, kolorowej tablicy pozwala na utworzenie własnych ramek. W przykładzie ta dodatkowa tablica ma kolor czerwony (bgcolor=ff0000).

<table border=1 cellspacing=0 cellpadding=0 width="100%">
<tr>
<td>&nbsp;</td>

<td width="1%">

<table border=0 cellpadding=0 cellspacing=0 width="100%" bgcolor=ff0000>
<tr><td>

<table border=0 cellspacing=2 cellpadding=4 width="100%">
<tr>
<td nowrap valign=top bgcolor="ffccff">
1
</td>
<td nowrap bgcolor="#8cc6ff">
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td>
</tr>
<tr>
<td nowrap valign=top bgcolor="#8cc6ff">
2
</td>
<td nowrap bgcolor="ffccff">
Niedługa nie krótka lecz w sam raz,<br>
Zaśpiewaj ją kotku jeszcze raz.
</td></tr>
</table>

</td></tr>
</table>

</td>
<td>&nbsp;</td>
</tr></table>

1 Wlazł kotek na płotek i mruga, Ładna to piosenka niedługa. 2 Niedługa nie krótka lecz w sam raz, Zaśpiewaj ją kotku jeszcze raz.

14. Ramki można teraz regulować za pomocą cellpadding (wewnętrzne marginesy) i cellspacing (odstępy między komórkami). W tym przykładzie w kolorowej tablicy cellpadding=1, w najbardziej wewnętrznej tablicy cellspacing=1. Także granica najbadziej zewnętrznej tablicy jest wyłączona (border=0).

<table border=0 cellspacing=0 cellpadding=0 width="100%">
<tr>
<td>&nbsp;</td>

<td width="1%">

<table border=0 cellspacing=0 cellpadding=1 width="100%" bgcolor=ff0000>
<tr><td>

<table border=0 cellspacing=1 cellpadding=4 width="100%">
<tr>
<td nowrap valign=top bgcolor="ffccff">
1
</td>
<td nowrap bgcolor="#8cc6ff">
Wlazł kotek na płotek i mruga,<br>
Ładna to piosenka niedługa.
</td>
</tr>
<tr>
<td nowrap valign=top bgcolor="#8cc6ff">
2
</td>
<td nowrap bgcolor="ffccff">
Niedługa nie krótka lecz w sam raz,<br>
Zaśpiewaj ją kotku jeszcze raz.
</td></tr>
</table>

</td></tr>
</table>

</td>
<td>&nbsp;</td>
</tr></table>