Bedste måde at centrere tekst på i en tabelcelle

click fraud protection

Hvis du er en nybegynder webdesigner, har du muligvis spørgsmål om, hvordan du centrerer teksten inde i en tabelcelle. Med denne vejledning lærer du denne teknik på få minutter. Det er let - selvom du aldrig har prøvet det før.

Kom godt i gang

Centreringstekst inde i en celle gøres bedst med CSS, ligesom du ville centrere tekst i et andet element på din webside. Inden du begynder, skal du dog beslutte, hvad du præcist vil være centreret. Med en tabel har du flere muligheder, inklusive hver celle i tabellen; hver headercelle i tabellen hver celle i bordhovedet, bordkroppen eller bordfoden. Du kan også centrere en bestemt celle eller et sæt celler i tabellen.

Derudover skal du oprette en internt stilark i hovedet på dit dokument eller vedhæftet dokumentet som en eksternt stilark. Du placerer typografierne for at centrere dine tabelceller i det typografiark.

Sådan centreres hver celle i tabellen

Føj følgende linjer til dit stilark:

td, th {
tekstjustering: center;
}

Sådan centreres hver headercelle i tabellen

instagram viewer

Føj følgende linjer til dit stilark:

th {
tekstjustering: center;
}

Centrerer hver celle i bordhovedet, kroppen eller foden

For at centrere disse celler skal du tilføje tabel-tags, der ikke altid bruges, f.eks.

thead th, thead td {
tekstjustering: center;
}
tbody th, tbody td {
tekstjustering: center;
}
tfoot th, tfoot td {
tekstjustering: center;
}

Fjern typografierne for de områder, du ikke vil have centreret.

Sådan centreres en eller flere specifikke celler i en tabel

For at gøre dette skal du indstille en klasse på de celler, du vil være centreret.

Føj følgende attribut til de tabelceller, du vil være centreret:

Tilføj derefter følgende til dit stilark:

.centreret celle {
tekstjustering: center;
}

Du kan tilføje denne klasse til en hvilken som helst celle i din tabel.

Afslutter

Tøv ikke med at bruge disse stilarter på nogen af ​​dine bordceller. Du kan bruge dem på flettede celler eller på enkeltceller, og teksten indeni vil være centreret.

instagram story viewer