Tabele HTML

Tabele HTML to istotny element struktury strony internetowej, który pozwala na przedstawianie danych w przejrzystej, siatkowej formie składającej się z wierszy i kolumn. Jeżeli masz problem z rozróżnieniem, które są wiersze a które kolumny - pamiętaj, że wiersze są poziome, a kolumny pionowe!

Załóżmy, że chcemy stworzyć prostą tabelę przedstawiającą dane osób:

Kod HTML samych wierszy z danymi mógłby wyglądać tak (wiersz nagłówków dodamy za chwilę):

1<table>
2  <tr>
3    <td>John</td>
4    <td>Doe</td>
5  </tr>
6  <tr>
7    <td>Jane</td>
8    <td>Doe</td>
9  </tr>
10</table>

Rozbijmy ten kod na części, aby lepiej zrozumieć, co robią poszczególne elementy:

<table>: Ten znacznik otwiera tabelę. Wszystko, co znajduje się pomiędzy otwierającym znacznikiem <table> a zamykającym </table>, jest traktowane jako część tabeli.

<tr>: Wiersz tabeli. Każdy wiersz otwieramy znacznikiem <tr> i zamykamy </tr>. Wiersze tworzą poziome linie naszej tabeli.

<td>: Komórka tabeli. Wewnątrz każdego wiersza, komórki definiowane są za pomocą znacznika <td> (od ang. table data). To tutaj umieszczamy konkretne dane, które chcemy przedstawić w tabeli.

W powyższym przykładzie stworzyliśmy tabelę z dwoma wierszami, w których każdy zawiera dwie komórki.

Sekcje tabeli

HTML umożliwia również podział tabeli na sekcje, takie jak nagłówek (<thead>), ciało (<tbody>) i stopka (<tfoot>). Ta struktura może być przydatna, gdy mamy do czynienia z większą ilością danych.

Dodawanie nagłówków tabeli

Często chcemy, aby pierwszy rząd tabeli miał nagłówki, które opisują zawartość kolumn. W tym celu używa się znacznika <th> zamiast <td>.

1<table>
2<tr>
3  <th>Piramida</th>
4  <th>Wysokość (m)</th>
5</tr>
6<!-- Pozostałe rzędy -->
7</table>

Dodawanie ramki i odstępów

Możesz dodać ramki i odstępy atrybutami border i cellspacing, ale specyfikacja HTML uznaje je za przestarzałe. Przeglądarki nadal je rozumieją, jednak ramki i odstępy ustawia się dziś w CSS, co pokazuje krok 4.

1<table border="1" cellspacing="0">
2  <!-- Rzędy i komórki -->
3</table>

1<table border="1">
2<thead>
3<tr>
4<th colspan="3">Piramidy w Gizie</th>
5</tr>
6<tr>
7<th>Piramida</th>
8<th>Faraon</th>
9<th>Pierwotna wysokość (m)</th>
10</tr>
11</thead>
12<tbody>
13<tr>
14<td>Wielka Piramida</td>
15<td>Cheops</td>
16<td>146,6</td>
17</tr>
18<tr>
19<td>Piramida Chefrena</td>
20<td>Chefren</td>
21<td>143,5</td>
22</tr>
23<tr>
24<td>Piramida Mykerinosa</td>
25<td>Mykerinos</td>
26<td>65,5</td>
27</tr>
28</tbody>
29<tfoot>
30<tr>
31<td colspan="2">Najwyższa piramida</td>
32<td>146,6</td>
33</tr>
34</tfoot>
35</table>

Tabele i CSS

W praktyce, często wykorzystuje się CSS razem z HTML, aby nadać tabelom bardziej atrakcyjny wygląd i uczynić je bardziej czytelnymi. Znajomość CSS będzie więc niezbędna, gdy będziemy chcieli stworzyć naprawdę efektowne tabele. Ale o tym opowiemy w kolejnych rozdziałach!

Pamiętaj, tabele to tylko jeden z wielu elementów, które pomagają w prezentowaniu danych na stronie internetowej. Dobrze jest nauczyć się korzystać z nich efektywnie!

Ćwiczenie: Tworzenie tabel HTML

W tym ćwiczeniu nauczysz się tworzyć tabele HTML, które pozwalają na przedstawianie danych w przejrzystej, siatkowej formie składającej się z wierszy i kolumn. Twoim zadaniem będzie stworzenie strony internetowej zawierającej tabelę z danymi, które sam wybierzesz.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Najpierw stwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Tabela HTML</title>
7</head>
8<body>
9    <main>
10        <!-- Tutaj umieścisz swoją tabelę -->
11    </main>
12</body>
13</html>

Krok 2: Dodaj tabelę HTML

Teraz dodaj tabelę wewnątrz elementu <main>. Zacznij od zdefiniowania tabeli oraz pierwszego wiersza z nagłówkami kolumn.

1<table border="1" cellspacing="0">
2    <thead>
3        <tr>
4            <th>Imię</th>
5            <th>Nazwisko</th>
6        </tr>
7    </thead>
8    <tbody>
9        <tr>
10            <td>John</td>
11            <td>Doe</td>
12        </tr>
13        <tr>
14            <td>Jane</td>
15            <td>Doe</td>
16        </tr>
17    </tbody>
18</table>

Krok 3: Dodaj dodatkowe wiersze z danymi

Rozszerz tabelę o dodatkowe wiersze, aby przedstawić więcej danych.

1<tbody>
2    <tr>
3        <td>John</td>
4        <td>Doe</td>
5    </tr>
6    <tr>
7        <td>Jane</td>
8        <td>Doe</td>
9    </tr>
10    <tr>
11        <td>Mary</td>
12        <td>Smith</td>
13    </tr>
14    <tr>
15        <td>James</td>
16        <td>Johnson</td>
17    </tr>
18</tbody>

Krok 4: Dodaj stylizację za pomocą CSS

Teraz dodaj style CSS, aby poprawić wygląd tabeli. Możesz dodać wewnętrzny arkusz stylów w sekcji <head>.

1<head>
2    <style>
3        table {
4            width: 100%;
5            border-collapse: collapse;
6        }
7        th, td {
8            padding: 8px;
9            text-align: left;
10            border: 1px solid #ddd;
11        }
12        th {
13            background-color: #f2f2f2;
14        }
15    </style>
16</head>

Wynik

Po wykonaniu wszystkich kroków twój plik HTML powinien wyglądać następująco:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Tabela HTML</title>
7    <style>
8        table {
9            width: 100%;
10            border-collapse: collapse;
11        }
12        th, td {
13            padding: 8px;
14            text-align: left;
15            border: 1px solid #ddd;
16        }
17        th {
18            background-color: #f2f2f2;
19        }
20    </style>
21</head>
22<body>
23    <main>
24        <table border="1" cellspacing="0">
25            <thead>
26                <tr>
27                    <th>Imię</th>
28                    <th>Nazwisko</th>
29                </tr>
30            </thead>
31            <tbody>
32                <tr>
33                    <td>John</td>
34                    <td>Doe</td>
35                </tr>
36                <tr>
37                    <td>Jane</td>
38                    <td>Doe</td>
39                </tr>
40                <tr>
41                    <td>Mary</td>
42                    <td>Smith</td>
43                </tr>
44                <tr>
45                    <td>James</td>
46                    <td>Johnson</td>
47                </tr>
48            </tbody>
49        </table>
50    </main>
51</body>
52</html>

Teraz masz kompletną stronę internetową z tabelą przedstawiającą dane. Eksperymentuj dalej, dodając więcej wierszy, kolumn lub zmieniając style za pomocą CSS, aby poprawić wygląd tabeli.