Come centrare una tabella HTML

Stai lavorando al tuo sito Web personale e non riesci a centrare correttamente una tabella che hai inserito in quest’ultimo? Hai bisogno di inserire una tabella in un post del tuo blog WordPress/Blogger ma non riesci in alcun modo a centrarla? Non preoccuparti, cercherò di darti una mano io.

Con la guida di oggi, vedremo insieme come centrare una tabella HTML utilizzando varie tecniche, da quelle più rozze e sbrigative (ma efficaci) a quelle più corrette sotto il punto di vista degli standard Web. Non devi far altro che aprire il tuo editor HTML e cominciare a lavorare!

Se vuoi imparare come centrare una tabella HTML in maniera facile e veloce, puoi affidarti al buon vecchio tag div e posizionare la tabella come faresti con un paragrafo di testo o un’immagine.

Usa la seguente formattazione e, anche se un po’ “alla buona”, dovresti ottenere una tabella visualizzata correttamente sulla stragrande maggioranza dei browser Web:

<div align=”center” valign=”middle”>

<table>

…

</table>

</div>

In alternativa, puoi usare quest’altra formattazione che sto per illustrarti ed aggiungere la variabile relativa all’orientamento della tabella nel tag table. Questo codice risulta particolarmente efficace nei post dei blog:

<table align=”center”>

…

</table>

Se vuoi centrare una tabella HTML in maniera più professionale e “pulita”, puoi ricorrere a delle semplicissime istruzioni CSS interpretate correttamente da tutti i principali browser Web (o quasi). Questo è il primo esempio che ti consiglio di seguire, nel quale si utilizza l’istruzione table style per specificare lo stile, e quindi anche l’orientamento, della tabella:

<table style=”margin-left:auto; margin-right:auto;”>

…

</table>

Provando questa soluzione hai incontrato dei problemi di visualizzazione con Internet Explorer? Allora dovresti provare quest’altra formattazione che dovrebbe garantirti una piena compatibilità della tabella con il browser Microsoft e con tutti gli altri principali navigatori Web:

<style type=”text/css”>

div.centrato { text-align: center; }

table.centrata { margin-left:auto; margin-right:auto; }

</style>

<div>

  <table>

…

  </table>

</div>

Insomma, come vedi di strade da percorrere ce ne sono tante. Non devi far altro che testarle tutte e vedere qual è che si adatta meglio alle tue esigenze e a quelle degli utenti che dovranno visualizzare la tua tabella. Buon lavoro!

Autore

Salvatore Aranzulla

Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e cura la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.