Sužinokite, kaip sukurti CSS lentelės sritį per penkias minutes
Gali būti, kad girdėjote, kad CSS ir HTML lentelės nesiderina. Tai tiesiog nėra tiesa. Taip, naudojant išdėstymo HTML lenteles, nebėra tinkamiausia interneto dizaino praktika, pakeista CSS maketo stiliumi, tačiau lentelės vis dar yra teisingas žymėjimas, naudojamas pridėti lentelės duomenis į tinklalapį.
Deja, nes tiek daug žiniatinklio profesionalų pasislėpė nuo stalų, manydami, kad jie yra nuodai, daugelis šių specialistų turi mažai patirties dirbdami su šiuo bendru HTML elementu ir kova, kai jie turi juos tvarkyti tinklalapyje. Pavyzdžiui, jei turite lentelę puslapyje ir norite pridėti vidines eilutes prie lentelės langelių.
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ų. Taip pat galite naudoti HR žymę, kad pridėtumėte eilutes į atskiras ląsteles.
Kad galėtumėte taikyti šiame straipsnyje apibūdintus stilius, akivaizdu, kad jūsų tinklalapyje turite lentelę . Tada turėtumėte sukurti stiliaus lapą kaip vidinį stiliaus lapą savo dokumento viršuje (tikėtina, kad tai bus tik tuo atveju, jei jūsų "svetainė" yra vienas puslapis) arba pridedamas prie dokumento kaip išorinis stiliaus lapas (tai, ką jūs tai padarys, jei jūsų svetainėje yra keli puslapiai - leidžiant visus puslapius stilizuoti iš vieno išorinio lapo). Jūs įtraukiate stilių, kad į tą stilių lapą būtų pridėtos interjero linijos.
Prieš tau pradedant
Pirmiausia turite nuspręsti, kur norite, kad eilutės būtų rodomos lentelėje. Turite keletą parinkčių, įskaitant:
- Aplink visas ląsteles formuoti tinklelį;
- Linijų nustatymas tarp tik stulpelių;
- Tiesiog tarp eilučių; arba
- 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ų aplink visas lenteles lentelėje, sukurdami tą patį tinkle efektą, pridėkite toliau nurodytus elementus į savo stilių lentelę:
td, th {
siena: tvirtas 1px juodas;
}
Kaip pridėti eilučių tarp stulpelių lentelėje
Norėdami pridėti eilučių tarp stulpelių (tai sukuria vertikalias linijas, kurios rodomos lentelės stulpeliuose iš viršaus į apačią), pridėkite toliau nurodytus elementus į savo stilių lentelę:
td, th {
siena-kairė: tvirta 1px juoda;
}
Tada, jei nenorite, kad jie būtų rodomi pirmame stulpelyje, turėsite pridėti klasę į tuos ir td ląsteles. Šiame pavyzdyje daroma prielaida, kad turime tokios klasės ląstelių, kuriose nėra sienų , ir pašalinsime sieną su šia konkretesne CSS taisyklėmis. Taigi čia yra HTML klasė, kurią naudosime:
class = "no-border">
Tada mes galėtume pridėti šį stilių į mūsų stiliaus lapą:
.ne-border {
siena-kairė: nė viena;
}
Kaip pridėti eilučių tarp eilučių lentelėje
Kaip ir papildant eilučių tarp stulpelių, galite tai padaryti naudodami tik vieną paprastą stilių, pridėtą prie jūsų stiliaus lapo. Žemiau pateiktoje CSS būtų pridėta vertikalių linijų tarp kiekvienos mūsų lentelės eilutės:
tr {
border-bottom: tvirtas 1px juodas;
}
Ir pašalinus sieną iš lentelės apačios, jūs vėl pridėsite klasę į tą tr žymę:
class = "no-border">
Į savo stilių lapą pridėkite tokį stilių:
.ne-border {
border-bottom: nėra;
}
Kaip pridėti eilučių tarp atskirų stulpelių ar eilučių lentelėje
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">
Linijų tarp eilučių pridėti yra daug lengviau, nes galite pridėti klasę į eilutę, kuria norite liniją.
class = "border-bottom">
Tada pridėkite CSS savo stiliaus lape:
pasienio pusė {
siena-kairė: tvirta 1px juoda;
}
.border-apačia {
border-bottom: tvirtas 1px juodas;
}
Kaip pridėti eilučių aplink atskiras ląsteles lentelėje
Norėdami pridėti eilučių aplink atskiras ląsteles, pridedate klasę į ląsteles, kurioms norite palikti sieną:
class = "border">
Tada savo stiliaus lape pridėkite šį CSS:
.order {
siena: tvirtas 1px juodas;
}
Kaip pridėti eilučių atskirų elementų lentelėje
Jei norite pridėti eilučių ląstelės turinio viduje, paprasčiausias būdas tai padaryti yra horizontaliosios taisyklės žyma (
).
Naudingi patarimai
Jei pastebėjote savo sienų spragas, turėtumėte įsitikinti, kad lentelėje yra nustatytas sienų žlugimo stilius. Į savo stilių lapą pridėkite toliau nurodytą informaciją:
stalas {
sienos žlugimas: žlugimas;
}
Galite išvengti visų aukščiau pateiktų CSS ir naudoti lentelės žymoje sienos atributą. Vis dėlto supraskite, kad jo atributas, nors ir nepažeistas, yra žymiai mažiau lankstus nei CSS, nes galite nustatyti tik sienos plotį ir jį galite naudoti tik visose lentelės langeliuose arba nė vienoje.