Na koji pristup se naginjete prilikom kreiranja…

Prilikom kreiranja tabela u interfejsu, pridržavam se sledećeg pristupa:

Korišćenje semantičkih HTML tagova: Koristim tagove <table>, <thead>, <tbody>, <tr>, <th>, <td> za pravilno strukturisanu oznaku podataka. To poboljšava pristupačnost, SEO i razumevanje strukture tabele od strane pretraživača i pomoćnih tehnologija.

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Ime</th>
      <th>Starost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Ivan</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Marija</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Odvajanje stilova od strukture (CSS): Stilizovanje tabele (granice, razmaci, boje, poravnanje) realizujem pomoću CSS-a. Izbegavam korišćenje inline stilova i atributa <table border="1">.

table {
  border-collapse: collapse; /* Spajanje granica ćoškova */
  width: 100%;
}

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

th {
  background-color: #f2f2f2;
}

Prilagodljivost: Kreiram tabele koje se pravilno prikazuju na različitim uređajima i veličinama ekrana. Za složenije tabele koristim pristupe kao što su:
- Sakrivanje sekundarnih kolona na uskim ekranima.
- Pretvaranje redova u kartice ili liste na mobilnim uređajima.
- Korišćenje svojstava flex-wrap ili overflow: auto za horizontalno skrolovanje.
- Primenu CSS Grid-a za prilagodljivo raspoređivanje ćoškova.
Pristupačnost (Accessibility): Obracam pažnju na pristupačnost za korisnike sa ograničenim mogućnostima, koristeći:
- Naslove kolona (<th>) sa atributom scope="col".
- Naslov tabele sa <caption> ili atributom aria-label na <table> elementu.
- Kontrastne boje.
- Ispravnu navigaciju putem tastature.
Performanse: Za velike količine podataka koristim virtualizaciju redova ili paginaciju, kako ne bih učitavao i crtao sve podatke odjednom na klijentu.
Korišćenje biblioteka (po potrebi): U složenim projektima ili kada je potrebna proširena funkcionalnost (sortiranje, filtriranje, uređivanje), mogu koristiti gotove UI biblioteke (npr. DataTables, React Table, Ant Design Table), ali sa svesnim izborom i razumevanjem njihovih principa rada.

Na koji pristup se naginjete prilikom kreiranja tabela u bloku interfejsa?