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.
+    Le tabelle sono utilizzate per organizzare e visualizzare informazioni e dati in modo razionale..
   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
+      Le tabelle sono utilizzate per organizzare e visualizzare informazioni e dati in modo razionale
     imgRatio: 1x1
     noBorder: true
     kangaroo:
@@ -62,7 +62,23 @@ tabs:
             title: Quando usarlo
             headingLevel: 2
             text: >
-              _In stesura_
+              Il componente table è 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 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
+
+              - **[List](/design-system/componenti/list)**: nel caso siano presenti dati o informazioni non struttutrati.
+
+              - **[Card](/design-system/componenti/card)**: per mostrare contenuti organizzati in modo molto diverso tra loro.
       - 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**: può essere trasparente o di vari colori a seconda delle esigenze;
+
+              2. **etichetta**: il testo che fa parte della cella, nel caso di intestazioni può essere in **bold** oppure maiuscoletto;
+
+              3. **bordo**: può essere applicato ad 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