Tworzenie responsywnych tabel
Używanie tabel na stronie internetowej czasem sprawia nieco problemów, zwłaszcza, gdy nasz design strony jest elastyczny, responsywny. O ile na pełnowymiarowych komputerach nie sprawia to większych problemów, o tyle na urządzeniach mobilnych potrafi nieco popsuć odbiór danych z tabeli. Dzisiaj postaram się opisać jedno z przykładowych rozwiązań tego kłopotu.
ŁukaszPodziel się artykułem:
Po co stosujemy tabele?
Kiedyś, w średniowieczu :), tabelki wykorzystywano do tworzenia całości strony. Straszne, prawda? Później, wraz z rozwojem styli CSS i planami na CSS3, deweloperzy dostrzegli w tym potencjał i zaczęto tworzyć strony bardziej elegancko – „na div’ach”. Same tabele obecnie wykorzystuje się do przedstawienia danych, np. statystyk. To jest prawidłowe zastosowanie tabel w dzisiejszym procesie tworzenia stron internetowych w technice flexbox, o której pisałem jakiś czas temu.
Praktyka,
ale zanim przejdziemy do przykładu, krótko teoretycznie.
Tabela składa się z następujących elementów:
- thead – nagłówki kolumn,
- tbody – właściwa treść tabeli:
- tr – wiersze tabeli
- td – komórki tabeli
Jeśli chcesz, mogę Cię informować o ciekawych artykułach ze strony 😉
Przejdźmy do właściwej części, czyli przykład tabeli. Na pocczątek szablon podstawowej tabeli:
<table>
<thead>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
<th>Nagłówek 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Treść 1</td>
<td>Treść 2</td>
<td>Treść 3</td>
</tr>
<tr>
<td>Treść 4</td>
<td>Treść 5</td>
<td>Treść 6</td>
</tr>
</tbody>
</table>Proste prawda? Nie, jeśli przyjdzie nam przedstawić więcej kolumn lub więcej danych, które mają być ładnie wyświetlone na urządzeniach mobilnych.
Tutaj z pomocą wspomniany wyżej, flexbox, który ładnie nam ostyluje tabelkę na urządzeniach mobilnych.
dark
Podsumowanie
Powyższy przykład pozwoli na poprawne wyświetlenie tabeli na urządzeniach z dużym ekranem, a także na urządzeniach mobilnych. Do dzieła.
