<table align=\"center\"><\/code><\/pre>\nTuttavia, allineare le tabelle in questo modo non \u00e8 pi\u00f9 corretto ed \u00e8 stato deprecato in HTML5. Questo perch\u00e9 gli standard Web moderni dettano la separazione tra struttura (HTML) e stile (CSS) e il metodo sopra viola questo principio.<\/p>\n
L’HTML non dovrebbe mai essere usato per impostare il modo in cui appare un elemento; questo \u00e8 ora il lavoro dei CSS. Quindi qual \u00e8 il modo corretto per centrare una tabella in CSS?<\/a> In questo articolo del nostro team di wpDataTables, affrontiamo questa domanda e ti mostriamo alcuni suggerimenti su come allineare correttamente le tue tabelle.<\/p>\nSappiamo una o due cose sulle tabelle, considerando che abbiamo creato un fantastico plugin per tabelle WordPress<\/a>, quindi tuffiamoci.<\/p>\nCome posso usare i CSS per centrare una tabella?<\/h3>\n
CSS imposta l’aspetto della pagina, consentendoti di controllare l’aspetto e il posizionamento di ogni elemento, incluso l’elemento tabella e tutti i suoi sottoelementi come th, tr e td.<\/p>\n
Per prima cosa, esaminiamo il modo "giusto" di centrare una tabella con CSS. Se i tuoi margini destro e sinistro hanno lo stesso valore, i browser moderni dovrebbero mostrare la tabella centrata. Un modo semplice per ottenere questo risultato \u00e8 avere entrambi i margini impostati su auto.<\/p>\n
Di seguito un esempio di come scriverlo in CSS:<\/p>\n
table<\/code><\/pre>\nNota che non puoi semplicemente centrare la tabella come faresti con il testo, ad esempio usando "text-align: center". Questo perch\u00e9 l’elemento della tabella \u00e8 un elemento a livello di blocco, al contrario di un elemento inline. "text -align: center" centra solo il contenuto inline, come il testo all’interno della tabella, anzich\u00e9 la tabella stessa.<\/p>\n
Tuttavia, per le versioni precedenti di Internet Explorer, esiste un bug in cui gli elementi a livello di blocco vengono trattati come elementi inline. Pertanto, l’unico modo per centrare una tabella in modo che funzioni con alcune versioni di IE \u00e8 impostare esplicitamente "text-align: center" sull’elemento padre della tabella (ad esempio l’elemento body come mostrato di seguito):<\/p>\n
body {<\/code><\/pre>\nPuoi testare come si comporteranno browser diversi con stili diversi, sia usando “margin-left: auto; margin-right: auto” o “text-align: center”.<\/p>\n
Esamineremo come centrare una tabella sia nei browser moderni che in quelli meno recenti in modo che appaia correttamente.<\/p>\n
Gli esempi avranno il seguente formato generale:<\/p>\n
<div>\n\n<table>\n\n<\/table>\n\n<\/div><\/code><\/pre>\nGli stili vengono applicati a entrambi<\/p>\n
,<\/p>\n
o talvolta entrambi.<\/p>\n
La sezione del foglio di stile con cui giocheremo per impostare i margini \u00e8:<\/p>\n
.center1<\/code><\/pre>\nQuesto esempio funzioner\u00e0 bene sui browser pi\u00f9 recenti. Funzioner\u00e0 anche sulla maggior parte dei browser meno recenti. Dopo aver utilizzato questo metodo, aprilo in diversi browser per verificare come appare.<\/p>\n
CSS per browser meno recenti e browser pi\u00f9 recenti insieme:<\/p>\n
.centertbl<\/code><\/pre>\nCome funziona? La prima parte viene inserita nel file<\/p>\n
. Questo centra una tabella in Internet Explorer 5 e Netscape 4. La seconda parte viene applicata al file<\/p>\n
All’interno di una<\/p>\n
.<\/p>\n
Le impostazioni per i margini ti permetteranno di centrare una tabella nei browser che funzionano bene con CSS. Quindi, il testo in linea verr\u00e0 riportato all’allineamento sinistro predefinito, sovrascrivendo l’iniziale "allineamento testo: centro" per il supporto del browser precedente.<\/p>\n
Come centrare con un margine<\/h3>\n
Uno dei modi pi\u00f9 comuni per centrare una tabella \u00e8 impostare entrambi i margini inferiore e superiore su 0 e i margini sinistro e destro su auto.<\/p>\n
Ecco un metodo comunemente usato:<\/p>\n
table {<\/code><\/pre>\nOppure puoi farlo in questo modo:<\/p>\n
table {<\/code><\/pre>\nSe stai cercando un tavolo della larghezza esatta, puoi farlo come faresti di solito e il margine automatico divider\u00e0 lo spazio rimasto.<\/p>\n
table {<\/code><\/pre>\nUn altro modo per farlo \u00e8 usare le percentuali per definire la larghezza:<\/p>\n
table {<\/code><\/pre>\nAllineamento delle celle: allineamento del testo e allineamento verticale<\/h3>\n
Se vuoi sapere come centrare il testo in CSS, ci sono due parti per allineare il testo in una cella; orizzontalmente e verticalmente. Orizzontalmente indica se il testo si allineer\u00e0 al centro, a sinistra oa destra di quella cella. Questo \u00e8 controllato dalla propriet\u00e0 text-align.<\/p>\n
Verticalmente \u00e8 se si trova al centro, in alto o in basso della cella. Questo \u00e8 controllato dalla propriet\u00e0 vertical-align.<\/p>\n
Si applicano le seguenti propriet\u00e0 all’elemento TH o TD per allineare il testo verticalmente e orizzontalmente come si desidera. Per esempio:<\/p>\n
td {\ntext-align: center;\nvertical-align: top;\n}<\/code><\/pre>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-201255-61e8be3d0713d.jpg\")
<\/a><\/p>\nLa giustificazione del testo si riferisce all’aggiunta di spazi tra tutte le parole fino a quando non si adattano perfettamente allo spazio disponibile sulla riga. L’ultima riga non giustifica.<\/p>\n
Consigli per lo stile della tavola<\/h3>\n
Prima di concludere, abbiamo pensato che potesse essere utile avere un elenco di suggerimenti rapidi come riferimento. Questi ti aiuteranno quando crei una tabella in CSS.<\/a><\/p>\n\n- Allinea il tuo<\/li>\n<\/ul>\n
,<\/p>\n
, e<\/p>\n
. Questo ti d\u00e0 anche pi\u00f9 parti in cui puoi applicare CSS. In questo modo \u00e8 pi\u00f9 semplice sovrapporre pi\u00f9 stili.<\/p>\n
\n- L’utilizzo del layout della tabella<\/a> ti consente di impostare pi\u00f9 facilmente le larghezze delle colonne. Quando imposti la larghezza dell’intestazione, la larghezza della colonna sar\u00e0 la stessa.<\/li>\n
- Usa colori alternati per rendere la tabella pi\u00f9 semplice da leggere. Con una scansione rapida, puoi vedere quali informazioni si trovano nella stessa riga.<\/li>\n
- Mantieni la tua tavola semplice. Puoi usare le percentuali, quindi non devi cambiare la taglia ogni volta.<\/li>\n
- Puoi utilizzare il collasso del bordo per creare un tavolo dall’aspetto pi\u00f9 pulito e ordinato.<\/li>\n<\/ul>\n
Considerazioni finali su come centrare un tavolo<\/h3>\n
Ora sai come centrare una tabella usando i CSS. Come discusso, il modo "giusto" per farlo \u00e8 impostare entrambi i margini destro e sinistro su auto. Questo metodo funziona per quasi tutti i nuovi browser che funzionano bene con CSS.<\/p>\n
Per alcuni browser meno moderni, questo non funzioner\u00e0. In questo caso, puoi modellare la tabella usando il metodo di allineamento del testo e circondarla<\/p>\n
. Se vuoi centrare la tabella usando l’allineamento del testo verso l’esterno<\/p>\n
, puoi farlo usando text-align.<\/p>\n
Puoi anche applicare uno stile alle celle della tabella con un valore di allineamento del testo o allineamento verticale ogni volta che desideri posizionare il testo in linea in un modo specifico.<\/p>\n
Se ti \u00e8 piaciuto leggere questo articolo su Come centrare una tabella con CSS, dovresti dare un’occhiata a questo sulle tabelle Bootstrap<\/a>.<\/p>\nAbbiamo anche scritto di alcuni argomenti correlati come il colore di sfondo della tabella<\/a>, le tabelle HTML<\/a>, le tabelle reattive<\/a> con CSS, le tabelle CSS<\/a> e i plug-in di tabelle jQuery<\/a>.<\/p>\n
\n\n\ne<\/span><\/span><\/td>\n testo utilizzando text-align. <\/span>Questo lo far\u00e0 sembrare pi\u00f9 ordinato e pi\u00f9 facile da leggere.<\/span><\/span><\/p>\n- Per suddividere il tuo tavolo in parti che hanno un senso, puoi usare<\/span><\/span><\/li>\n<\/th>\n<\/tr>\n<\/tbody>\n<\/tfoot>\n<\/tbody>\n<\/thead>\n<\/table>\n