Tabele#
Wewnętrzne krawędzie#
<table border="1" rules="rodzaj">...</table>
gdzie jako "rodzaj" należy podać:
all- wszystkie krawędzie wewnętrzne (domyślnie)none- brak wewnętrznych krawędzirows- tylko poziome krawędzie wewnątrz tabelicols- tylko pionowe krawędzie wewnątrz tabeligroups- tylko krawędzie między grupami wierszy lub kolumn
Polecenie pozwala zdefiniować wyświetlenie wewnętrznych krawędzi pomiędzy komórkami tabeli. Żeby efekt był widoczny należy włączyć obramowanie dla tabeli (atrybut border). W przykładach dodatkowo wyłączono zewnętrzne krawędzie (atrybut frame="void").
Atrybut RULES nie jest obsługiwany w przeglądarce Opera.
Ustawienia domyślne:
<table border="1" frame="void">
<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>
<td>komórka7</td><td>komórka8</td><td>komórka9</td>
</tr>
</table>Efekt:
| komórka1 | komórka2 | komórka3 |
| komórka4 | komórka5 | komórka6 |
| komórka7 | komórka8 | komórka9 |
Wszystkie wewnętrzne krawędzie (all):
<table border="1" rules="all" frame="void">
<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>
<td>komórka7</td><td>komórka8</td><td>komórka9</td>
</tr>
</table>Efekt:
| komórka1 | komórka2 | komórka3 |
| komórka4 | komórka5 | komórka6 |
| komórka7 | komórka8 | komórka9 |
Brak wewnętrznych krawędzi (none):
<table border="1" rules="none" frame="void">
<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>
<td>komórka7</td><td>komórka8</td><td>komórka9</td>
</tr>
</table>Efekt:
| komórka1 | komórka2 | komórka3 |
| komórka4 | komórka5 | komórka6 |
| komórka7 | komórka8 | komórka9 |
Poziome krawędzie (rows):
<table border="1" rules="rows" frame="void">
<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>
<td>komórka7</td><td>komórka8</td><td>komórka9</td>
</tr>
</table>Efekt:
| komórka1 | komórka2 | komórka3 |
| komórka4 | komórka5 | komórka6 |
| komórka7 | komórka8 | komórka9 |
Pionowe krawędzie (cols):
<table border="1" rules="cols" frame="void">
<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>
<td>komórka7</td><td>komórka8</td><td>komórka9</td>
</tr>
</table>Efekt:
| komórka1 | komórka2 | komórka3 |
| komórka4 | komórka5 | komórka6 |
| komórka7 | komórka8 | komórka9 |
Atrybut rules="groups" jest specyficzny. Pozwala oddzielić od siebie poszczególne grupy kolumn lub wierszy za pomocą krawędzi. Grupy należy zdefiniować samodzielnie za pomocą odpowiednich elementów. W przypadku wydzielania kolumn będą to polecenia colgroup i col (Grupy kolumn). Dla wierszy należy stosować thead, tfoot i tbody (Szkielet złożony). Prosty przykład (bez krawędzi zewnętrznych):
<table rules="groups" frame="void" border="1" cellpadding="5" style="width: 500px;">
<colgroup span="1" align="left"></colgroup>
<colgroup span="4" align="center">
<col span="2" style="background-color: #ccf7f9; " />
<col span="2" style="background-color: #96e3f1; " />
</colgroup>
<thead>
<tr>
<th>produkcja</th>
<th>2002</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
</tr>
</thead>
<tfoot>
<tr>
<th>w mln ton</th>
<th colspan="4"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>śliwki</td>
<td>1,2</td>
<td>1,3</td>
<td>0,9</td>
<td>1,5</td>
</tr>
<tr>
<td>gruszki</td>
<td>0,8</td>
<td>1,1</td>
<td>1,4</td>
<td>0,5</td>
</tr>
<tr>
<td>jabłka</td>
<td>3,1</td>
<td>2,7</td>
<td>2,2</td>
<td>3,0</td>
</tr>
<tr>
<td>czereśnie</td>
<td>0,4</td>
<td>0,3</td>
<td>0,6</td>
<td>0,5</td>
</tr>
<tr>
<td>wiśnie</td>
<td>0,2</td>
<td>0,4</td>
<td>0,3</td>
<td>0,6</td>
</tr>
</tbody>
</table>Efekt:
| produkcja | 2002 | 2003 | 2004 | 2005 |
|---|---|---|---|---|
| w mln ton | ||||
| śliwki | 1,2 | 1,3 | 0,9 | 1,5 |
| gruszki | 0,8 | 1,1 | 1,4 | 0,5 |
| jabłka | 3,1 | 2,7 | 2,2 | 3,0 |
| czereśnie | 0,4 | 0,3 | 0,6 | 0,5 |
| wiśnie | 0,2 | 0,4 | 0,3 | 0,6 |
Należy zauważyć, że wewnętrzne obramowanie dzieli tylko grupy kolumn i wierszy, bez wyświetlania krawędzi dla struktur utworzonych za pomocą col.
Ostatni przykład obrazuje jeszcze jedną ciekawą własność. Chodzi o jaśniejszy kolor, który rozlany został na całą stopkę (pomimo zdefiniowania odrębnych kolorów dla poszczególnych kolumn). Dzieje się tak ze względu na scalenie kilku komórek w jedną <th colspan="4"></th>. Połączona komórka w całości traktowana jest jako jeden element i przypisana do grupy z kolorem #ccf7f9.