Stranamente, una delle tecnologie web più difficili da padroneggiare è una delle prime a essere disponibile per il browser dopo semplici testi e immagini. Il problema è ancora più grande oggi con così tanti diversi tipi di dispositivi che devono essere pensati.
Le tabelle perfette sono quasi impossibili da creare a meno che non contengano così pochi elementi che nessun problema possa essere attivato. I tipi di errori che possono sorgere includono:
- Text wrapping in modo errato
- Errori di giustificazione
- Table rendering off screen
- Scorri i problemi
- Errori di altezza della riga
- Errori di larghezza delle colonne
- Bruttezza generale o disordine
In questo articolo daremo un'occhiata a come evitare problemi del genere, quindi i tuoi tavoli hanno le migliori possibilità di creare una buona impressione.
Strategie di prevenzione da evitare
Dato che le tabelle sono così difficili da correggere, alcune persone cercano di evitare di usarle. Alcune strategie comuni utilizzano CSS per creare una tabella falsa e utilizzare un'immagine della tabella di dati senza implementarla nel codice.
Entrambe queste strategie di evitamento hanno difetti e dovrebbero essere evitate. Usando i CSS per imitare un tavolo manca la struttura semantica inerente a una tabella, che può creare problemi di usabilità e accessibilità.
L'immagine di una tabella non subirà i problemi elencati nell'introduzione, ma degrada il tuo potenziale SEO e non può essere facilmente modificata se i tuoi dati devono essere aggiornati. Introduce anche problemi di usabilità e accessibilità.
I quadri sono i tuoi amici
Strutture comuni come Bootstrap e Foundation contengono molti strumenti per risparmiare tempo e le tabelle non fanno eccezione. Costruire una tabella dall'aspetto elegante in Bootstrap non è difficile, ma presenta alcune limitazioni se si crea uno scaffale senza aggiungere alcuni strumenti di personalizzazione personalizzati ai propri sforzi.
L'aspetto non è tutto
Poiché il contenuto e lo stile devono sempre essere indipendenti, può essere sensato costruire il tuo tavolo in HTML in modo semplice, solo per assicurarsi che risulti bello prima di applicare qualsiasi stile di tabella speciale.
Questo può anche essere utile per ricordarti che una buona costruzione del tavolo richiede qualcosa di più del semplice aspetto del tavolo. Dovrebbe anche essere un utile informatsistema di erogazione di ioni. Se l'obiettivo del tavolo non è quello di veicolareformation, allora non dovresti usare una tabella per qualunque cosa tu stia facendo.
Obiettivo per l'accessibilità
Alcune persone hanno difficoltà a vedere e leggere il testo stampato, quindi è una buona idea rendere le tabelle accessibili per loro. Puoi scoprire tutto ciò che devi sapere per rendere le tue tabelle più accessibili WebAIM.
Prendi in considerazione la possibilità di fornire valori ID ai componenti della tabella
Per il massimo controllo su ogni parte della tabella (righe, celle), puoi considerare di inserirledividoppi valori ID. L'aggiunta anche di valori di classe ti darà ancora più flessibilità.
Fare queste cose crea molto più lavoro per te, quindi è solo pratico quando devi essere in grado di mettere a punto qualsiasi oggetto per riferimento. Se decidi di farlo, sarai in grado di manipolare direttamente qualsiasi elemento della tabella utilizzando JavaScript e CSS.
Una delle complessità della produzione di tabelle è che dichiariamo le righe ma non le colonne. Le colonne vengono create dinamicamente, calcolate in base al numero di elementi di dati posizionati su ogni riga. Questo è il motivo per cui le tabelle si aggiungono al tempo di caricamento della pagina.
In effetti significa che le colonne esistono solo in senso astratto prima che la pagina venga renderizzata, quindi non puoi dare loro alcun tipo di riferimento. Assegnando al primo elemento TD su una riga una classe, ad esempio, "firstCol", si fornisce un modo per fare riferimento direttamente a una colonna.
I tavoli compatti sono i migliori
È diventato di moda costruire tutto con componenti grandi e ad alta visibilità. Da un punto di vista dell'accessibilità, questo è meraviglioso. In termini di usabilità, tuttavia, non è sempre il modo migliore, perché può portare a problemi.
Gli sviluppatori di Bootstrap hanno sperimentato responsive tavoli, ma tavoli e responsiveness non vanno bene insieme. Progettare i tuoi tavoli dall'inizio in modo che si adattino allo schermo di un cellulare in modalità verticale è una mossa intelligente.
Le tabelle dovrebbero essere sempre scorrevoli
È consigliabile impostare sempre il valore di overflow di una tabella su Auto, ma non sul tavolo stesso. Invece, avvolgere il tavolo all'interno di un div, qualcosa del genere:
Poi c'è un sacco di codice PHP che costruisce il corpo della tabella, chiudendo con questo:
La parte che fa il lavoro di far scorrere il tavolo è sulla prima riga, dove il div-table wrap ha un'altezza fissa e il suo valore di overflow è impostato su auto. Se si esegue questa operazione sulla tabella stessa, anziché su un wrapper attorno al tavolo, può avere effetti indesiderati.
Chiama i colpitori pesanti se è necessario
Per le tabelle semplici, questo è eccessivo, ma quando hai una tabella che ha davvero bisogno di vantaggi come la larghezza delle colonne e l'ordinamento delle colonne, ci sono alcune potenti applicazioni jQuery che sono state costruite per aiutare il compito di costruire tabelle complesse.
L'opzione più impressionante che vorresti per un sito WordPress è wpDataTables, una tabella WordPress plugin che semplifica il tuo lavoro con tabelle, grafici e gestione dei dati. Con esso, puoi creare responsive Tabelle e grafici di WordPress.
Lo strumento plugin funziona molto velocemente con tabelle di grandi dimensioni, fino a milioni di righe, ma puoi anche eseguire molte personalizzazioni e filtri sulle tabelle quasi come se fossi in Excel o Fogli di lavoro Google.
Il più grande e probabilmente il migliore è Flexigrid. Questo ha un aspetto simile a una tabella Swing Java e funziona in modo simile.
Le caratteristiche di Flexigrid potrebbero anche essere eccessive per ciò di cui hai bisogno, quindi in questo caso potresti prendere in considerazione tablesorter, che è un po 'più semplice.
Mentre le funzionalità di questi tipi di strumenti possono essere eccitanti, è importante aggiungere ancora di più al tempo di caricamento della pagina. È meglio salvare questo tipo di cose per quando devi davvero averlo.
Normalmente gli strumenti di conversione automatici non danno i migliori risultati
Sono disponibili plug-in CMS che consentono di convertire tabelle di documenti in tabelle HTML. Non sono neanche lontanamente all'altezza di costruire manualmente il tavolo manualmente, quindi se vuoi ottenere risultati superiori, l'automazione di questo tipo non è la strada da percorrere.
La tua automazione domestica è comunque soddisfacente
Usando PHP per costruire le tue tabelle dal database information è sempre una buona idea e decisamente preferibile a digitare tutto manualmente. La differenza qui è che hai il pieno controllo su come funziona l'automazione.
Quando si utilizza l'automazione di terze parti, l'autore di terze parti deve fare supposizioni sul proprio tavolo. Ciò significa che finirai con una tabella generica che potrebbe non avere molte funzionalità rispetto alla creazione del tavolo stesso.
Usa le tabelle in modo appropriato e ti ricompenseranno
I buoni tavoli sono progettati, non accadono e basta. Quando progetti un informatsistema di erogazione di ioni, vuoi che sia efficiente ed efficace. Assicurati che le tue tabelle siano progettate per essere proprio questo e il tuo sito otterrà il massimo beneficio dalla loro inclusione.
immagine di cortesia per gentile concessione di
Commenti Risposte 0