0Pricing
HTML for Kids · Lekcja

Tabele: organizowanie danych

Poznaj sposób tworzenia tabel do wyświetlania informacji

Tabele: organizowanie danych to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 4 lekcji w sumie.

Tabele: porządkowanie danych

Witamy w następnej lekcji! Dziś nauczymy się tworzyć tabele w HTML. Tabele świetnie nadają się do porządkowania informacji w wierszach i kolumnach.

Tabele: organizowanie danych — ilustracja 1

Czym są tabele?

Tabele służą do wyświetlania informacji w uporządkowany sposób. Każda tabela składa się z wierszy i kolumn.

Tak wygląda tabela:

Name      Age      City

Alice     12       New York

Bob       15       London

Utwórzmy tę tabelę za pomocą HTML!

Tworzenie prostej tabeli

Tabele w HTML tworzy się za pomocą znacznika <table>. Wiersze tworzy się za pomocą znacznika <tr>, a komórki za pomocą znacznika <td>.

Przykład:

<table>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Dodawanie nagłówka tabeli

Do tabeli można dodać nagłówki za pomocą znacznika <th>. Nagłówki ułatwiają zrozumienie tabeli.

Przykład:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Dodawanie obramowania tabeli

Domyślnie tabele nie mają obramowania. Można je dodać za pomocą atrybutu border lub CSS.

Przykład:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Łączenie kolumn i wierszy

Czasami komórka musi obejmować kilka kolumn lub wierszy. Służą do tego atrybuty colspan i rowspan.

Przykład:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Stylizowanie tabeli

Za pomocą CSS można poprawić wygląd tabeli. Można na przykład zmienić kolory, dodać odstępy wewnętrzne lub wyrównać tekst.

Przykład:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: lightgray;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Wypróbuj samodzielnie

Utwórzmy tabelę zawierającą listę ulubionych filmów. Oto przykład:

<!DOCTYPE html>
<html>
  <head>
    <title>My Favorite Movies</title>
  </head>
  <body>
    <h1>My Favorite Movies</h1>
    <table border="1">
      <tr>
        <th>Movie</th>
        <th>Year</th>
        <th>Genre</th>
      </tr>
      <tr>
        <td>Inception</td>
        <td>2010</td>
        <td>Science Fiction</td>
      </tr>
      <tr>
        <td>The Lion King</td>
        <td>1994</td>
        <td>Animation</td>
      </tr>
    </table>
  </body>
</html>

Świetna robota!

Gratulacje! Wiesz już, jak tworzyć tabele, dodawać nagłówki, a nawet je stylizować. Tabele to doskonały sposób na porządkowanie i wyświetlanie danych. W następnej lekcji nauczymy się tworzyć formularze do zbierania danych od użytkowników. Przygotuj się, aby nadać swoim stronom interaktywność!

Tabele: organizowanie danych — ilustracja 10

Często zadawane pytania

Czy lekcja „Tabele: organizowanie danych” jest bezpłatna?

Tak — pełny tekst „Tabele: organizowanie danych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 4 lekcji w sumie.

Co nauczysz się w „Tabele: organizowanie danych”?

Poznaj sposób tworzenia tabel do wyświetlania informacji Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?

Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Tabele: organizowanie danych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?

Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Tabele: organizowanie danych
  2. Formularze: zbieranie danych od użytkownika
  3. Atrybuty HTML
  4. Multimedia: dodawanie filmów i dźwięku
← Powrót do HTML for Kids