docs: Table component

src/data/content/design-system/componenti/tables.yaml

@@ -9,7 +9,7 @@ metadata:
 seo:
   name: Tables - Designers Italia
   description: >-
-    Le tabelle di dati sono utilizzate per organizzare e visualizzare i dati in modo razionale.
+    Rappresentazione organizzata di dati in righe e colonne per visualizzare informazioni in modo strutturato e facilitare il confronto tra più elementi.
   image: null
   canonical: null
   pathname: /design-system/componenti/tables/
@@ -23,7 +23,7 @@ components:
       addonClasses: mt-3 text-uppercase
     column: true
     subtitle: >-
-      Le tabelle di dati sono utilizzate per organizzare e visualizzare i dati in modo razionale
+      Rappresentazione organizzata di dati in righe e colonne per visualizzare informazioni in modo strutturato e facilitare il confronto tra più elementi
     imgRatio: 1x1
     noBorder: true
     kangaroo:
@@ -62,7 +62,23 @@ tabs:
             title: Quando usarlo
             headingLevel: 2
             text: >
-              _In stesura_
+              Il componente table, in italiano tabella, è ideale quando si desidera presentare dati strutturati in modo chiaro e organizzato. Una tabella consente di organizzare in modo logico le informazioni, raggruppando elementi simili, favorendo la comparazione e facilitando la comprensione di contenuti complessi.
+
+              È particolarmente utile in contesti come:
+
+              - gestione di inventari o elenchi di elementi, dove ogni voce può essere dettagliata attraverso colonne specifiche;
+
+              - visualizzazione di dati comparativi, come tabelle di confronto tra prodotti o servizi;
+
+              - presentazione di dati statistici, dove l'organizzazione in righe e colonne facilita l'analisi;
+
+              - creazione di report o documenti che richiedono la suddivisione dei dati in categorie distinte.
+
+              ### Alternative a questo componente
+
+              - **[List](/design-system/componenti/list)**: nel caso siano presenti dati o informazioni non struttutrati.
+
+              - **[Card](/design-system/componenti/card)**: per mostrare contenuti in sequenza e permettere la navigazione a pagine di dettaglio.
       - full: true
         noSpace: true
         paddingLeft: true
@@ -72,7 +88,13 @@ tabs:
             title: Come usarlo
             headingLevel: 2
             text: >
-              _In stesura_
+                - Definisci in modo chiaro come presentare i dati, limitando il numero delle colonne.
+
+                - Usa sempre le intestazioni delle colonne.
+
+                - Crea tabelle facili da consultare, applicando gli stili di formattazione del testo per evidenziare i punti chiave.
+
+                - Permetti di ordinare i contenuti di una colonna solo quando è necessario, utilizzando l’ordinamento alfabetico o numerico a seconda dei casi.
       - full: true
         noSpace: true
         paddingLeft: true
@@ -244,7 +266,16 @@ tabs:
             title: Anatomia
             headingLevel: 2
             text: >
-              _In stesura_
+              ![Gli elementi che formano la cella di una tablle](/images/design-system/componenti/table-cell-anatomy.png)
+
+              La cella di una tabella è composta da:
+
+              1. **sfondo**, che può essere trasparente o di vari colori a seconda delle esigenze;
+
+              2. **etichetta (label)**,  il testo che fa parte della cella e che, nel caso di intestazioni, può essere in **bold** oppure maiuscoletto;
+
+              3. **bordo**, che può essere applicato a uno o più lati, a seconda dello stile della tabella.
+
       - full: true
         noSpace: true
         paddingLeft: true
@@ -254,7 +285,7 @@ tabs:
             title: Comportamento
             headingLevel: 2
             text: >
-              _In stesura_
+              Non sono previste indicazioni particolari.
       - full: true
         noSpace: true
         paddingLeft: true
@@ -264,7 +295,13 @@ tabs:
             title: Specifiche di design
             headingLevel: 2
             text: >
-              _In stesura_
+              Le specifiche sono relative alle due dimensioni "large" e "small".
+
+              Tutte le misure indicate sono espresse in `px`. 
+
+              ![Specifiche di design della cella di una tabella](/images/design-system/componenti/table-cell-specs.png)
+
+
       - full: true
         noSpace: true
         paddingLeft: true