back to top

Come centrare una tabella HTML

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>

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Visualizzare il codice sorgente HTML di una pagina web su iPhone e iPad

Molti sviluppatori si trovano in difficoltà quando hanno bisogno...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...

Attributo "rel" per i link HTML

In HTML l’attributo rel può essere utilizzato esclusivamente in...

Humans.txt – cos’è, a cosa serve e come funziona

Humans.txt è un formato standard concepito per corredare un...

Un form di ricerca in HTML

Un modulo di ricerca è una delle funzionalità più...
Pubblicità