Trorzenie 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.

Trorzenie responsywnych tabel

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 dancyh, 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:

  1. thead - nagłówki kolumn,
  2. tbody - właściwa treść tabeli:
    • tr - wiersze tabeli
    • td - komórki tabeli

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.

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.

Powiadomienie cookies

Strona lukaszbacik.pl zapisuje pliki cookies na komputerach odwiedzających ją internautów. Czytaj więcej.