Besh daqiqa ichida CSS stol chegarasini qanday yaratishni bilib oling
CSS va HTML jadvallar aralashmaganligini eshitgan bo'lishingiz mumkin. Bu shunchaki haqiqat emas. Ha, jadval uchun HTML jadvallarni ishlatib, endi veb-dizaynning eng yaxshi amaliyoti emas, CSS-ning tartib-qoidalari bilan almashtirildi, ammo jadvallar veb-sahifaga jadvalli ma'lumotlarni qo'shish uchun foydalanish uchun to'g'ri belgilar.
Afsuski, juda ko'p veb-mutaxassislar zahar ekanligini o'ylab, jadvallardan uzoqlashib ketganligi sababli, ko'plab professionallar ushbu umumiy HTML element bilan ishlashda va ularni veb-sahifasida ko'rib chiqish kerak bo'lgan kurashda juda kam tajribaga ega. Misol uchun, agar siz sahifada jadvalga ega bo'lsangiz va jadval chizig'iga ichki satrlarni qo'shishni xohlasangiz.
CSS stoli chegaralari
Jadvallarga chegara qo'shish uchun CSS- dan foydalanganda, u faqat jadvalning tashqarisidagi chegarani qo'shadi. Jadvalning alohida hujayralariga ichki chiziqlar qo'shish zarur bo'lsa, ichki CSS elementlariga chegaralarni kiritishingiz kerak. Bundan tashqari, har bir hujayralar ichidagi qatorlarni qo'shish uchun HR yorlig'idan foydalanishingiz mumkin.
Ushbu maqolada keltirilgan uslublarni qo'llash uchun veb-saytingizda jadval bo'lishi kerak. Keyinchalik hujjatning boshida ichki uslublar jadvalini yaratishingiz kerak bo'ladi (ehtimol, agar siz "sayt" bitta sahifa bo'lsa) yoki hujjatga tashqi stil sahifasi sifatida qo'shilasiz (bu sizning agar saytingiz bir nechta sahifalar bo'lsa, barchasini bitta tashqi varaqdan uslublashingiz mumkin). Uslublar jadvalini ichki jadvallarni ushbu uslub sahifasiga qo'shish uchun joylashtirasiz.
Boshlashdan oldin
Birinchidan, chiziqlarni jadvalingizda ko'rishni istagan joyni tanlashingiz kerak. Sizda turli xil variantlar mavjud:
- Barcha hujayralarni panjara hosil qilish uchun o'rab qo'yish;
- Chiziqlarni faqat ustunlar orasidagi joylashtirish;
- Faqat qatorlar orasidagi; yoki
- Muayyan ustunlar yoki qatorlar orasida.
Bundan tashqari, alohida xujayralar atrofidagi chiziqlarni yoki alohida kameralar ichida joylashtirishingiz mumkin.
Jadvaldagi barcha hujayralar atrofida chiziqlar qo'shish
Jadvaldagi barcha xujayralar atrofidagi satrlarni qo'shish uchun ushbu gridga o'xshash effekt yaratish uchun uslub sahifasiga quyidagilarni qo'shing:
td, son {
chegarasi: qattiq 1px qora;
}
Jadvaldagi faqat ustunlar orasidagi chiziqlar qanday qo'shiladi
Ustunlar orasidagi satrlarni qo'shish uchun (jadvalning ustunlaridan yuqoridan pastgacha bo'lgan vertikal chiziqlar hosil qiladi), uslub sahifasiga quyidagilarni qo'shing:
td, son {
chegara-chap: qattiq 1px qora;
}
So'ngra, agar siz ularning birinchi ustunida paydo bo'lishini xohlamasangiz, u va td hujayralariga sinf qo'shishingiz kerak bo'ladi. Ushbu misolda, biz ushbu hujayralardagi chegara chegarasi mavjud deb hisoblaymiz va chegarani ushbu aniqroq CSS qoidasi bilan olib tashlaymiz. Shunday qilib biz foydalanadigan HTML sinf:
class = "no-border">
Keyin uslublar jadvalimizga quyidagi uslubni qo'shishimiz mumkin:
cheksiz {
chegara-chap: yo'q;
}
Jadvalda faqat qatorlar orasidagi satrlarni qo'shish
Ustunlar orasidagi chiziqlar qo'shilgandek, uslublar jadvaliga qo'shilgan oddiy uslub bilan buni qilishingiz mumkin. Quyidagi CSS jadvalimizning har bir qatori o'rtasida vertikal chiziqlar qo'shib beradi:
tr {
pastki taglik: qattiq 1px qora;
}
Chegarani stol ostidan olib tashlash uchun, siz yana bir marta ushbu tre tagiga sinf qo'shasiz:
class = "no-border">
Uslublar jadvalingizga quyidagi uslubni qo'shing:
cheksiz {
chegara pastki: yo'q;
}
Jadvalda muayyan ustunlar yoki qatorlar orasidagi chiziqlar qo'shish
Faqat ma'lum satrlar yoki ustunlar orasidagi chiziqlarni xohlasangiz, u hujayralar yoki satrlarda sinfdan foydalanishingiz kerak. Ustunlar orasidagi satr qo'shish satrlar orasidagi biroz qiyinroqdir, chunki siz bu ustundagi har bir xonaga sinf qo'shishingiz kerak. Agar sizning jadvalingiz avtomatik ravishda CMSdan yaratilgan bo'lsa, bu mumkin bo'lmasa ham, agar siz qo'lni kodlashni qo'llayotgan bo'lsangiz, ushbu ta'sirga erishish uchun kerakli sinflarni qo'shishingiz mumkin.
class = "yon chegaradagi">
Satrlar orasidagi satrlarni qo'shish juda oson, chunki siz faqat satrni kerakli satrga qo'shishingiz mumkin.
class = "border-bottom">
Keyin CSS uslublar jadvaliga qo'shing:
.border-yon {
chegara-chap: qattiq 1px qora;
}
.border-bottom {
pastki taglik: qattiq 1px qora;
}
Jadvaldagi alohida hujayralar atrofida chiziqlar qo'shish
Alohida hujayralar atrofidagi satrlarni qo'shish uchun siz chekka atrofida kerakli xujayralarga sinf qo'shasiz:
sinf = "chegara">
Keyin uslublar jadvaliga quyidagi CSS-ni qo'shing:
.border {
chegarasi: qattiq 1px qora;
}
Jadvaldagi alohida hujayralar ichidagi qatorlarni qanday qo'shish kerak
Agar siz hujayra tarkibidagi satrlarni qo'shishni xohlasangiz, buni eng oson yo'li gorizontal qoidalar yorlig'i (
) bilan amalga oshiriladi.
Foydali maslahatlar
Chegaralaringizdagi bo'shliqlarni sezsangiz, chegara qulashi uslubining jadvalingizda o'rnatilganligiga ishonch hosil qilishingiz kerak. Quyidagi uslublar jadvaliga qo'shing:
jadval {
chegara qulashi: kollaps;
}
Siz yuqoridagi CSS-lardan butunlay qochishingiz va jadval yorlig'ida chegara attributini ishlatishingiz mumkin. Ammo uning xususiyatiga ega emas, ammo eskirmasa-da, CSS-dan ancha moslashuvchan emas, chunki siz chegarani kengligi bilan belgilashingiz mumkin va u faqatgina jadvalning barcha hujayralari atrofida bo'lishi yoki hech kimga tegishli bo'lishi mumkin emas.