Questo sito contribuisce alla audience di Il Messaggero
Salvatore Aranzulla Day
Evento di formazione SEO con Salvatore Aranzulla. Scopri il programma

Come centrare una tabella HTML

di

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!