Najbolji način za centriranje teksta u ćeliji tablice

Ako ste početnik web dizajnera, možda ćete imati pitanja o tome kako centrirati tekst unutar ćelije tablice. Uz ovaj vodič naučite ovu tehniku ​​u samo nekoliko minuta. Lako je - čak i ako nikada prije niste pokušali.

Početak rada

Tekst koji centrira unutar ćelije najbolje je raditi sa CSS-om, baš kao što biste centrirali tekst u drugom elementu na svojoj web stranici. Prije nego što započnete, morate odlučiti na što točno želite biti usredotočeni. S tablicom imate nekoliko mogućnosti, uključujući svaku ćeliju u tablici; svaka ćelija zaglavlja u tablici svaka ćelija u glavi tablice, tijelu stola ili stopalu stola. Također možete centrirati određenu ćeliju ili skup ćelija unutar tablice.

Osim toga, trebali biste stvoriti unutarnji slog u glavi vašeg dokumenta ili u prilogu dokumenta kao vanjska tablica stilova. Stilove ćete staviti u središte ćelija svoje tablice u tom listu stilova.

Kako centrirati svaku ćeliju u tablici

Sljedećim redovima dodajte u svoj stil:

td, th {
poravnanje teksta: središte;
}
instagram viewer

Kako centrirati svaku ćeliju zaglavlja u tablici

Sljedećim redovima dodajte u svoj stil:

th {
poravnanje teksta: središte;
}

Centriranje svake stanice u glavi, tijelu ili stopalu stola

Da biste centrirali ove ćelije, trebate dodati oznake tablice koje se ne koriste uvijek, poput.

thead th, thead td {
poravnanje teksta: središte;
}
tbody th, tbody td {
poravnanje teksta: središte;
}
tfoot th, tfoot td {
poravnanje teksta: središte;
}

Uklonite stilove za područja koja ne želite centrirati.

Kako centrirati određenu ćeliju ili stanice u tablici

Da biste to učinili, morate postaviti klasu na ćelije koje želite da budu centrirane.

Dodajte sljedeći atribut ćelijama tablice koje želite centrirati:

Zatim dodajte sljedeće na svoj list stilova:

.centered-cell {
poravnanje teksta: središte;
}

Ovu klasu možete dodati u bilo koju ćeliju u tablici.

Završavati

Ne ustručavajte se koristiti ove stilove na bilo kojoj od ćelija tablice. Možete ih koristiti na spojenim ćelijama ili na pojedinačnim ćelijama, a tekst unutar će biti centriran.

instagram story viewer