Se vogliamo capire meglio le tabelle reattive, dobbiamo prima sapere cosa significa quando diciamo che un design \u00e8 reattivo.<\/p>\n
Il design reattivo \u00e8 il design che \u00e8 adattabile a schermi di diverse dimensioni. Quando si parla di un’immagine o di una tabella HTML, si tratta di ci\u00f2 che accade quando lo schermo \u00e8 pi\u00f9 stretto della larghezza minima di una tabella di dati.<\/p>\n
Tabelle reattive come parte di un design reattivo<\/strong><\/h3>\nRendere le tabelle responsive \u00e8 stata una vera sfida dall’introduzione del responsive web design<\/a>.<\/p>\nLe tabelle di dati sono spesso piuttosto ampie e una singola riga di dati spesso deve essere tenuta insieme se vogliamo che abbia effettivamente un senso. Naturalmente, i tavoli possono flettersi in larghezza, ma \u00e8 davvero una soluzione? Bene, pu\u00f2 essere fino al punto in cui iniziano a avvolgere il contenuto delle celle in un modo in cui non vogliamo. C’\u00e8 anche un punto in cui semplicemente non possono andare pi\u00f9 stretti.<\/p>\n
Fortunatamente, ci sono 3 modelli che possono aiutarci a risolvere questo problema:<\/p>\n
\n- \n
Il troppopieno orizzontale<\/strong><\/h3>\n<\/li>\n<\/ol>\nLa tabella di overflow orizzontale in HTML pu\u00f2 essere facilmente vista intera semplicemente scorrendo a destra ea sinistra. Il primo campo \u00e8 solitamente fisso e gli altri diventano visibili mentre l’utente scorre il contenuto.<\/p>\n
C’\u00e8 un aspetto negativo, tuttavia. L’utente potrebbe non sapere o notare che la tabella \u00e8 scorrevole. Se ci\u00f2 accade, c’\u00e8 la possibilit\u00e0 che manchino la maggior parte del tavolo. Per evitare che l’utente non veda il contenuto pi\u00f9 importante, i campi chiave dovrebbero trovarsi nelle prime 3 colonne.<\/p>\n
\n- \n
Le Tavole di Transizione<\/strong><\/h3>\n<\/li>\n<\/ol>\nUna tabella CSS di transizione \u00e8 una buona soluzione se si desidera evitare lo scorrimento che \u00e8 la parte necessaria della visualizzazione delle tabelle di overflow orizzontali.<\/p>\n
Ci\u00f2 che accade con questa tabella \u00e8 che i titoli dei campi sono formattati a punti di interruzione CSS inferiori in un formato di riga anzich\u00e9 in una struttura di colonne.<\/p>\n
Sfortunatamente, c’\u00e8 anche un aspetto negativo. Una tabella di transizione CSS diminuisce la scansione e il confronto dei campi.<\/p>\n
\n- \n
Le Tabelle delle Priorit\u00e0<\/strong><\/h3>\n<\/li>\n<\/ol>\nLe tabelle delle priorit\u00e0 nascondono semplicemente i campi nelle dimensioni dello schermo inferiori. Le tabelle formattate in questo modo di solito sembrano belle, ma i problemi si verificano se i campi omessi erano, in effetti, i pi\u00f9 importanti.<\/p>\n
Approcci reattivi al tavolo<\/strong><\/h3>\nEsistono diversi modi per creare tabelle reattive.<\/p>\n
\n- Squash<\/strong>: puoi schiacciare l’HTML della tabella orizzontalmente spostando il bordo della tabella HTML se non c’\u00e8 molto contenuto nelle colonne. In questo modo, puoi evitare di modificare l’intero layout del tuo tavolo<\/li>\n
- Scorrimento verticale<\/strong> \u2013 se vuoi evitare di modificare il contenuto e\/o il layout della tua tabella, gli utenti possono scorrere a sinistra e a destra per vedere la tabella completa<\/li>\n
- Comprimi per righe<\/strong>: puoi trasformare la tua tabella in diverse tabelle pi\u00f9 piccole suddividendo ogni riga nella sua singola colonna<\/li>\n
- \n
Comprimi per colonne<\/strong>: devi imparare l’HTML per farlo perch\u00e9 questa parte \u00e8 un po ‘complicata. Nelle tabelle in stile CSS, l’ordine del codice \u00e8 in base alle righe della tabella e ai
\nwrapper bloccati. Se vuoi comprimere la tua tabella per colonne, devi manipolare con JavaScript o cambiare il markup.<\/p>\nCose da evitare quando si costruisce una tabella reattiva<\/strong><\/h3>\nLe persone hanno provato molti metodi diversi per creare tabelle reattive e qui ce ne sono alcuni che non sono particolarmente efficaci. Probabilmente dovresti evitarli del tutto.<\/p>\n
\n- \n
\n- Utilizzo di JavaScript per generare una seconda tabella pi\u00f9 stretta, quindi nascondere e mostrare alternativamente per punto di interruzione. Questo metodo suddivider\u00e0 gli ID univoci nelle tabelle.<\/li>\n
- Utilizzo di JavaScript e del normale markup della tabella in un’interruzione per riorganizzare la tabella. Le tabelle orizzontali e verticali richiedono markup diversi mentre questo metodo richiede anche la manipolazione DOM e molti listener di eventi JS.<\/li>\n
- Mantenere il markup della tabella e passare a display:flex per il contenuto della tabella allineato verticalmente.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
NOTA: se tutto quanto sopra sembra troppo complicato anche solo per provare, non scoraggiarti. Esistono modi pi\u00f9 semplici per creare tabelle reattive. Puoi visitare w3schools.com per suggerimenti pi\u00f9 utili (l’HTML di w3schools offre una variet\u00e0 di spiegazioni della guida HTML per i costruttori di siti Web). Quindi diamo un’occhiata ad alcuni degli strumenti che potresti trovare utili.<\/p>\n
Come creare tabelle responsive<\/strong><\/h2>\nPer WordPress<\/h3>\nwpDataTables<\/a><\/h4>\n
Le tabelle di dati sono spesso piuttosto ampie e una singola riga di dati spesso deve essere tenuta insieme se vogliamo che abbia effettivamente un senso. Naturalmente, i tavoli possono flettersi in larghezza, ma \u00e8 davvero una soluzione? Bene, pu\u00f2 essere fino al punto in cui iniziano a avvolgere il contenuto delle celle in un modo in cui non vogliamo. C’\u00e8 anche un punto in cui semplicemente non possono andare pi\u00f9 stretti.<\/p>\n
Fortunatamente, ci sono 3 modelli che possono aiutarci a risolvere questo problema:<\/p>\n
- \n
- \n
Il troppopieno orizzontale<\/strong><\/h3>\n<\/li>\n<\/ol>\n
La tabella di overflow orizzontale in HTML pu\u00f2 essere facilmente vista intera semplicemente scorrendo a destra ea sinistra. Il primo campo \u00e8 solitamente fisso e gli altri diventano visibili mentre l’utente scorre il contenuto.<\/p>\n
C’\u00e8 un aspetto negativo, tuttavia. L’utente potrebbe non sapere o notare che la tabella \u00e8 scorrevole. Se ci\u00f2 accade, c’\u00e8 la possibilit\u00e0 che manchino la maggior parte del tavolo. Per evitare che l’utente non veda il contenuto pi\u00f9 importante, i campi chiave dovrebbero trovarsi nelle prime 3 colonne.<\/p>\n
- \n
- \n
Le Tavole di Transizione<\/strong><\/h3>\n<\/li>\n<\/ol>\n
Una tabella CSS di transizione \u00e8 una buona soluzione se si desidera evitare lo scorrimento che \u00e8 la parte necessaria della visualizzazione delle tabelle di overflow orizzontali.<\/p>\n
Ci\u00f2 che accade con questa tabella \u00e8 che i titoli dei campi sono formattati a punti di interruzione CSS inferiori in un formato di riga anzich\u00e9 in una struttura di colonne.<\/p>\n
Sfortunatamente, c’\u00e8 anche un aspetto negativo. Una tabella di transizione CSS diminuisce la scansione e il confronto dei campi.<\/p>\n
- \n
- \n
Le Tabelle delle Priorit\u00e0<\/strong><\/h3>\n<\/li>\n<\/ol>\n
Le tabelle delle priorit\u00e0 nascondono semplicemente i campi nelle dimensioni dello schermo inferiori. Le tabelle formattate in questo modo di solito sembrano belle, ma i problemi si verificano se i campi omessi erano, in effetti, i pi\u00f9 importanti.<\/p>\n
Approcci reattivi al tavolo<\/strong><\/h3>\n
Esistono diversi modi per creare tabelle reattive.<\/p>\n
- \n
- Squash<\/strong>: puoi schiacciare l’HTML della tabella orizzontalmente spostando il bordo della tabella HTML se non c’\u00e8 molto contenuto nelle colonne. In questo modo, puoi evitare di modificare l’intero layout del tuo tavolo<\/li>\n
- Scorrimento verticale<\/strong> \u2013 se vuoi evitare di modificare il contenuto e\/o il layout della tua tabella, gli utenti possono scorrere a sinistra e a destra per vedere la tabella completa<\/li>\n
- Comprimi per righe<\/strong>: puoi trasformare la tua tabella in diverse tabelle pi\u00f9 piccole suddividendo ogni riga nella sua singola colonna<\/li>\n
- \n
Comprimi per colonne<\/strong>: devi imparare l’HTML per farlo perch\u00e9 questa parte \u00e8 un po ‘complicata. Nelle tabelle in stile CSS, l’ordine del codice \u00e8 in base alle righe della tabella e ai
\nwrapper bloccati. Se vuoi comprimere la tua tabella per colonne, devi manipolare con JavaScript o cambiare il markup.<\/p>\nCose da evitare quando si costruisce una tabella reattiva<\/strong><\/h3>\n
Le persone hanno provato molti metodi diversi per creare tabelle reattive e qui ce ne sono alcuni che non sono particolarmente efficaci. Probabilmente dovresti evitarli del tutto.<\/p>\n
- \n
- \n
- \n
- Utilizzo di JavaScript per generare una seconda tabella pi\u00f9 stretta, quindi nascondere e mostrare alternativamente per punto di interruzione. Questo metodo suddivider\u00e0 gli ID univoci nelle tabelle.<\/li>\n
- Utilizzo di JavaScript e del normale markup della tabella in un’interruzione per riorganizzare la tabella. Le tabelle orizzontali e verticali richiedono markup diversi mentre questo metodo richiede anche la manipolazione DOM e molti listener di eventi JS.<\/li>\n
- Mantenere il markup della tabella e passare a display:flex per il contenuto della tabella allineato verticalmente.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
NOTA: se tutto quanto sopra sembra troppo complicato anche solo per provare, non scoraggiarti. Esistono modi pi\u00f9 semplici per creare tabelle reattive. Puoi visitare w3schools.com per suggerimenti pi\u00f9 utili (l’HTML di w3schools offre una variet\u00e0 di spiegazioni della guida HTML per i costruttori di siti Web). Quindi diamo un’occhiata ad alcuni degli strumenti che potresti trovare utili.<\/p>\n
Come creare tabelle responsive<\/strong><\/h2>\n
Per WordPress<\/h3>\n
wpDataTables<\/a><\/h4>\n
- Scorrimento verticale<\/strong> \u2013 se vuoi evitare di modificare il contenuto e\/o il layout della tua tabella, gli utenti possono scorrere a sinistra e a destra per vedere la tabella completa<\/li>\n
- Squash<\/strong>: puoi schiacciare l’HTML della tabella orizzontalmente spostando il bordo della tabella HTML se non c’\u00e8 molto contenuto nelle colonne. In questo modo, puoi evitare di modificare l’intero layout del tuo tavolo<\/li>\n
- \n
- \n
![\"Tabelle](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-200973-61e8bd6a5ae22.jpg\")
<\/a><\/p>\n