Ak ste začínajúcim webovým dizajnérom, mohli by ste mať otázky, ako vycentrovať text do bunky tabuľky. Vďaka tejto príručke sa túto techniku naučíte za pár minút. Je to ľahké - aj keď ste to nikdy predtým neskúšali.
Začíname
Centrujúci text vnútri bunky sa najlepšie vykonáva pomocou CSS, rovnako ako pri centrovaní textu v inom prvku na vašej webovej stránke. Než začnete, musíte sa však rozhodnúť, na čo konkrétne sa chcete sústrediť. V tabuľke máte niekoľko možností, vrátane každej bunky v tabuľke; každá bunka hlavičky v tabuľke každá bunka v hlave tabuľky, tele tabuľky alebo nohe tabuľky. V tabuľke môžete tiež vycentrovať konkrétnu bunku alebo skupinu buniek.
Okrem toho by ste mali vytvoriť interný štýl v hlave dokumentu alebo k dokumentu pripojený ako externá štýlová tabuľa. Štýly vložíte do stredu buniek tabuľky v tejto šablóne štýlov.
Ako vycentrovať každú bunku v tabuľke
Pridajte do svojej šablóny štýlov nasledujúce riadky:
td, th {
zarovnanie textu: na stred;
}
Ako vycentrovať každú bunku hlavičky v tabuľke
Pridajte do svojej šablóny štýlov nasledujúce riadky:
th {
zarovnanie textu: na stred;
}
Centrovanie každej bunky v hlave, tele alebo nohe stola
Ak chcete tieto bunky centrovať, musíte pridať značky tabuľky, ktoré sa nepoužívajú vždy, ako napr.
thead th, thead td {
zarovnanie textu: na stred;
}
tbody th, tbody td {
zarovnanie textu: na stred;
}
tfoot th, tfoot td {
zarovnanie textu: na stred;
}
Odstráňte štýly oblastí, ktoré nechcete centrovať.
Ako vycentrovať konkrétnu bunku alebo bunky v tabuľke
Aby ste to dosiahli, musíte nastaviť triedu na bunky, ktoré chcete vycentrovať.
Pridajte nasledujúci atribút do buniek tabuľky, ktoré chcete vycentrovať:
Potom do šablóny štýlov pridajte nasledovné:
.centrovaná bunka {
zarovnanie textu: na stred;
}
Túto triedu môžete pridať do ktorejkoľvek bunky v tabuľke.
Balenie
Neváhajte použiť tieto štýly na ktorúkoľvek zo svojich buniek tabuľky. Môžete ich použiť na zlúčené bunky alebo na jednotlivé bunky a text vo vnútri bude centrovaný.