Para qual abordagem você se inclina ao criar tabelas…

Ao criar tabelas na interface, sigo a seguinte abordagem:

Utilização de tags HTML semânticas: Uso as tags <table>, <thead>, <tbody>, <tr>, <th>, <td> para uma estrutura correta dos dados. Isto melhora a acessibilidade, SEO e a compreensão da estrutura da tabela pelos navegadores e tecnologias assistivas.

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Idade</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>

Separação de estilos da estrutura (CSS): Aplico estilos à tabela (bordas, margens, cores, alinhamento) usando CSS. Evito o uso de estilos inline e atributos <table border="1">.

table {
  border-collapse: collapse; /* Colapsar bordas das células */
  width: 100%;
}

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

th {
  background-color: #f2f2f2;
}

Adaptabilidade: Crio tabelas que são exibidas corretamente em diferentes dispositivos e tamanhos de tela. Para tabelas complexas, uso abordagens como:
- Esconder colunas secundárias em telas estreitas.
- Transformar linhas em cartões ou listas em dispositivos móveis.
- Uso de flex-wrap ou overflow: auto para rolagem horizontal.
- Uso de CSS Grid para disposição adaptativa das células.
Acessibilidade: Dou atenção à acessibilidade para utilizadores com limitações, usando:
- Cabeçalhos de coluna (<th>) com o atributo scope="col".
- Título da tabela com <caption> ou atributo aria-label no elemento <table>.
- Cores com contraste adequado.
- Navegação correta por teclado.
Desempenho: Para grandes volumes de dados, uso virtualização de linhas ou paginação para não carregar nem renderizar todos os dados de uma só vez no cliente.
Uso de bibliotecas (se necessário): Em projetos complexos ou quando funcionalidades avançadas (ordenar, filtrar, editar) são necessárias, posso usar bibliotecas UI existentes (por exemplo, DataTables, React Table, Ant Design Table), mas com uma escolha consciente e compreensão do seu funcionamento.

Para qual abordagem você se inclina ao criar tabelas no bloco de interface?