Il modo migliore per centrare il testo in una cella di tabella

click fraud protection

Se sei un Web designer alle prime armi, potresti avere domande su come centrare il testo all'interno di una cella di tabella. Con questa guida, impara questa tecnica in pochi minuti. È facile, anche se non ci hai mai provato prima.

Iniziare

Centratura del testo all'interno di una cella è meglio farlo con i CSS, proprio come centrare il testo in un altro elemento della pagina Web. Prima di iniziare, tuttavia, devi decidere cosa esattamente vuoi essere centrato. Con una tabella, hai diverse opzioni, inclusa ogni cella della tabella; ogni cella di intestazione della tabella ogni cella della testata della tabella, del corpo della tabella o del piede della tabella. Puoi anche centrare una cella specifica o un insieme di celle all'interno della tabella.

Inoltre, dovresti creare un foglio di stile interno nell'intestazione del documento o allegato al documento come foglio di stile esterno. Metterai gli stili per centrare le celle della tabella in quel foglio di stile.

Come centrare ogni cella nella tabella

instagram viewer

Aggiungi le seguenti righe al tuo foglio di stile:

td, th {
allineamento del testo: centro;
}

Come centrare ogni cella di intestazione nella tabella

Aggiungi le seguenti righe al tuo foglio di stile:

th {
allineamento del testo: centro;
}

Centrare ogni cella nella testa, corpo o piede della tabella

Per centrare queste celle, è necessario aggiungere tag di tabella che non vengono sempre utilizzati, ad esempio.

thead th, thead td {
allineamento del testo: centro;
}
tbody th, tbody td {
allineamento del testo: centro;
}
tpiede th, tpiede td {
allineamento del testo: centro;
}

Rimuovi gli stili per le aree che non vuoi centrare.

Come centrare una cella o celle specifiche in una tabella

Per fare ciò, è necessario impostare una classe sulle celle che si desidera centrare.

Aggiungi il seguente attributo alle celle della tabella che vuoi centrare:

Quindi aggiungi quanto segue al tuo foglio di stile:

.cella-centrata {
allineamento del testo: centro;
}

Puoi aggiungere questa classe a qualsiasi cella della tabella.

Avvolgendo

Non esitare a utilizzare questi stili su una qualsiasi delle celle della tabella. Puoi usarli su celle unite o su singole celle e il testo all'interno sarà centrato.

instagram story viewer