Tabele w HTML służą do prezentowania danych w uporządkowanej strukturze, podzielonej na wiersze i kolumny. Każda tabela składa się z kilku kluczowych elementów, które pozwalają zorganizować informacje w sposób czytelny i łatwy do zrozumienia. Poniżej znajdziesz szczegółowy opis głównych elementów tabeli w HTML oraz przykłady ich zastosowania.
Główne elementy tabeli w HTML
-
<table>– Ten znacznik otwiera tabelę i obejmuje wszystkie elementy tabeli, takie jak wiersze i komórki. -
<tr>(table row) – Definiuje wiersz w tabeli. Każda tabela składa się z co najmniej jednego wiersza. -
<td>(table data) – Znacznik ten tworzy komórkę w tabeli. Komórki są miejscami, gdzie przechowywane są dane. -
<th>(table header) – Oznacza komórki nagłówkowe tabeli. Domyślnie tekst w komórkach nagłówkowych jest pogrubiony i wyśrodkowany. -
<thead>– Definiuje sekcję nagłówka tabeli. Może zawierać jeden lub więcej wierszy nagłówka. -
<tbody>– Oznacza sekcję ciała tabeli. Zawiera główne dane tabeli. -
<tfoot>– Używany do określenia sekcji stopki tabeli, zwykle zawiera podsumowanie lub inne informacje.
Dodatkowe atrybuty tabeli
-
Atrybut
colspan– Umożliwia połączenie kilku kolumn w jedną komórkę. -
Atrybut
rowspan– Łączy kilka wierszy w jedną komórkę. -
Atrybut
border– Ustawia obramowanie tabeli. Bez tego atrybutu tabela nie wyświetla żadnych linii rozdzielających komórki i wiersze. -
<caption>– Używany do umieszczenia tytułu tabeli.
Semantyczne zastosowanie tabel
Tabele są używane nie tylko do wyświetlania danych, ale także do zapewnienia struktury dla informacji, które mają być czytelne zarówno dla użytkowników, jak i technologii wspomagających, takich jak czytniki ekranów. Ważne jest, aby stosować znaczniki tabel zgodnie z ich przeznaczeniem, a nie do układu wizualnego.
Ćwiczenia praktyczne
Ćwiczenie 1: Tworzenie prostej tabeli
Stwórz tabelę w HTML, która będzie miała trzy kolumny i dwa wiersze. Umieść w tabeli dane dotyczące dwóch produktów (nazwa, cena, ilość). Zastosuj znaczniki <table>, <tr>, <td>.
Ćwiczenie 2: Dodanie nagłówków do tabeli
Zaktualizuj tabelę z poprzedniego ćwiczenia, dodając wiersz nagłówkowy, w którym będą tytuły kolumn (nazwa produktu, cena, ilość). Użyj znacznika <th>.
Ćwiczenie 3: Użycie atrybutów colspan i rowspan
Stwórz tabelę o czterech kolumnach i trzech wierszach. Połącz komórki w pierwszym wierszu za pomocą atrybutu colspan, aby utworzyć nagłówek, który rozciąga się na całą szerokość tabeli. W drugim wierszu użyj atrybutu rowspan, aby połączyć pierwszą kolumnę w pionie.
Ćwiczenie 4: Dodanie sekcji thead, tbody i tfoot
Stwórz tabelę, która przedstawia wyniki egzaminów trzech uczniów z dwóch przedmiotów. Podziel tabelę na trzy części: nagłówkową (nazwy kolumn: uczeń, matematyka, informatyka), ciała (dane uczniów) i stopki (średnia ocen). Wykorzystaj znaczniki <thead>, <tbody>, <tfoot>.