Tabele.

Tabele.

Do formatowania tabel są stworzone właściwości:
  • width - szerokość tabel i komórek,
  • hight - wysokość tabel i komórek,
  • caption-side - nazwa, (tytuł) tabeli,
  • display:block - blokuje szerokość i wysokość komórek tabeli,
  • table-layout - ustawianie szerokości tabeli,
  • empty-cels - pokazywanie pustych komórek,
  • border-colapse - ustawia linie między komórkami,
  • border-spacing - ustawia odległość między komórkami.
Efekt działania tych deklaracji najlepiej zobaczyć na poniższych przykładach.
Nazwa deklaracjiKod w headKod w bodyEfekt
caption-side:top
(top, bottom,
left, right)		 Nic nie wpisujemy. <table border="1">
<caption style=
"caption-side:top;">
Tytuł u góry</caption> >
<tr><td>ABCDE</td>
<td>ABCD</td></tr>
</table>
Tytuł u góry
ABCDEABCD
caption-side:bottom
(top, bottom,
left, right)		 Nic nie wpisujemy. <table border="1">
<caption style=
"caption-side:bottom;">
Tytuł na dole</caption> >
<tr><td>ABCDE</td>
<td>ABCD</td></tr>
</table>
Tytuł na dole
ABCDEABCD
table-layout:auto table.layout-auto {table-layout:auto;} <table class="layout-auto" border="1">
<tr><td>ABCDE</td>
<td>ABCD</td></tr>
</table>
ABCDEABCD
table-layout:fixed table.layout-fixed {table-layout:fixed;
width:150px;
height:70px;}		 <table class="layout-fixed" border="1">
<tr><td>ABCDE</td>
<td>ABCD</td></tr>
</table>
ABCDEABCD
empty-cells:hide table.empty-cels-hide {empty-cells:hide;} <table class="empty-cels-hide border="1">
<tr><td>ABCDE</td>
<td> </td></tr>
</table>
ABCDE
empty-cells:show table.empty-cels-show {empty-cells:show;} <table class="empty-cels-show border="1">
<tr><td>ABCDE</td>
<td> </td></tr>
</table>
ABCDE   
border-collapse:
collapse		 table.border-collapse {border-collapse:collapse;} <table class="border-collapse" border="1">
<tr><td>ABCDE</td>
<td>ABCD</td></tr>
</table>
ABCDEABCD
border-collapse:
separate		 table.border-separate {border-collapse:separate;} <table class="border-separate" border="1">
<tr><td>ABCDE</td>
<td>ABCD</td></tr>
</table>
ABCDEABCD
border-spacing:
6px		 table.border-spacing {border-spacing:6px;} <table class="border-spacing" border="1">
<tr><td>ABCDE</td>
<td>ABCD</td></tr>
</table>
ABCDEABCD
do góry   menu   powrót   naprzód