Gali būti, kad girdėjote, kad CSS ir HTML lentelės nesiderina. Tai nėra atvejis. Taip, naudojant išdėstymo HTML lenteles, nebėra tinkamiausios interneto dizaino praktikos, nes jos buvo pakeistos CSS išdėstymo stiliumi, tačiau lentelės vis dar yra teisingas žymėjimas, naudojamas pridėti lentelės duomenis į tinklalapį.
Kadangi daugelis žiniatinklio profesionalų, linkę iš stalų, manydami, kad jie yra nieko, bet sunku, daugelis šių specialistų turi mažai patirties dirbdami su šiuo bendruoju HTML elementu, ir jie kenčia, kai jie turi pridėti vidines eilutes prie tinklalapių ląstelių.
CSS lentelių sienos
Kai naudojate CSS, kad pridėtumėte sienų prie lentelių, ji tik prideda sieną aplink lentelės ribą. Jei norite pridėti vidines eilutes į atskiras tos lentelės ląsteles, turite pridėti sienas prie vidinių CSS elementų. Galite naudoti HR žymą pridėti eilučių viduje atskiras ląsteles.
Norėdami pritaikyti šiame vadovėlyje pateiktus stilius, tinklalapyje reikia lentelės. Tada sukuriate stiliaus lapą kaip vidinį stiliaus lapą dokumento viršuje (jei kalbate tik su vienu puslapiu) arba pridedamas prie dokumento kaip išorinio stiliaus lapą (jei svetainėje yra keli puslapiai). Jūs įtraukėte stilių, kad į stiliaus lapą pridėtumėte interjero linijas.
Prieš tau pradedant
Nuspręskite, kur norite, kad eilutės būtų rodomos lentelėje. Turite keletą parinkčių, įskaitant:
- Aplink visas ląsteles, kad suformuotų tinklelį
- Linijų tarp tik stulpelių padėtis
- Tiesiog tarp eilučių
- Tarp konkrečių stulpelių ar eilučių.
Taip pat galite nustatyti linijas aplink atskiras ląsteles arba atskirų langelių viduje.
Kaip pridėti eilučių aplink visas ląsteles lentelėje
Norėdami pridėti eilučių visose lentelės ląstelėse, sukurdami tinklelio efektą, pridėkite toliau pateiktą stilių lentelę:
td, th {siena: tvirtas 1px juodas;} Norėdami pridėti eilučių tarp stulpelių, kad būtų sukurtos vertikalios linijos, kurios lentelės stulpeliuose rodomos iš viršaus į apačią, pridėkite toliau nurodytą lentelę stilių: td, th {siena-kairė: tvirta 1px juoda;} Jei nenorite, kad pirmajame stulpelyje būtų rodomos vertikalios linijos, pridedate klasę į th ir td ląstelės. Šiame pavyzdyje prisiimkite klasę be sienų ant tų ląstelių ir pašalinkite sieną su CSS taisyklėmis. Naudojama HTML klasė yra: class = "no-border"> Tada pridėkite stiliaus lentelę prie tokio stiliaus: .ne-border {siena-kairė: nė viena;} Kaip ir pridėjus eilučių tarp stulpelių, galite pridėti horizontalias eilučių tarp eilučių vienu paprastu stiliu, pridedamu prie stiliaus lapo: tr {border-bottom: tvirtas 1px juodas;} Jei norite pašalinti sieną iš lentelės apačios, vėl įtrauksite į ją klasę tag: class = "no-border"> Į savo stilių lapą pridėkite tokį stilių: .ne-border {border-bottom: nėra;} Jei norite tik eilučių tarp konkrečių eilučių ar stulpelių, turite naudoti klasę toms ląstelėms ar eilutėms. Pridėjimas tarp stulpelių yra šiek tiek sudėtingesnis nei tarp eilučių, nes turite pridėti klasę į kiekvieną tos stulpelio langelį. Jei jūsų lentelė automatiškai sugeneruojama iš tam tikros rūšies TVS, tai gali būti neįmanoma, tačiau jei jūs ranka koduojate puslapį, galėtumėte pridėti tinkamas klases, kad būtų galima pasiekti šį efektą. class = "side-border"> Lygų tarp eilučių pridėti lengviau, nes galite pridėti klasę eilutėje, kurioje norite liniją. class = "border-bottom"> Tada pridėkite CSS į savo stilių lentelę: pasienio pusė {siena-kairė: tvirta 1px juoda;}.border-apačia {border-bottom: tvirtas 1px juodas;} Norėdami pridėti eilučių aplink atskiras ląsteles, pridedate klasę į ląsteles, kurioms norite palikti sieną: class = "border"> Tada pridėkite šį CSS į savo stilių lentelę: .order {siena: tvirtas 1px juodas;} Jei norite pridėti eilučių ląstelės turinio viduje, lengviausias būdas tai padaryti yra su horizontaliosios taisyklės žyme (). Jei pastebėjote savo sienų spragas, įsitikinkite, kad lentelėje yra nustatytas brūkšninio kodo stilius. Į savo lentelę stilių pridėkite toliau nurodytą informaciją: stalas {sienos žlugimas: žlugimas;} Jūs galite išvengti visų ir naudoti sienos atributą savo lentelės žymoje. Vis dėlto supraskite, kad šis atributas, nors ir nepažeistas, yra žymiai mažiau lankstus nei CSS, nes galite apibrėžti tik sienos plotį ir jį galite naudoti tik aplink visas lentelės langelius arba nė vieno. Kaip pridėti eilučių tarp stulpelių lentelėje
Kaip pridėti eilučių tarp eilučių lentelėje
Kaip pridėti eilučių tarp atskirų stulpelių ar eilučių lentelėje
Kaip pridėti eilučių aplink atskiras ląsteles lentelėje
Kaip pridėti eilučių atskirų elementų lentelėje
Naudingi patarimai
