Tabele#
Zagnieżdżanie tabel#
Tabele są elementami blokowymi, które można zagnieżdżać (czyli umieszczać jedne wewnątrz drugich). Tabele podrzędne należy umieszczać wewnątrz komórek (td
, th
) tabeli nadrzędnej.
Prosty przykład:
<table border="3" cellspacing="10" width="500">
<tr>
<td>komórka1</td>
<td>komórka2</td>
<td>komórka3</td>
</tr>
<tr>
<td>komórka4</td>
<td>komórka5</td>
<td>komórka6</td>
</tr>
<tr>
<th>komórka7
<table border="1" cellspacing="5">
<tr>
<td>7-1</td>
<td>7-2</td>
<td>7-3</td>
</tr>
<tr>
<td>7-4</td>
<td>7-5</td>
<td>7-6</td>
</tr>
</table>
</th>
<td>komórka8</td>
<td>komórka9
<table border="1" cellspacing="5">
<tr>
<td>9-1</td>
<td>9-2</td>
<td>9-3</td>
</tr>
<tr>
<td>9-4</td>
<td>9-5</td>
<td>9-6</td>
</tr>
</table>
</td>
</tr>
</table>
Efekt:
komórka1 | komórka2 | komórka3 | ||||||||||||
komórka4 | komórka5 | komórka6 | ||||||||||||
komórka7
| komórka8 | komórka9
|
---|
Możliwość zagnieżdżania tabel przez wielu webmasterów wykorzystana została do tworzenia przeróżnych efektów graficznych (a nawet do budowania całych layotów stron WWW):
<table style="background-color: black;" cellspacing="0" cellpadding="5">
<tr>
<td>
<table style="background-color: maroon;" cellspacing="0" cellpadding="5">
<tr>
<td>
<table style="background-color: red;" cellspacing="0" cellpadding="5">
<tr>
<td>
<table style="background-color: yellow;" cellspacing="0" cellpadding="5">
<tr>
<td>
<table style="background-color: white;" cellspacing="0" cellpadding="5">
<tr>
<td>5 kolejno zagnieżdżonych tabelek</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Efekt:
|
Nie jest to prawidłowa technika (tabele są stosowane niezgodnie z ich przeznaczeniem). Należy się wystrzegać tego typu udziwnień. Arkusze stylów oferują zdecydowanie większe możliwości sterowania wyglądem strony oraz poszczególnych jej elementów.
Pasek społecznościowy