Tabela(ang. Table)

Tabele pozwalają na ustrukturyzowanie informacji, dzięki czemu użytkownikowi łatwiej jest je porównywać i analizować. Niektóre tabele pozwalają także na wykonywanie prostych akcji, np. przechodzenie do innej strony.

Stanowisko Obszar Lokalizacja Spółka
Kierownik projektu Informatyka Warszawa, Płock PKN Orlen
Kierownik projektu Informatyka Warszawa, Płock PKN Orlen
Kierownik projektu Informatyka Warszawa, Płock PKN Orlen 

<table class="table">
    <thead>
      <tr>
        <th class="table__header-col">Stanowisko</th>
        <th class="table__header-col">Obszar</th>
        <th class="table__header-col">Lokalizacja</th>
        <th class="table__header-col">Spółka</th>
        <th class="table__header-col"></th>

      </tr>
    </thead>
    <tbody>
      <tr class="table__row">
        <td class="table__col">Kierownik projektu</td>
        <td class="table__col">Informatyka</td>
        <td class="table__col">Warszawa, Płock</td>
        <td class="table__col">PKN Orlen</td>
        <td class="table__col align-to-right">
            <button class="link-button link-button--right-icon link-button--red">
                <span class="button__label">Więcej</span>
                <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
            </button>
        </td>
      </tr>
      <tr class="table__row">
        <td class="table__col">Kierownik projektu</td>
        <td class="table__col">Informatyka</td>
        <td class="table__col">Warszawa, Płock</td>
        <td class="table__col">PKN Orlen</td>
        <td class="table__col align-to-right">
            <button class="link-button link-button--right-icon link-button--red">
                <span class="button__label">Więcej</span>
                <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
            </button>
        </td>
      </tr>
      <tr class="table__row">
        <td class="table__col">Kierownik projektu</td>
        <td class="table__col">Informatyka</td>
        <td class="table__col">Warszawa, Płock</td>
        <td class="table__col">PKN Orlen</td>
        <td class="table__col align-to-right">
            <button class="link-button link-button--right-icon link-button--red">
                <span class="button__label">Aplikuj</span>
                <i aria-hidden="true" class="mdi icon mdi-arrow-up-bold"></i>
            </button>
        </td>
      </tr>
    </tbody>
  </table>

  1. Nagłówek

    Zawiera tytuły poszczególnych kolumn. Tytuły powinny być jak najkrótsze, ale jednocześnie jednoznaczne. Rekomendowany limit to 1 linijka na wszystkich rozdzielczościach. Należy unikać skrótów. Tytułom nie powinny towarzyszyć ikony. Nagłówek od treści tabeli oddziela separator.

  2. Treść tabeli

    Na treść tabeli składają się wiersze oddzielone od siebie separatorami. Wewnątrz wierszy można umieszczać tekst, a w przypadku niektórych tabel także linki.

W tabeli klikalne mogą być jedynie linki.

Warianty

  1. Tabela interaktywna

    Zazwyczaj stosowana jest do promowania pewnych treści, np. ofert pracy, listy wydarzeń. Przestrzeń pomiędzy informacjami jest większa niż w przypadku tabel danowych. Niejednokrotnie zawiera linki, które przenoszą użytkownika na inną stronę. Tabela interaktywna nie wymaga scrollowania na mniejszych rozdzielczościach a jej treść może wówczas przybrać formę kart ułożonych jedna nad drugą.

    2. Stanowisko Obszar Lokalizacja Spółka
    Kierownik projektu Informatyka Warszawa, Płock PKN Orlen
    Kierownik projektu Informatyka Warszawa, Płock PKN Orlen
    Kierownik projektu Informatyka Warszawa, Płock PKN Orlen 
    
<table class="table">
    <thead>
      <tr>
        <th class="table__header-col">Stanowisko</th>
        <th class="table__header-col">Obszar</th>
        <th class="table__header-col">Lokalizacja</th>
        <th class="table__header-col">Spółka</th>
        <th class="table__header-col"></th>

      </tr>
    </thead>
    <tbody>
      <tr class="table__row">
        <td class="table__col">Kierownik projektu</td>
        <td class="table__col">Informatyka</td>
        <td class="table__col">Warszawa, Płock</td>
        <td class="table__col">PKN Orlen</td>
        <td class="table__col align-to-right">
            <button class="link-button link-button--right-icon link-button--red">
                <span class="button__label">Więcej</span>
                <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
            </button>
        </td>
      </tr>
      <tr class="table__row">
        <td class="table__col">Kierownik projektu</td>
        <td class="table__col">Informatyka</td>
        <td class="table__col">Warszawa, Płock</td>
        <td class="table__col">PKN Orlen</td>
        <td class="table__col align-to-right">
            <button class="link-button link-button--right-icon link-button--red">
                <span class="button__label">Więcej</span>
                <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
            </button>
        </td>
      </tr>
      <tr class="table__row">
        <td class="table__col">Kierownik projektu</td>
        <td class="table__col">Informatyka</td>
        <td class="table__col">Warszawa, Płock</td>
        <td class="table__col">PKN Orlen</td>
        <td class="table__col align-to-right">
            <button class="link-button link-button--right-icon link-button--red">
                <span class="button__label">Aplikuj</span>
                <i aria-hidden="true" class="mdi icon mdi-arrow-up-bold"></i>
            </button>
        </td>
      </tr>
    </tbody>
  </table>

  2. Tabela danowa

    Ten rodzaj tabel zawiera zazwyczaj duże ilości specjalistycznych danych, np. informacje o dywidendach czy hurtowe ceny paliw. Przestrzeń pomiędzy danymi jest mniejsza niż w przypadku tabel responsywnych. Tabela danowa nie zawiera interaktywnych elementów.

Hurtowe ceny paliw
Benzyna bezołowiowa - 95 3 860,00 zł/m3
Benzyna bezołowiowa - 95 3 860,00 zł/m3
Benzyna bezołowiowa - 95 3 860,00 zł/m3 

<div style="width: 100%;" class="grid">
  <div class="grid__col m-col--12 t-col--6 d-ind--3 d-col--6">
    <table class="table--small">
      <thead>
        <tr>
          <th class="table__header-col">Hurtowe ceny paliw</th>
          <th class="table__header-col"></th>
        </tr>
      </thead>
      <tbody>
        <tr class="table__row">
          <td class="table__col">Benzyna bezołowiowa - 95</td>
          <td class="table__col align-to-right"><span class="text--semibold">3 860,00 zł/m3</span></td>
        </tr>
        <tr class="table__row">
          <td class="table__col">Benzyna bezołowiowa - 95</td>
          <td class="table__col align-to-right"><span class="text--semibold">3 860,00 zł/m3</span></td>
        </tr>
        <tr class="table__row">
          <td class="table__col">Benzyna bezołowiowa -  95</td>
          <td class="table__col align-to-right"><span class="text--semibold">3 860,00 zł/m3</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Zasady stosowania

Krótkie i jednoznaczne tytuły kolumn

W miarę możliwości należy stosować krótkie, zwięzłe, ale jednoznaczne tytuły, które jasno określają zawartość tabeli.

Tytuł kolumny wyrównany do lewej, rozpoczęty dużą literą i niezakończony interpunkcją

Symbol jednostki zawarty w tytule kolumny

W wielu przypadkach korzystne może być umieszczenie symbolu jednostki w tytule kolumny. W ten sposób nie trzeba go już powtarzać w każdym wierszu a tabela zyskuje na przejrzystości.

Treść wyrównana do lewej

Zawartość tabeli powinna być zawsze wyrównana do lewej z wyjątkiem liczb, które można ze sobą porównywać.

Liczby wyrównane do prawej

Zaleca się, aby liczby, które można ze sobą porównywać (np. ceny, procenty) były wyrównane do prawej. Nie dotyczy to liczb, których nie można ze sobą porównywać pod względem matematycznym, (np. kodów pocztowych).

Treść wycentrowana w pionie i rozpoczęta dużą literą

Spójnie stosowanie liczb dziesiętnych

W obrębie jednej tabeli zaleca się pokazywanie tej samej liczby cyfr po przecinku w każdym przypadku.

Kreska symbolizująca brak wartości

Jeśli jakaś komórka jest pusta, należy zastosować kreskę. Dzięki temu użytkownik rozumie, że nie jest to błąd systemu.

Wykropkowany tytuł kolumny lub zawartość tabeli

W przypadku dłuższego tytułu lub zawartości tabeli należy zawinąć tekst. Można również zastosować odnośnik (*) i dopisać wyjaśnienie pod tabelą.