7.1 Znacznik <caption>
Znaczniki <caption>, <thead>, <tbody> i <tfoot> są używane
do poprawy strukturyzacji i semantycznego oznaczania tabel w HTML. Pomagają one organizować dane, czyniąc tabele bardziej zrozumiałymi i dostępnymi zarówno dla użytkowników, jak i wyszukiwarek.
Znacznik <caption>
Znacznik <caption> jest używany do dodawania nagłówka do tabeli. Pomaga opisać zawartość tabeli i czyni ją bardziej zrozumiałą dla użytkowników oraz dostępną dla wyszukiwarek.
Składnia:
<table>
<caption>Nagłówek tabeli</caption>
<!-- Zawartość tabeli -->
</table>
Przykład:
<table>
<caption>Nagłówek tabeli</caption>
<tr>
<th>Imię</th>
<th>Wynik</th>
</tr>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</table>
7.2 Znacznik <thead>
Znacznik <thead> jest używany do grupowania wierszy nagłówka tabeli. Pomaga logicznie oddzielić
nagłówek tabeli od jej głównej zawartości.
Składnia:
<table>
<thead>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
</thead>
<!-- Zawartość tabeli -->
</table>
Przykład:
<table>
<thead>
<tr>
<th>Imię</th>
<th>Wynik</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 Znacznik <tbody>
Znacznik <tbody> jest używany do grupowania głównej części zawartości tabeli. Pomaga oddzielić
główną zawartość od nagłówka i „stopki” tabeli.
Składnia:
<table>
<thead>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
</thead>
<tbody>
<!-- Zawartość tabeli -->
</tbody>
</table>
Przykład:
<table>
<thead>
<tr>
<th>Imię</th>
<th>Wynik</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 Znacznik <tfoot>
Znacznik <tfoot> jest używany do grupowania wierszy „stopki” tabeli. Zazwyczaj zawiera
informacje podsumowujące.
Składnia:
<table>
<thead>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
</thead>
<tbody>
<!-- Zawartość tabeli -->
</tbody>
<tfoot>
<tr>
<td>Podsumowanie 1</td>
<td>Podsumowanie 2</td>
</tr>
</tfoot>
</table>
Pełny przykład:
<table>
<thead>
<tr>
<th>Imię</th>
<th>Wynik</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Średnia</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
Zapamiętać to naprawdę łatwo:
Wyjaśnienie struktury tabeli
<table>: zewnętrzny kontener dla całej tabeli<caption>: nagłówek tabeli, który pomaga opisać jej zawartość<thead>: grupuje wiersze nagłówków tabeli<tbody>: grupuje główną zawartość tabeli<tfoot>: grupuje wiersze stopki tabeli
Utrwalenie materiału
Stwórzmy więc tabelę ze wszystkimi nauczonymi znacznikami i dodajmy do niej styl.
<table>
<caption>Wyniki egzaminu</caption>
<thead>
<tr>
<th>Imię</th>
<th>Wynik</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Średnia</td >
<td>91.33</td>
</tr>
</tfoot>
</table>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
GO TO FULL VERSION