Przejdź do treści

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?

Chrome Firefox Edge Opera Safari

Łą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órka1komórka2komórka3
komórka4komórka5komórka6
komórka7komórka8komó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>
ABC
abc
komórka1komórka2komórka3
komórka4komórka5komórka6
komórka7komórka8komórka9
komórka10komórka11komórka12
komórka13komórka14komórka15

Komentarze

Zobacz więcej komentarzy

Facebook