Tworzenie tabel w HTML to jedno z podstawowych zadań, które warto opanować, jeśli chcesz budować bardziej zorganizowane i czytelne strony internetowe. Dzięki tabelom możesz w prosty sposób przedstawiać dane w formie uporządkowanej, co jest szczególnie przydatne w przypadku prezentacji wyników, cenników czy zestawień. W tym artykule dowiesz się, jak zrobić tabelę w HTML, a także poznasz najważniejsze elementy, z których składa się tabela.
Jak działa tabela w HTML?
Tabela w HTML składa się z kilku kluczowych elementów. Każda tabela rozpoczyna się i kończy tagiem <table>. Wewnątrz tej struktury znajdziemy wiersze oznaczone tagiem <tr> oraz komórki tabeli, które mogą być nagłówkami (tag <th>) lub zwykłymi komórkami danych (tag <td>).
Struktura tabeli w HTML
Aby zrozumieć, jak zrobić tabelę w HTML, warto przyjrzeć się podstawowej strukturze. Poniżej znajduje się przykład prostej tabeli, która zawiera nagłówki oraz kilka komórek danych.
<table>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Wiek</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>30</td>
</tr>
<tr>
<td>Agnieszka</td>
<td>Nowak</td>
<td>25</td>
</tr>
</table>
Wyjaśnienie kodu:
-
<table>– otwiera i zamyka całą tabelę. -
<tr>– oznacza wiersz w tabeli. Każda tabela składa się z kilku wierszy. -
<th>– komórki nagłówków tabeli (stosowane zazwyczaj w pierwszym wierszu). -
<td>– standardowe komórki danych, które wypełniają kolejne wiersze.
Dodatkowe atrybuty tabel w HTML
Podstawowa tabela w HTML działa dobrze, ale można ją dostosować za pomocą dodatkowych atrybutów, aby wyglądała bardziej estetycznie i była łatwiejsza w odbiorze.
Ustawienie szerokości i obramowania:
Aby dodać obramowanie do tabeli oraz określić szerokość kolumn, możemy dodać odpowiednie atrybuty.
<table border=”1″ width=”100%”>
<tr>
<th>Produkt</th>
<th>Cena</th>
</tr>
<tr>
<td>Kawa</td>
<td>15 PLN</td>
</tr>
<tr>
<td>Herbata</td>
<td>10 PLN</td>
</tr>
</table>
Wyjaśnienie atrybutów:
-
border="1"– ustawia obramowanie wokół komórek tabeli. Liczba określa grubość obramowania. -
width="100%"– ustawia szerokość tabeli na 100% dostępnej przestrzeni.
Scalanie komórek – atrybuty colspan i rowspan
Czasami zachodzi potrzeba połączenia dwóch lub więcej komórek. W takich sytuacjach używamy atrybutów colspan (łączenie kolumn) i rowspan (łączenie wierszy).
<table border=”1″>
<tr>
<th colspan=”2″>Nagłówek połączony</th>
</tr>
<tr>
<td>Kolumna 1</td>
<td>Kolumna 2</td>
</tr>
<tr>
<td rowspan=”2″>Połączony wiersz</td>
<td>Komórka 1</td>
</tr>
<tr>
<td>Komórka 2</td>
</tr>
</table>
Wyjaśnienie:
-
colspan="2"– komórka nagłówka rozciąga się na dwie kolumny. -
rowspan="2"– komórka jest połączona na dwóch wierszach.
Podsumowanie
Tworzenie tabel w HTML to nie tylko przydatna umiejętność, ale również podstawa przy organizowaniu danych na stronie internetowej. Wiedza o tym, jak zrobić tabelę w HTML, pozwala na uporządkowane i przejrzyste przedstawienie informacji. Warto pamiętać o podstawowej strukturze tabeli oraz o możliwościach stylizacji za pomocą CSS, aby prezentowane dane były czytelne i estetyczne.
