Ostatnia aktualizacja 19 czerwca, 2023
Znajomość HTML-a i CSS-a wchodzi w skład kluczowych umiejętności w wielu specjalizacjach. Jest to łatwy w nauce język znaczników, który przydaje się nie tylko w pracy programistów Frontend, ale też w pracy UX Designerów oraz innych specjalistów spoza branży IT (np. w SEO).
Sprawdź: Jak zrobić stronę internetową w HTML-u?
Według danych z ankiety przeprowadzonej przez Stack Overflow, HTML uplasował się wysoko na liście popularności technologii w IT. Był drugim najpopularniejszym językiem (55,08%) wśród wszystkich respondentów, natomiast pierwsze miejsce zajął wśród badanych, którzy dopiero uczą się kodować (62,59%).
HTML-a, jak zresztą każdego innego języka, najskuteczniej uczyć się od razu w praktyce. W niniejszym tekście omówmy, jak zbudowana jest tabela w HTML-u, jak ją modyfikować i dodawać style.
Tabela w HTML-u – podstawy
Tabela w HTML-u to jedno z prostszych zadań, ponieważ w wersji podstawowej wymaga zastosowania wyłącznie kilku tagów: <table>, <tr>, <th> i <td>.
Podstawowy szablon, który można rozbudować do pełnej tabeli, wygląda następująco:
<table>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
<tr>
<td>Dane 1</td>
<td>Dane 2</td>
</tr>
</table>Tagi <table> i </table> sygnalizują miejsce rozpoczęcia i zakończenia kodu tabeli. Tag <tr> tworzy rząd, <th> tworzy komórkę nagłówka, a <td> tworzy komórkę z danymi. Liczba rzędów i komórek zależy od tego, co musimy przedstawić w tabeli. Wypełniając tabelę danymi, możemy uzyskać np.:
<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>Anna</td>
<td>Nowak</td>
<td>25</td>
</tr>
</table>Co na stronie wyświetli się w następujący sposób:
| Imię | Nazwisko | Wiek |
|---|---|---|
| Jan | Kowalski | 30 |
| Anna | Nowak | 25 |
Style CSS w tabeli
Możemy również dodawać style do tabeli za pomocą CSS-a. Aby dodać granice do komórek, możemy zastosować następujący kod CSS:
<style>
table, th, td {
border: 1px solid black;
}
</style>Dokładne rozmieszczenie CSS-a zależy od reszty struktury strony. Można go umieścić w tagu <head> albo bezpośrednio w tagu <style> w ciele dokumentu.
Jeśli chcemy dodać padding (wewnętrzne marginesy) do komórek, możemy zaktualizować nasz CSS w następujący sposób:
<style>
table, th, td {
border: 1px solid black;
padding: 10px;
}
</style>Dalsza część tekstu znajduje się pod wideo:
Rozbudowane tabele w HTML-u
Rozbudowane tabele HTML mogą składać się z wielu różnych elementów:
- nagłówki –
<thead> - ciała –
<tbody> - stopki tabeli –
<tfoot>
Wyżej wymienionych tagów używa się do definiowania poszczególnych sekcji tabeli w HTML. Każdy z tych tagów pełni specyficzną rolę:
<thead>służy do grupowania nagłówkowych zawartości w tabeli HTML. Wszystko, co jest umieszczone pomiędzy otwierającym i zamykającym tagiem<thead>, jest traktowane jako część nagłówka tabeli. W tym miejscu zawiera się również podział na komórki i wiersze.<tbody>używa się go do grupowania głównej części zawartości tabeli, czyli ciała tabeli. W praktyce jest to miejsce, w którym umieszcza się większość danych. Podobnie jak w<thead>, zawartość jest zazwyczaj podzielona na wiersze (<tr>) i komórki (<td>).<tfoot>używa się go do grupowania zawartości stopki tabeli. W tej sekcji można umieścić jakiekolwiek informacje podsumowujące dane w tabeli. Stopka jest zazwyczaj renderowana jako ostatnia część tabeli, choć w kodzie HTML umieszcza się ją przed<tbody>.
Powyższe tagi nie tylko pomagają strukturalnie zorganizować tabelę, ale także są użyteczne przy stylizowaniu tabeli za pomocą CSS. Docenią je również programiści Frontend przy manipulacji tabelą za pomocą JavaScriptu. Na przykład, programista może chcieć zastosować pewien styl tylko do sekcji nagłówka tabeli lub tylko do jej ciała. Użycie tych tagów umożliwia łatwe osiągnięcie takiego celu.
Czytaj także:
Node JS REST API – co to jest i jak je zaprojektować?
Najlepsze tablety dla dzieci w cenach do 300 zł, 500 zł i wyższych
HTTP request, czyli jak komunikować się z API?
