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:
| Imię | Nazwisko | |-------|----------| | John | Doe | | Jane | Doe |
Kod HTML dla takiej tabeli mógłby wyglądać tak:
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><table></table><tr><tr></tr><td><td>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><tbody><tfoot>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><td>1<table>
2<tr>
3 <th>Planeta</th>
4 <th>Odległość od Słońca (km)</th>
5</tr>
6<!-- Pozostałe rzędy -->
7</table>Dodawanie Ramki i Odstępów
Możesz dodać ramki i odstępy między komórkami, używając atrybutów border i cellspacing, chociaż dzisiaj często stylizuje się tabele za pomocą CSS.
1<table border="1" cellspacing="0">
2 <!-- Rzędy i komórki -->
3</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>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.