Creare tabelle HTML migliori

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 molto di più del semplice aspetto del tavolo. Dovrebbe anche essere un utile sistema di consegna delle informazioni. Se l'obiettivo della tabella non è quello di trasmettere informazioni, allora non dovresti usare una tabella per quello che stai 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 dare loro valori di ID individuali. L'aggiunta 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 sia resa, quindi non puoi dare loro alcun tipo di riferimento. Dando il primo oggetto TD su una riga di 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 tabelle reattive, ma le tabelle e la reattività non vanno d'accordo. Progettare i tuoi tavoli sin dall'inizio in modo che si adattino a uno schermo mobile 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.

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

Usare PHP per costruire le tue tabelle dalle informazioni del database è sempre una buona idea, e sicuramente preferibile 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 si verificano solo. Quando si progetta un sistema di consegna delle informazioni, si desidera 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

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.