Corsi on-line

Centrare una tabella con i CSS

Allineare una tabella coi CSS? Semplicissimo… basta usare:

<div style="text-align: center">
  <table>
  ...
  </table>
</div>

Sbagliato!!! Questa soluzione non funziona con tutti i browser (funziona con IExplorer ma non con Safari e Firefox) in quanto la proprietà text-align riguarda i contenuti inline.

Per centrare una tabella utilizzando istruzioni CSS è necessario aguzzare l’ingegno. Una soluzione potrebbe essere quella di utilizzare:

<table style="margin-left:auto; margin-right:auto;">
...
</table>

Peccato che su alcune versioni IExplorer non funzioni!
Come fare, quindi, per avere una centratura cross-browser? Ecco il codice:

<style type="text/css">
div.centrato { text-align: center; }
table.centrata { margin-left:auto; margin-right:auto; }
</style>

<div class="centrato">
  <table class="centrata">
  ...
  </table>
</div>

In questo modo dovrebbe funzionare correttamente.

Per una trattazione più completa ed esaustiva rimando a questo ottimo articolo (in inglese).

Post correlati
I più letti del mese
Tematiche