Зөвхөн таван минутын дотор CSS хүснэгтийг хэрхэн үүсгэх талаар сурах
Та CSS болон HTML хүснэгтүүд холилдохгүй байгааг сонсож байсан байх. Энэ нь зүгээр л үнэн биш юм. Тиймээ, HTML хүснэгтүүдийг ашиглах нь вэб дизайны шилдэг туршлагууд байхаа больсон, CSS байршлын загвараар солигдсон боловч хүснэгтүүд нь хүснэгтэн өгөгдлийг вэбсайтад нэмэхийн тулд хүснэгтүүд хэвээр байна.
Харамсалтай нь олон тооны вэбсайтууд хортой гэж бодсон хүснэгтүүдээс хол байсан тул эдгээр мэргэжилтнүүдийн ихэнх нь энэ энгийн HTML элементтэй ажиллах туршлага багатай бөгөөд тэдгээрийг вэб хуудас дээр ажиллахад тулгарах тэмцэл багатай байдаг. Жишээлбэл, та хуудас дээр хүснэгтэд байгаа бөгөөд хүснэгтийн нүдэнд дотоод мөрүүдийг нэмэхийг хүсч байгаа бол.
CSS Хүснэгт Батс
Хүснэгтэд хүснэгт нэмэхийн тулд CSS ашигладаг бол энэ нь зөвхөн хилийн гадна талын хилийг л нэмнэ. Хэрвээ та хүснэгтийн хувийн нүдэнд дотоод шугамыг нэмэхийг хүсвэл доторх CSS элементүүдийг хилээр нэмэх хэрэгтэй. Та мөн Хүний нөөцийн командыг тус тусад нь эс дотор нь мөр нэмэх боломжтой.
Энэ нийтлэлд орсон загваруудыг хэрэглэхийн тулд та өөрийн вэб хуудсандаа хүснэгттэй байх хэрэгтэй. Дараа нь та баримт бичгийнхаа толгой доторхи хэв маягийн хуудсыг хэвлэмэл хуудсыг үүсгэх ёстой (хэрэв таны "сайт" нь нэг хуудас байна) эсвэл документод гаднах загварын хуудас (энэ бол та хэрэв таны вэбсайт олон хуудсууд байвал нэг гадаад хуудаснаас бүх хуудсуудыг хэвлүүлэх боломж олгоно). Та хэв маягийн хуудсандаа дотоод шугамыг нэмэх стилиудыг байрлуулах болно.
Та эхлэхээсээ өмнө
Эхлээд та хүснэгтэд мөрүүдийг хаанаас харуулахыг хүсч байгаагаа шийдэх хэрэгтэй. Танд дараах хэд хэдэн сонголт байна:
- Сүлжээг үүсгэхийн тулд бүх эсийн эргэн тойронд;
- Зөвхөн баганыг хооронд нь холбох;
- Зөвхөн мөр хоорондын зай; эсвэл
- Онцлог баганууд болон эгнээний хооронд.
Мөр тус бүр эс доторх мөрүүдийг байрлуулж болно.
Хүснэгтийн бүх нүдийг тойрон мөрүүдийг хэрхэн нэмэх
Хүснэгтэд байгаа бүх нүдийг тойрон мөр нэмэхийн тулд сүлжээнд төстэй нөлөөллийг үүсгэхийн тулд дараах зүйлийг нэмнэ үү:
td, th {
border: хатуу 1px хар;
}
Хүснэгтэд байгаа багануудын хооронд мөрүүдийг хэрхэн нэмэх
Баганын хоорондох мөр нэмэх (энэ нь хүснэгтийн баганууд дээрээс дээшээ доошоо босоо шугам үүсгэдэг), дарааллын дагуу таны загварын хуудсанд нэмнэ үү:
td, th {
border-left: хатуу 1px хар;
}
Дараа нь, хэрэв та эхний баганад тэдгээрийг харуулахыг хүсэхгүй бол, тэдгээрийг анги болон td нүдээр ангилах хэрэгтэй болно. Энэ жишээнд бид эдгээр нүдэнд хилийн ямар ч анги байдаггүй бөгөөд бид хил хязгаарыг илүү тодорхой CSS дүрмээр устгах болно. Тиймээс бид HTML классаа ашиглах болно:
class = "no-border">
Дараа нь бид загварын хэв маягтаа дараахь загварыг нэмж оруулж болно:
.no-border {
border-left: none;
}
Хүснэгтийн мөрүүдийг хооронд нь хэрхэн нэмэх вэ?
Баганын хоорондох мөрүүдийг нэмэхийн нэгэн адил та хэв маягийн хуудсанд нэмсэн энгийн нэг хэв маягаар үүнийг хийж болно. CSS-ийн доор бидний хүснэгтийн мөр бүрт босоо шугам нэмэх болно:
tr {
border-bottom: хатуу 1px хар;
}
Хүснэгтийн ёроолоос хилийг арилгахын тулд дахиад нэг трендийн нэрийг дахин нэмнэ үү:
class = "no-border">
Дараах стилийг өөрийн загварын хуудас дээр нэмнэ үү:
.no-border {
хил хязгаар: байхгүй;
}
Хүснэгтэд тусгай багана эсвэл мөр хоорондох мөрүүдийг хэрхэн нэмэх
Хэрэв та зөвхөн тодорхой мөр эсвэл баганын хоорондох мөрийг хүсвэл эдгээр нүд эсвэл мөрөнд анги хэрэглэх шаардлагатай. Баганын хоорондох мөрийг нэмэх нь мөр хоорондын зайг арай илүү хүндрүүлэх учир нь тухайн баганын нүд болгонд анги нэмэх хэрэгтэй. Хэрэв таны хүснэгт автоматаар CMS- ээс автоматаар үүсгэгддэг бол энэ нь боломжгүй байж болох юм. Хэрэв та хуудсыг гараараа кодолж байгаа бол энэ үр дүнд хүрэхийн тулд тохирох ангиудыг нэмж болно.
class = "border-border">
Мөр хооронд мөр нэмэх нь илүү хялбар байх болно, та ердөө л мөрийг хүссэн мөрийг л нэмэх боломжтой.
class = "border-bottom">
Дараа нь өөрийн загварын хуудсанд CSS нэмнэ үү:
.order-side {
border-left: хатуу 1px хар;
}
.border-bottom {
border-bottom: хатуу 1px хар;
}
Хүснэгтэд байгаа хувь хүний нүдийг тойрон хэрхэн мөр нэмэх
Мөр бүрийг тойрон мөр нэмэхийн тулд хил дээрээс нь хүсч буй нүдэнд анги нэмэх:
class = "border">
Дараа нь таны загварын хуудсан дээр дараах CSS нэмнэ үү:
.order {
border: хатуу 1px хар;
}
Хүснэгтэд тусад нь хүснэгтэд оруулах мөрүүдийг хэрхэн нэмэх
Хэрвээ та үүрний контентын доторх мөрүүдийг нэмэхийг хүсвэл үүнийг хийх хамгийн хялбар арга бол хэвтээ хаягийн таг (
) юм.
Ашигтай зөвлөмжүүд
Хэрвээ та хил хязгаарыг анзаарсан бол хил хязгаарын хэв маягийг таны ширээн дээр тавьсан эсэхийг шалгаарай. Дараах хуудсанд өөрийн загварын хуудсанд нэмнэ үү:
table {
хилийн уналт: уналт;
}
Та дээрх бүх CSS-ээс зайлсхийж, өөрийн хүснэгтийн таг дахь хилийн шинж чанарыг ашиглаж болно. Хэдийгээр хуучирсан биш ч гэсэн түүний шинж чанар нь CSS-ээс ихээхэн уян хатан биш гэдгийг та ойлгох хэрэгтэй. Учир нь та зөвхөн хилийн өргөнийг тодорхойлж чадах бөгөөд зөвхөн хүснэгтийн бүх нүдэнд эсвэл үүнийг байхгүй байх боломжтой.