Tabele są jednym z podstawowych narzędzi wykorzystywanych w HTML do organizacji danych w formie tabelarycznej. Mogą one być stosowane w różnych kontekstach, od prostych tabel z jednym wierszem i jedną kolumną, po bardziej skomplikowane tabele z wieloma wierszami i kolumnami, które wymagają dodatkowej stylizacji. W tym wpisie blogowym przedstawimy podstawy tworzenia tabel w HTML i omówimy kilka przykładów kodu.
Tworzenie tabeli w HTML
Aby stworzyć tabelę w HTML, należy użyć znacznika „table”, który definiuje początek i koniec tabeli. Wszystkie elementy tabeli umieszcza się pomiędzy znacznikami „table”. Każdy wiersz w tabeli jest definiowany za pomocą znacznika „tr” (ang. table row), a każda komórka w wierszu za pomocą znacznika „td” (ang. table data). Oto przykładowy kod tabeli z jednym wierszem i jedną kolumną:
<table>
<tr>
<td>Przykładowy tekst</td>
</tr>
</table>
W powyższym przykładzie tabela składa się z jednego wiersza i jednej komórki. Tekst „Przykładowy tekst” zostanie wyświetlony wewnątrz tej komórki.
Tworzenie tabeli z wieloma wierszami i kolumnami
Aby stworzyć tabelę z wieloma wierszami i kolumnami, należy umieścić więcej znaczników „tr” i „td”. W każdym wierszu należy umieścić tyle komórek, ile jest kolumn w tabeli. Oto przykładowy kod tabeli z trzema wierszami i trzema kolumnami:
<table>
<tr>
<td>Kolumna 1</td>
<td>Kolumna 2</td>
<td>Kolumna 3</td>
</tr>
<tr>
<td>Wiersz 2, Kolumna 1</td>
<td>Wiersz 2, Kolumna 2</td>
<td>Wiersz 2, Kolumna 3</td>
</tr>
<tr>
<td>Wiersz 3, Kolumna 1</td>
<td>Wiersz 3, Kolumna 2</td>
<td>Wiersz 3, Kolumna 3</td>
</tr>
</table>
W powyższym przykładzie tabela składa się z trzech wierszy i trzech kolumn. Pierwszy wiersz zawiera nagłówki kolumn, a każdy kolejny wiersz zawiera dane dla każdej kolumny.
Dodawanie stylów do tabeli
Aby dodać style do tabeli, można wykorzystać atrybut „style” w każdym z elementów tabeli. Na przykład, aby zmienić kolor tła pierwszej komórki na czerwony, należy dodać styl „background-color: red;” do atrybutu „style” dla elementu „td”. Oto przykładowy kod tabeli z czerwonym tłem pierwszej komórki:
<table>
<tr>
<td style="background-color: red;">Kolumna 1</td>
<td>Kolumna 2</td>
<td>Kolumna 3</td>
</tr>
<tr>
<td>Wiersz 2, Kolumna 1</td>
<td>Wiersz 2, Kolumna 2</td>
<td>Wiersz 2, Kolumna 3</td>
</tr>
<tr>
<td>Wiersz 3, Kolumna 1</td>
<td>Wiersz 3, Kolumna 2</td>
<td>Wiersz 3, Kolumna 3</td>
</tr>
</table>
W powyższym przykładzie pierwsza komórka ma czerwone tło.
Można również zastosować CSS do stylizacji tabeli. Aby to zrobić, należy dodać klasę lub identyfikator do tabeli lub jej elementów i zdefiniować style w arkuszu stylów CSS. Oto przykładowy kod CSS dla tabeli z czerwonym tłem pierwszej komórki:
<style>
.red-cell {
background-color: red;
}
</style>
<table>
<tr>
<td class="red-cell">Kolumna 1</td>
<td>Kolumna 2</td>
<td>Kolumna 3</td>
</tr>
<tr>
<td>Wiersz 2, Kolumna 1</td>
<td>Wiersz 2, Kolumna 2</td>
<td>Wiersz 2, Kolumna 3</td>
</tr>
<tr>
<td>Wiersz 3, Kolumna 1</td>
<td>Wiersz 3, Kolumna 2</td>
<td>Wiersz 3, Kolumna 3</td>
</tr>
</table>
W powyższym przykładzie została dodana klasa „red-cell” dla pierwszej komórki tabeli, a styl został zdefiniowany w arkuszu stylów CSS.
Podsumowanie
Tabele są ważnym narzędziem w HTML do organizacji danych w formie tabelarycznej. Aby stworzyć tabelę, należy użyć znaczników „table”, „tr” i „td”. Można również dodawać style do tabeli za pomocą atrybutu „style” lub zastosować CSS. Pamiętaj, że tabela powinna być zawsze dostosowana do swojej treści, a stylizacja powinna być subtelna i łatwa do odczytania.