Z pewnością jednym z istotnych elementów, które można tworzyć w HTML, są tabele HTML. Przede wszystkim tabele pozwalają na przejrzyste przedstawienie danych w postaci wierszy i kolumn. W tym artykule omówimy, jak tworzyć tabele w HTML, wraz z przykładami.
Podstawowa Struktura Tabeli
Tabele w HTML tworzymy za pomocą elementu <table>
. Składa się ona z kilku podstawowych tagów:
<table>
: Główny tag definiujący tabelę<tr>
(table row): Definiuje wiersz tabeli<th>
(table header): Definiuje nagłówek kolumny<td>
(table data): Definiuje komórkę tabeli
<table>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Wiek</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>28</td>
</tr>
<tr>
<td>Anna</td>
<td>Nowak</td>
<td>22</td>
</tr>
</table>
Przykład
Imię | Nazwisko | Wiek |
---|---|---|
Jan | Kowalski | 28 |
Joanna | Nowak | 22 |
W powyższym przykładzie mamy tabelę z trzema kolumnami: „Imię”, „Nazwisko” i „Wiek”. Pierwszy wiersz zawiera nagłówki kolumn (<th>
), a kolejne wiersze zawierają dane (<td>
).
Atrybuty Tabeli
HTML oferuje różne atrybuty, które pomagają w stylizacji i zarządzaniu tabelami. Oto kilka z nich:
border
: Ustawia grubość ramki wokół tabelicellpadding
: Ustawia odstęp między zawartością komórki a jej krawędziącellspacing
: Ustawia odstęp między komórkami
Przykład z Atrybutami
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Wiek</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>28</td>
</tr>
<tr>
<td>Joanna</td>
<td>Nowak</td>
<td>22</td>
</tr>
</table>
Imię | Nazwisko | Wiek |
---|---|---|
Jan | Kowalski | 28 |
Joanna | Nowak | 22 |
W powyższym przykładzie użyliśmy atrybutów cellpadding
i cellspacing
, aby zwiększyć odstępy wewnątrz komórek oraz między nimi.
Przykład Zagnieżdżonej Tabeli
Zagnieżdżone tabele HTML
Tabele mogą być zagnieżdżane wewnątrz innych tabel, co pozwala na tworzenie bardziej skomplikowanych struktur danych.
<table border="1">
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Adres</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>
<table border="1">
<tr>
<th>Ulica</th>
<th>Miasto</th>
</tr>
<tr>
<td>Wiosenna 5</td>
<td>Warszawa</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Joanna</td>
<td>Nowak</td>
<td>
<table border="1">
<tr>
<th>Ulica</th>
<th>Miasto</th>
</tr>
<tr>
<td>Letnia 8</td>
<td>Kraków</td>
</tr>
</table>
</td>
</tr>
</table>
Imię | Nazwisko | Adres | ||||
---|---|---|---|---|---|---|
Jan | Kowalski |
|
||||
Joanna | Nowak |
|
W tym przykładzie w kolumnie „Adres” dla każdej osoby znajduje się zagnieżdżona tabela zawierająca informacje o ulicy i mieście.
Kolspan i Rowspan
Atrybuty colspan
i rowspan
pozwalają na scalanie komórek w tabeli.
colspan
: Łączy komórki w poziomie (kolumny)rowspan
: Łączy komórki w pionie (wiersze)
Przykład z Colspan i Rowspan
<table border="1">
<tr>
<th colspan="2">Nagłówek Kolumny 1 i 2</th>
<th>Nagłówek Kolumny 3</th>
</tr>
<tr>
<td rowspan="2">Scalona Komórka 1</td>
<td>Komórka 2</td>
<td>Komórka 3</td>
</tr>
<tr>
<td>Komórka 4</td>
<td>Komórka 5</td>
</tr>
</table>
Nagłówek Kolumny 1 i 2 | Nagłówek Kolumny 3 | |
---|---|---|
Scalona Komórka 1 | Komórka 2 | Komórka 3 |
Komórka 4 | Komórka 5 |
W powyższym przykładzie pierwsza komórka pierwszego wiersza łączy dwie kolumny dzięki colspan="2"
, a pierwsza komórka drugiego wiersza łączy dwa wiersze dzięki rowspan="2"
.
Stylizacja Tabeli za pomocą CSS
Aby bardziej zaawansowanie stylizować tabele, warto użyć CSS (Cascading Style Sheets).
Kolor tabeli HTML
Aby ustawić kolor tła dla całej tabeli, możesz użyć właściwości background-color
w stylach CSS.
table { background-color: #eee; }
Poniżej bardziej rozbudowany pomysł na nadawanie koloru tła tabeli HTML.
table {
width: 100%;
border-collapse: collapse;
background-color: #f0f8ff; /* Kolor tła całej tabeli */
}
th, td {
border: 1px solid #00bfff;
padding: 8px;
text-align: left;
color: #0000cd;
}
th {
background: linear-gradient(to bottom, #00f, #00BFFF); /* Gradient dla nagłówków */
color: white; /* Kolor tekstu nagłówków */
}
tr:nth-child(even) {
background-color: #e0ffff; /* Kolor tła dla parzystych wierszy */
}
tr:nth-child(odd) {
background-color: #ffffff; /* Kolor tła dla nieparzystych wierszy */
}
W tym przykładzie:
background-color: #f0f8ff;
ustawia kolor tła całej tabelibackground: linear-gradient(to bottom, #00f, #00bfff);
ustawia pionowy gradient niebiesko-turkusowy dla nagłówkówcolor: white;
ustawia kolor tekstu w nagłówkach na białycolor: #0000cd;
ustawia kolor tekstu w komórkachborder: 1px solid #00bfff;
ustawia kolor obramowaniatr:nth-child(even) { background-color: #e0ffff; }
ustawia kolor tła dla parzystych wierszy na jasnoniebieskitr:nth-child(odd) { background-color: #ffffff; }
ustawia kolor tła dla nieparzystych wierszy na biały
Imię | Nazwisko | Wiek |
---|---|---|
Jan | Kowalski | 15 |
Jonna | Nowak | 14 |
Adam | Wiśniewski | 25 |
Obramowanie tabeli HTML
Aby dodać obramowanie do tabeli, można użyć właściwości border
w CSS. Można ustawić obramowanie dla całej tabeli, nagłówków i komórek danych.
table { border: 1px dotted black; }
Poniżej pomysł na dodanie obramowania dla tabeli HTML.
table {
width: 100%;
border-collapse: collapse; /* Usuwa odstępy między komórkami */
}
th, td {
border: 1px dashed green; /* Obramowanie dla komórek nagłówków i danych */
padding: 8px;
text-align: left;
}
W tym przykładzie:
border: 1px dashed green;
dodaje cienkie, czarne obramowanie do każdej komórki w tabeliborder-collapse: collapse;
usuwa odstępy między komórkami, łącząc ich obramowania w jedno
Imię | Nazwisko | Wiek |
---|---|---|
Jan | Kowalski | 28 |
Joanna | Nowak | 22 |
Adam | Wiśniewski | 25 |
Gotowa tabela HTML – kod
Przykład ze stylem w CSS.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizowana Tabela</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
background-color: #eee;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #fff;
}
</style>
</head>
<body>
<table>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Wiek</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>28</td>
</tr>
<tr>
<td>Joanna</td>
<td>Nowak</td>
<td>22</td>
</tr>
<tr>
<td>Adam</td>
<td>Wiśniewski</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Imię | Nazwisko | Wiek |
---|---|---|
Jan | Kowalski | 28 |
Joanna | Nowak | 22 |
Adam | Wiśniewski | 25 |
W tym przykładzie zastosowałem stylizację za pomocą CSS, aby tabela była bardziej estetyczna. Dodatkowo użyłem border-collapse
do zlikwidowania odstępów między komórkami oraz nth-child
do naprzemiennego kolorowania wierszy.
Tabele HTML – podsumowanie
Bez wątpienia tabele w HTML są potężnym narzędziem do organizowania i prezentowania danych. Po pierwsze poczynajac od podstawowych tabel z nagłówkami i komórkami, przez bardziej zaawansowane struktury z zagnieżdżonymi tabelami, aż po zaawansowaną stylizację za pomocą CSS – możliwości są niemal nieograniczone. Dzięki temu przewodnikowi masz solidne podstawy do tworzenia własnych tabel w HTML.