Tag tabella HTML TH e TD

Le tabelle hanno da tempo una cattiva reputazione in bad web design. Molti anni fa, le tabelle HTML venivano utilizzate per il layout, che ovviamente non era quello a cui erano destinate. Quando i CSS sono diventati di uso comune per i layout dei siti Web, l'idea che "i tavoli sono pessimi" prese piede. Sfortunatamente, molte persone hanno frainteso questo per significare che le tabelle HTML sono tutte cattive, sempre. Non è affatto così. La realtà è che le tabelle HTML sono cattive quando vengono utilizzate per qualcosa di diverso dal loro vero scopo, che è quello di visualizzare dati tabulari (fogli di calcolo, calendari, ecc.). Se stai costruendo un sito web e hai una pagina con questo tipo di dati tabulari, non dovresti esitare a usare un tabella HTML sulla tua pagina.

Cosa fare e Fare?

Il

 tag, o tag "dati di tabella", crea celle di tabella all'interno di una riga di tabella in una tabella HTML. Questo è il tag HTML che contiene testo e immagini. Fondamentalmente, questo è il tag cavallo di battaglia del tuo tavolo. I tag conterranno il contenuto della tabella HTML.

Il

 tag, o "intestazione tabella", è simile a to  in molti modi. Può contenere lo stesso tipo di informazioni (anche se non metteresti un'immagine in a ), ma definisce quella cella specifica come intestazione di tabella.

La maggior parte dei browser Web modifica lo spessore del carattere in grassetto e centra il contenuto in una cella. Certo che puoi usare Stili CSS per fare in modo che le intestazioni della tabella, così come il contenuto dei tag, appaiano nel modo in cui desideri che appaiano nella pagina Web visualizzata.

Quando dovresti usare? Piuttosto che ?

Il

tag dovrebbe essere utilizzato quando si desidera designare il contenuto nella cella come intestazione per quella colonna o riga. Le celle dell'intestazione della tabella si trovano in genere nella parte superiore della tabella o lungo il lato, in pratica le intestazioni nella parte superiore delle colonne o le intestazioni all'estrema sinistra o all'inizio di una riga. Queste intestazioni vengono utilizzate per definire quale sia il contenuto sottostante o accanto a esse, rendendo la tabella e i suoi contenuti molto più facili da rivedere ed elaborare rapidamente.

Non usare per modellare le tue cellule. Poiché i browser tendono a visualizzare le celle di intestazione della tabella in modo diverso, alcuni web designer pigri potrebbero provare a trarne vantaggio e utilizzare il tag quando vogliono che i contenuti siano in grassetto e centrato. Questo è un male per diversi motivi:

1. Non puoi fare affidamento sui browser Web che visualizzano sempre il contenuto in questo modo. I browser futuri potrebbero cambiare il colore per impostazione predefinita o non apportare alcuna modifica visiva a  soddisfare. Non dovresti mai fare affidamento esclusivamente sugli stili del browser predefiniti e non dovresti mai usare un elemento HTML a causa di come "appare" per impostazione predefinita.
2. È semanticamente scorretto. Gli interpreti che leggono il testo possono aggiungere una formattazione udibile come "intestazione di riga: il tuo testo" per indicare che è in un cellula. Inoltre, alcune applicazioni Web stampano le intestazioni della tabella nella parte superiore di ogni pagina, il che sarebbe causare problemi se la cella non è in realtà un'intestazione ma viene invece utilizzata per motivi stilistici solo. In conclusione: l'utilizzo dei tag in questo modo può causare problemi di accessibilità per molti utenti, in particolare quelli che utilizzano dispositivi assistiti per accedere ai contenuti del tuo sito.
3. Dovresti usare CSS per definire l'aspetto delle celle. La separazione di stile (CSS) e la struttura (HTML) sono da molti anni una best practice nel web design. Ancora una volta, usa a perché il contenuto di quella cella è un'intestazione, non perché ti piace il modo in cui è probabile che il browser visualizzi quel contenuto per impostazione predefinita.