K akému prístupu sa prikláňate pri vytváraní tabuliek…

Pri vytváraní tabuliek v rozhraní sa riadim nasledovným prístupom:

Použitie semantických HTML tagov: Používam tagy <table>, <thead>, <tbody>, <tr>, <th>, <td> na správne štrukturálne označenie údajov. To zlepšuje dostupnosť, SEO a pochopenie štruktúry tabuľky pre prehliadače a pomocné technológie.

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Meno</th>
      <th>Vek</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Ivan</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Maria</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Oddelenie štýlov od štruktúry (CSS): Formátovanie tabuľky (hrany, odsadenia, farby, zarovnanie) realizujem pomocou CSS. Vyhýbam sa používaniu inline štýlov a atribútov <table border="1">.

table {
  border-collapse: collapse; /* Zlúčenie hraníc buniek */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

Prispôsobivosť: Vytváram tabuľky, ktoré sa správne zobrazujú na rôznych zariadeniach a veľkostiach obrazovky. Pre zložité tabuľky používam prístupy ako:
- Skrytie sekundárnych stĺpcov na úzkych obrazovkách.
- Premenu riadkov na karty alebo zoznamy na mobilných zariadeniach.
- Použitie vlastností flex-wrap alebo overflow: auto pre horizontálne posúvanie.
- Aplikovanie CSS Grid pre prispôsobené rozloženie buniek.
Prístupnosť (Accessibility): Venujem pozornosť dostupnosti pre používateľov s obmedzenými možnosťami, využívajúc:
- Nadpisy stĺpcov (<th>) s atribútom scope="col".
- Nadpis tabuľky s <caption> alebo atribútom aria-label na elemente <table>.
- Kontrastné farby.
- Správnu navigáciu pomocou klávesnice.
Výkon: Pre veľké objemy dát používam virtualizáciu riadkov alebo stránkovanie, aby som nezobrazoval a nenačítaval všetky údaje naraz na klientovi.
Použitie knižníc (podľa potreby): V zložitých projektoch alebo pri potrebe rozšírenej funkcionality (zoradenie, filtrovanie, úprava) môžem použiť hotové UI knižnice (napríklad DataTables, React Table, Ant Design Table), ale s vedomým výberom a pochopením ich princípov práce.

K akému prístupu sa prikláňate pri vytváraní tabuliek v bloku rozhrania?