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.