Ak ste nováčik webdesigner, môžete mať otázky, ako vycentrovať text vnútri bunky tabuľky. S touto príručkou zvládnite túto techniku za niekoľko minút. Je to jednoduché - aj keď ste sa nikdy predtým nepokúšali.
Začíname
Vycentrovanie textu vnútri bunky sa najlepšie vykoná pomocou CSS, rovnako ako v strede textu v inom prvku na vašej webovej stránke. Skôr ako začnete, musíte sa rozhodnúť, na čo chcete byť zamerané. S tabuľkou máte niekoľko možností vrátane každej bunky v tabuľke. každá bunka hlavičky v tabuľke každej bunky v hlave stola, telese tabuľky alebo nohy stola. V tabuľke môžete tiež vycentrovať určitú bunku alebo skupinu buniek.
Okrem toho by ste mali vytvoriť interný štýl písma v hlavičke dokumentu alebo pripojený k dokumentu ako externý štýl . Styly umiestnite tak, aby vycentrovali bunky tabuľky v tomto štýle.
Ako vycentrovať každú bunku v tabuľke
Pridajte do svojej šablóny štýlov nasledujúce riadky:
td, th {text-align: center; }Ako vycentrovať každú bunku hlavičky v tabuľke
Pridajte do svojej šablóny štýlov nasledujúce riadky:
th {text-align: center; }Zostrihnutie každej bunky v hlave, tele alebo nohe
Ak chcete centrávať tieto bunky, musíte pridať tabuľkové značky, ktoré nie sú vždy používané, napríklad ,
a . Potom obklopíte bunky tabuľky pomocou týchto značiek, aby ste identifikovali hlavu, telo a nohu stola. Potom pridáte do svojho štýlu hárkov: thead th, thead th {text-align: center; } tbody th, tbody td {text-zarovnanie: centrum; } tfoot th, tfoot td {text-zarovnanie: centrum; }Odstráňte štýly pre oblasti, ktoré nechcete byť vycentrované.
Ako centrovanie špecifickej bunky alebo buniek v tabuľke
Ak to chcete urobiť, musíte nastaviť triedu na bunky, ktoré chcete centrovať.
Pridajte nasledujúci atribút do buniek tabuľky, ktoré chcete centrovať:
Potom pridajte do svojho štýlu hárkov:
.centered-cell {text-align: center; }Túto triedu môžete pridať do ľubovoľnej bunky v tabuľke.
Zbaliť
Neváhajte používať tieto štýly na ľubovoľnej bunke tabuľky. Môžete ich použiť na zlúčené bunky alebo na jednotlivé bunky a text v nich bude sústredený.