Tabele - HTML
Łączenie wierszy tabeli w grupy <thead, tbody, tfoot>
W jaki sposób połączyć kilka wierszy tabeli w grupę funkcjonalną? Jak wydzielić nagłówek i stopkę tabeli?
Łączenie wierszy tabeli w grupy <tbody>
<table> <tbody> <tr>...</tr> </tbody> </table>
Łączenie wierszy w grupy umożliwia później odnoszenie się do takiej grupy jako do całości. Dzięki temu możemy nadać od razu całej grupie np. określone formatowanie za pomocą CSS.
W grupę można połączyć dowolną liczbę wierszy. W jednej tabeli może istnieć kilka grup.
Jeżeli umieścimy w tabeli przynajmniej jeden znacznik TBODY, wszystkie wiersze muszą być objęte tego typu znacznikami! Dla pozostałych komórek należy utworzyć dodatkowy znacznik TBODY, który nie musi posiadać żadnych atrybutów.
Przykład <tbody>
Po wpisaniu:
<table> <tbody style="background-color: red"> <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> </tbody> <tbody> <tr> <td>komórka7</td> <td>komórka8</td> <td>komórka9</td> </tr> </tbody> </table>
otrzymamy:
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
Nagłówek i stopka <thead, tfoot>
Dla tabel często również podaje się tzw. nagłówek i stopkę. Nagłówek pojawi się na szczycie tabeli, a stopka - na dole. Nagłówek tworzymy, przy użyciu: <thead>...</thead>
, natomiast stopkę: <tfoot>...</tfoot>
:
W tebeli powinien znajdować się tylko jeden nagłówek i jedna stopka, natomiast można tam umieścić dowolną ilość znaczników <tbody>...</tbody>
.
Znacznik TFOOT musi się znajdować w tabeli przed elementem TBODY, tzn. zaraz na początku - po THEAD. Umieszczenie stopki na końcu tabeli jest błędem! Ma to na celu ułatwienie renderowania tabeli, zanim wczytają się jej wszystkie wiersze.
Przykład <thead, tfoot, tbody>
<table> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> </thead> <tfoot> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> </tfoot> <tbody> <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> </tbody> <tbody> <tr> <td>komórka7</td> <td>komórka8</td> <td>komórka9</td> </tr> <tr> <td>komórka10</td> <td>komórka11</td> <td>komórka12</td> </tr> <tr> <td>komórka13</td> <td>komórka14</td> <td>komórka15</td> </tr> </tbody> </table>
A | B | C |
---|---|---|
a | b | c |
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
komórka10 | komórka11 | komórka12 |
komórka13 | komórka14 | komórka15 |