Come centrare una tabella HTML
Stai lavorando al tuo sito Web personale e hai deciso di fare tutto in modo manuale e quindi di non affidarti alle numerose piattaforme online per creare siti in modo facile e veloce. Mi pare di capire, però, che ora è sorto un problema e in dettaglio non riesci a centrare correttamente una tabella che hai inserito in una pagina del tuo sito. Ho indovinato? Sì? Beh, non preoccuparti, perché ci sono qua io e oggi cercherò di darti una mano.
In questa guida, infatti, vedremo insieme come centrare una tabella HTML utilizzando principalmente il CSS e quindi un linguaggio che, combinato al linguaggio HTML, gestisce tutta la parte di resa grafica di un sito Internet. Come vedremo più avanti, è ormai indispensabile avvalersi del CSS per una corretta lettura del contenuto del tuo sito sui vari browser.
Detto tutto ciò, direi che possiamo ora passare alla parte pratica di questa guida. Mettiti comodo davanti al tuo PC, prenditi tutto il tempo che ti serve e leggi le istruzioni che sto per darti. Arrivati a questo punto, a me non resta altro che augurarti una buona continuazione e buon lavoro!
Indice
Come centrare una tabella in CSS
Come ti ho accennato in apertura, è ormai fondamentale scrivere una pagina in HTML accompagnata dal linguaggio CSS, in quanto può capitare molto spesso che utilizzando i semplici e vecchi tag per centrare una tabella (ma questo succede con moltissimi altri tag) in linguaggio HTML4, alcuni browser non leggano correttamente le istruzioni e di conseguenza potrebbero impaginare il tuo sito in maniera a dir poco disastrosa e caotica.
Detto ciò, ti stai ora chiedendo come centrare una tabella in CSS? Benissimo, allora in questa parte troverai esattamente ciò che ti interessa. Ti mostrerò ora due metodi che hai dalla tua parte: il primo permette di centrare tutte le tabelle presenti in una determinata pagina HTML, mentre il secondo consente di centrare solamente la tabella sulla quale stai lavorando.
Il primo metodo è quello di inserire una classe contenuta tra i tag <head> e </head> nell'intestazione della pagina. In altre parole, inserendo questa istruzione nell'intestazione della pagina, tutte le tabelle di quella pagina verranno centrate secondo le regole stabilite. Per fare ciò, puoi inserire, tra i tag <style> e </style>, le righe di codice che ti riporto qui di seguito che sono, ovviamente, soltanto un esempio.
<style>
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
table {
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
Ci tengo ora a spiegarti alcune righe di codice che hai appena letto. In particolar modo la riga display: flex è un modello che permette di creare layout flessibili e adattabili ai vari browser ed è quindi fondamentale inserirlo. Dopodiché, la proprietà justify-content: center; permette di allineare gli elementi sull'asse verticale, mentre la proprietà align-items: center; consente di allineare gli elementi sull'asse orizzontale. Inoltre, la riga margin: 0; serve ad annullare i margini inferiori e superiori e a impostarli in modalità automatica, in modo che i browser possano allineare al centro la tabella.
Le altre righe di codice che ti ho riportato, invece, non servono strettamente a centrare una tabella, bensì servono a definirne la formattazione e quindi la grandezza dei caratteri, il colore, il font e quant'altro.
Una volta che avrai quindi inserito il codice che ti ho riportato sopra nell'intestazione della tua pagina HTML tra i tag <head> e </head>, non dovrai fare altro che creare una tabella in HTML e vedrai che questa verrà allineata in modo del tutto automatico al centro della pagina, senza che tu aggiunga altre righe di codice. La stessa cosa accadrà per qualsiasi altra tabella tu andrai a creare in quella specifica pagina HTML.
Il secondo metodo che hai a tua disposizione, come ti ho già anticipato, è quello di inserire una classe, sempre utilizzando il linguaggio CSS, ma in riferimento solamente a quella data tabella. Naturalmente, questo ti può tornare utile se in una stessa pagina Internet hai bisogno di creare più tabelle e di allinearle in modo differente. Per riuscire in questo intento, ti riporto qui di seguito un esempio di codice che potresti utilizzare.
<table style="margin: 0 auto; border-collapse: collapse;">
<style>
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
<tr>
<th>Intestazione 1</th>
<th>Intestazione 2</th>
<th>Intestazione 3</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
</tr>
<tr>
<td>Dato 4</td>
<td>Dato 5</td>
<td>Dato 6</td>
</tr>
</table>
Come puoi ben notare, in questo caso l'istruzione CSS non è stata inserita nell'intestazione della pagina, ma tra i tag <table> e </table>. La riga che più ti interessa se il tuo obiettivo è quello di centrare la tabella, è sicuramente margin: 0 auto; che serve proprio a centrare la tabella all'interno del suo contenitore.
Tutte le altre righe che vedi, invece, servono principalmente a formattare il testo e a creare i bordi della tabella. Te le ho riportate perché penso ti possano sempre tornare utili per creare più velocemente una tabella sfruttando la funzione di copia e incolla.
Per qualsiasi informazione aggiuntiva su come creare una pagina HTML, non esitare a leggere la mia guida interamente dedicata a questo argomento. Inoltre, ti segnalo anche la guida dettagliata del sito Internet di HTML.it tutta incentrata sulla creazione di una tabella in HTML che puoi trovare visitando questa pagina del sito Internet appena citato.
Come centrare il testo in una tabella HTML
Sei riuscito a centrare correttamente la tua tabella grazie alle mie istruzioni? Benissimo! Sono davvero molto contento. Come hai detto? Vorresti ora centrare anche il testo della tabella? Beh, allora adesso ti mostro subito come centrare il testo in una tabella HTML.
A dire il vero, nelle righe di codice che ti ho riportato nel capitolo precedente, è già presente l'istruzione per centrare il testo. Comunque sia, anche in questo caso puoi ottenere questo risultato in due modi e quindi inserendo l'istruzione nell'intestazione della pagina HTML o in riferimento alla sola tabella o addirittura alla sola cella della tabella.
In entrambi casi, comunque, dovrai specificare di centrare il testo mentre stai impostando tutti gli elementi della tabella, per fare più chiarezza, mi riferisco a quando scrivi th (intestazioni di tabella) e td (dati di tabella). Se decidi da fare ciò nell'intestazione della pagina HTML tramite un'istruzione CSS, allora assicurati di inserire le righe di codice che ti riporto qui di seguito tra i tag <head> e </head> mentre stai formattando la tabella (in realtà potresti fare la stessa cosa all'interno del tag <table> mentre stai formattando quella specifica tabella all'infuori dell'intestazione della pagina).
<style>
th, td {
text-align: center;
}
</style>
Chiaramente, la riga che più ti interessa è text-align: center; che serve proprio a centrare qualsiasi testo presente all'interno della tabella, sia nelle intestazioni che in tutte le altre singole celle. Come forse hai già intuito, puoi usare questo codice per allineare un testo anche a destra o a sinistra sostituendo la parola center con la parola right oppure left. Ad ogni modo, una volta che avrai inserito questa istruzione nell'intestazione della pagina, tutte le tabelle che andrai a creare in quella pagina avranno il testo centrato in ogni singola cella.
Se, invece, desideri ad esempio impostare che solamente le intestazioni della tabella siano centrate e non i dati della tabella, allora ti basterà eliminare td (e anche la virgola dopo th) nel codice che ti ho riportato sopra.
Il secondo metodo, invece, è quello di applicare sempre un'istruzione CSS, ma su ogni singolo dato della tabella. Naturalmente, ciò ti può tornare utile solo se hai bisogno di allineare in modo differente i vari testi presenti nella tabella, in quanto risulta decisamente più lungo e scomodo. Comunque sia, ti riporto qui di seguito un esempio di codice che potresti utilizzare.
<table>
<tr>
<th style="text-align: center;">Intestazione 1</th>
<th>Intestazione 2</th>
</tr>
<tr>
<td>0</td>
<td>Dato 2</td>
</tr>
<tr>
<td>Dato 4</td>
<td>Dato 5</td>
</tr>
</table>
Nella tabella che ti ho appena riportato, la riga di codice <th style="text-align: center">Intestazione 1</th> permette di centrare il testo contenuto solamente in quella cella. Ovviamente, sostituendo la parola center, con la parola right o left puoi rispettivamente allineare il testo a destra o a sinistra. Naturalmente, la stessa istruzione CSS la puoi applicare anche a tutti i dati della tabella (td).
Per tua informazione, ho scritto una guida tutta incentrata su come centrare il testo HTML. In questa guida ti ho illustrato più che altro come centrare un testo generico e quindi non quello di una tabella, ma i principi sono sempre più o meno i medesimi e quindi penso che potrebbe tornarti utile per approfondire l'argomento.
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.
