Kaip centro tekstą lentelės ląstelėje

Jei esate pradedantysis interneto dizaineris, galbūt turite klausimų, kaip centruoti tekstą lentelės langelyje. Su šiuo vadovu įsisavinkite šią techniką vos kelias minutes. Tai lengva - net jei niekada anksčiau bandėte.

Pradžia

Teksto centravimas viduje ląstelių yra geriausia padaryti su CSS, lygiai taip pat, kaip ir centre esantį tekstą kitame tinklalapio elemente. Prieš pradėdami, jūs turite nuspręsti, ką tiksliai norite būti centre. Su stalu turite kelias parinktis, įskaitant kiekvieną langelį lentelėje; kiekviena antraštės langelio lentelė kiekvienoje stalo galvos, stalo kūno ar stalo pėdos langelyje. Jūs taip pat galite nukreipti tam tikrą ląstelę arba ląstelių grupę lentelėje.

Be to, savo dokumento viršuje turėtumėte sukurti vidinį stiliaus lapą arba pridėti prie dokumento kaip išorinį stiliaus lapą . Tada sukursite stilių, kad centruotų savo stalo langelius šiame stiliaus lape.

Kaip centre kiekvieną ląstelę lentelėje

Į savo stilių lapą pridėkite šias eilutes:

td, th {text-align: center; }

Kaip centre kiekvieną antraštę lange lentelėje

Į savo stilių lapą pridėkite šias eilutes:

th {text-align: center; }

Centruokite kiekvieną ląstelę stalo galvoje, kūno ar pėdos

Kad centruotų šias ląsteles, reikia pridėti lentelės žymeles, kurios ne visada naudojamos, pvz., , ir . Tada jūsų lentelės ląstelės bus supintos su šiomis žymėmis, kad būtų galima nustatyti stalo galvą, kūną ir pėdą. Po to prie savo stiliaus lapo pridėsite toliau nurodytus dalykus:

thead th, thead td (text-align: center; } tbody th, tbody td {text-align: center; } tfoot th, tfoot td (text-align: center; }

Pašalinkite sričių, kurių nenorite centre, stilius.

Kaip centre nustatyti konkrečią ląstelę ar ląsteles lentelėje

Norėdami tai padaryti, turite nustatyti klasę ląstelėse, į kurias norite būti centre.

Lentelių ląstelėms, į kurias norite būti centre, pridėti šį atributą:

class = "centered-cell" >

Tada pridėkite toliau nurodytus elementus į savo stiliaus lapą:

.centered-cell {text-align: center; }

Šią klasę galite pridėti prie bet kurios lentelės langelio.

Įpakavimas

Nedvejodami naudoti šių stilių bet kurioje savo lentelės ląstelėse. Galite juos naudoti sujungtose ląstelėse arba vienose ląstelėse, o tekstas bus centre.