Centrare una tabella HTML è una cosa piuttosto semplice. Esistono diverse tecniche per effettuare il centramento di una tabella all’interno di una pagina web (o del suo contenitore). Vediamole tutte in modo dettagliato al fine di scegliere quella più adatta alle nostre esigenze.
Utilizzare l’attributo center
La tecnica più semplice per centrare una tabella HTML consiste nel valorizzarne l’attributo align come "center" in questo modo:
<table align="center">
...
</table>Da segnalare che l’attributo in oggetto è considerato deprecato da HTML5 pertanto il suo utilizzo, seppur efficace, è sconsigliato.
Utilizzare il tag <center>
Anche il tag <center> è deprecato nelle nuove specifiche di HTML5, tuttavia è ancora ampiamente supportato dai browser in circolazione. Se non vi interessa avere pagine web con codice validato e l’unica cosa che vi preme è vedere la vostra tabella centrata, non vi resta che racchiuderla all’interno di <center> e </center> in questo modo:
<center>
<table>
...
</table>
</center>Utilizzare un tag DIV come contenitore
Un’altra semplice tecnica consiste nell’annidiare la tabella all’interno di un tag DIV cui assegnare uno specifico stile:
<div style="text-align: center">
<table>
...
</table>
</div>La proprietà text-align di CSS sortirà l’effetto voluto in quanto le tabelle sono elementi inline.
Utilizzare le proprietà margin-lef e margin-right di CSS
Un’altra tecnica molta utilizzata per centrare orizzontalmente una tabella consiste nell’agire mediante CSS attraverso la corretta valorizzazione dei margini destro e sinistro, in questo modo:
<table style="margin-left: auto; margin-right: auto">
...
</table>Come potete notare, in questo caso la tabella non ha bisogno di essere annidiata all’interno di alcun contenitore.
Considerando quest’ultima la soluzione migliore, si consiglia di aggiungere al foglio di stile del proprio sito web una classe apposita da applicare qualora si renda necessaria la centratura di una tabella, ad esempio:
.tabella-centrata {
margin-left: auto;
margin-right: auto;
}da applicare all’elemento HTML in questo modo:
<table class="tabella-centrata">
...
</table>Centrare una tabella: soluzione cross-browser
Seppur l’ultima soluzione proposta sia quella corretta, alcuni vecchi browser potrebbero non supportarla adeguatamente. Al fine di avere la certezza che la nostra tabella sia centrata su qualsiasi device (compresi quelli obsoleti) la soluzione migliore appare questa.
Per prima cosa si aggiungano al foglio di stile le seguenti direttive:
.contenuto-centrato {
text-align: center;
}
.tabella-centrata {
margin-left: auto;
margin-right: auto;
}E si utilizzi questo markup all’interno del sorgente HTML della pagina:
<div class="contenuto-centrato">
<table class="tabella-centrata">
...
</table>
</div>