Tabele — HTML — kod. pyk

Tabela służy do prezentowania danych w wierszach i kolumnach.

Jak to działa?

<table> obejmuje tabelę, <tr> wiersz, <th> nagłówek, a <td> komórkę danych. Nagłówki kolumn warto umieścić w <thead>. Nie używaj tabel do układu strony.

Przykład 1 — poznaj zapis

<table>
  <thead><tr><th>Język</th><th>Poziom</th></tr></thead>
  <tbody>
    <tr><td>Python</td><td>Podstawy</td></tr>
    <tr><td>PHP</td><td>Podstawy</td></tr>
  </tbody>
</table>

Powstanie tabela z dwiema kolumnami i dwoma wierszami danych.

Przeczytaj kod linijka po linijce

<table>Ten znacznik określa element lub strukturę dokumentu.
<thead><tr><th>Język</th><th>Poziom</th></tr></thead>Ten znacznik określa element lub strukturę dokumentu.
<tbody>Ten znacznik określa element lub strukturę dokumentu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Tabela z dwiema kolumnami i dwoma wierszami danych.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

<table><tr><th>Imię</th><th>Wynik</th></tr><tr><td>Ola</td><td>90</td></tr></table>

Wynik drugiego przykładupo uruchomieniu przykładu

Tabela z dwiema kolumnami.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Dodaj trzeci wiersz z językiem JavaScript.