CodeGym/Kursy/Frontend SELF PL/Strukturyzacja tabel

Strukturyzacja tabel

Dostępny

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:

HTML
<table>
  <caption>Nagłówek tabeli</caption>
  <!-- Zawartość tabeli -->
</table>

Przykład:

HTML
<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:

HTML
<table>
  <thead>
    <tr>
      <th>Nagłówek 1</th>
      <th>Nagłówek 2</th>
    </tr>
  </thead>
  <!-- Zawartość tabeli -->
</table>

Przykład:

HTML
<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:

HTML
<table>
  <thead>
    <tr>
      <th>Nagłówek 1</th>
      <th>Nagłówek 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- Zawartość tabeli -->
  </tbody>
</table>

Przykład:

HTML
<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:

HTML
<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:

HTML
<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.

HTML
<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>
CSS
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;
}
1
Zadanie
Frontend SELF PL,  poziom 5lekcja 2
Niedostępne
Nagłówek z <caption>
Nagłówek z <caption>
1
Zadanie
Frontend SELF PL,  poziom 5lekcja 2
Niedostępne
Struktura tabeli
Struktura tabeli
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy