Om du är en nybörjad webbdesigner kanske du har frågor om hur du centrerar texten inuti en tabellcell. Med den här guiden lär du dig den här tekniken på bara några minuter. Det är enkelt - även om du aldrig har försökt förut.
Komma igång
Centreringstext inuti en cell görs bäst med CSS, precis som om du skulle centrera text i ett annat element på din webbsida. Innan du börjar måste du dock bestämma vad du vill vara centrerad. Med en tabell har du flera alternativ, inklusive varje cell i tabellen; varje rubrikcell i tabellen varje cell i bordshuvudet, bordskroppen eller bordsfoten. Du kan också centrera en specifik cell eller en uppsättning celler i tabellen.
Dessutom bör du skapa en internt stilark i dokumentets huvud eller bifogas dokumentet som en externt stilark. Du kommer att placera stilarna för att centrera dina tabellceller i det stilarket.
Hur man centrerar varje cell i tabellen
Lägg till följande rader i ditt stilark:
td, th {
textjustera: centrum;
}
Hur man centrerar varje rubrikcell i tabellen
Lägg till följande rader i ditt stilark:
th {
textjustera: centrum;
}
Centrera varje cell i bordets huvud, kropp eller fot
För att centrera dessa celler måste du lägga till tabelltaggar som inte alltid används, t.ex.
thead th, thead td {
textjustera: centrum;
}
tbody th, tbody td {
textjustera: centrum;
}
tfoot th, tfoot td {
textjustera: centrum;
}
Ta bort stilarna för de områden du inte vill centrera.
Hur man centrerar en specifik cell eller celler i en tabell
För att göra detta måste du ställa in en klass på de celler som du vill centrera.
Lägg till följande attribut i tabellcellerna du vill centrera:
Lägg sedan till följande i ditt stilark:
.centrerad cell {
textjustera: centrum;
}
Du kan lägga till den här klassen i valfri cell i din tabell.
Avslutar
Tveka inte att använda dessa stilar på någon av dina bordsceller. Du kan använda dem på sammanslagna celler eller på enstaka celler och texten i kommer att vara centrerad.