Როგორ დავამატოთ შიდა ხაზები (საზღვრები) ცხრილში CSS- ზე

ისწავლეთ CSS ცხრილის საზღვრის შექმნა მხოლოდ ხუთი წუთის განმავლობაში

შეიძლება გსმენიათ, რომ CSS და HTML მაგიდები არ აურიეთ. ეს სიმართლე არ არის. დიახ, განლაგებისთვის HTML ცხრილები აღარ არის ვებ დიზაინის საუკეთესო პრაქტიკა, რომელსაც შეცვალა CSS განლაგება სტილის მიერ, მაგრამ მაგიდები ჯერ კიდევ სწორი მარკირების გამოყენება ვებპორტისთვის ცხრილის მონაცემების დასაყენებლად.

სამწუხაროდ, იმიტომ, რომ ამდენი ვებ პროფესიონალები არ მორიდებიან მაგიდებიდან, რომლებიც ფიქრობენ, რომ ისინი შხამიანია, ბევრი პროფესიონალი კი ამ საერთო HTML ელემენტისა და იმ ბრძოლაში მუშაობის მცირე გამოცდილებაა, როდესაც მათ ვებ-გვერდზე გაუმკლავდნენ. მაგალითად, თუ გაქვთ მაგიდა მაგიდაზე და გინდათ შიდა ხაზების დამატება მაგიდის უჯრედებში.

CSS მაგიდის საზღვრები

როდესაც თქვენ გამოიყენებთ CSS, რათა დაამატოთ საზღვრები მაგიდები, ის მხოლოდ დაამატებს საზღვრის გარშემო მაგიდასთან. თუ გინდა რომ დაამატოთ შიდა ხაზები ამ მაგიდის ინდივიდუალურ უჯრედებს, თქვენ უნდა დაამატოთ საზღვრები შინაგან CSS ელემენტებზე. თქვენ ასევე შეგიძლიათ გამოიყენოთ HR tag, რომ დაამატოთ ხაზები შიგნით ინდივიდუალური საკნები.

იმისათვის, რომ გამოიყენოთ სტილის ამ მუხლის, თქვენ უნდა აშკარად აქვს მაგიდა თქვენს ვებ გვერდზე. თქვენ უნდა შექმნათ სტილის ფურცელი, როგორც შიდა სტილის ფურცელი თქვენს დოკუმენტში (თქვენ სავარაუდოდ მხოლოდ ამის გაკეთება მოხდება, თუ თქვენი "საიტი" არის ერთი გვერდი) ან დოკუმენტთან მიბმული დოკუმენტი, როგორც გარე სტილის ფურცელი (ეს არის ის, რაც თქვენ თუ თქვენს საიტზე არის მრავალჯერადი გვერდები - რომელიც საშუალებას გაძლევთ სტილი ყველა გვერდები ერთი გარე ფურცელი). თქვენ სტილს დაამატებთ შინაურ ხაზებს, რომ სტილის ფურცლად.

სანამ დაიწყებ

პირველი თქვენ უნდა გადაწყვიტოს, სადაც გსურთ ხაზები გამოჩნდება თქვენს მაგიდასთან. თქვენ გაქვთ რამდენიმე ვარიანტი, მათ შორის:

• დამონტაჟებულია ყველა საკანი, რათა შეიქმნას ქსელი;
• პოზიციონირება ხაზები მხოლოდ სვეტებს შორის;
• რიგებიდან ან
• შორის კონკრეტული სვეტების ან რიგები.

ინდივიდუალური საკნების ან ინდივიდუალური უჯრედების შიგნით შეგიძლიათ განათავსოთ ხაზები.

როგორ დავამატოთ ხაზები გარშემო ყველა საკნების მაგიდაზე

იმისათვის, რომ დაამატოთ ხაზები თქვენს მაგიდაზე ყველა უჯრედს, შეიქმნას ეს ბადე მსგავსი ეფექტი, დაამატეთ თქვენი სტილის ფურცელი:

td, th {
საზღვარი: მყარი 1px შავი;
}

როგორ დავამატოთ ხაზები მხოლოდ სვეტების მაგიდაზე

სვეტების შორის ხაზების დასამატებლად (ეს ქმნის ვერტიკალურ ხაზებს, რომლებიც სცენაზე სვეტების ზედა ნაწილში იყრიან), დაამატეთ თქვენი სტილის ფურცელი:

td, th {
საზღვრის მარცხნივ: მყარი 1px შავი;
}

მაშინ, თუ არ გინდა, რომ ისინი პირველ სვეტში გამოჩნდნენ, თქვენ უნდა დაამატოთ კლასები იმ თხზულ და თბილ უჯრედებს. ამ მაგალითში ჩვენ ვივარაუდოთ, რომ გვაქვს საკმარისი საზღვარი იმ საკნებში და ჩვენ საზღვრის ამოღება უფრო კონკრეტული CSS წესით. ასე რომ, აქ არის HTML კლასის გამოყენება:

class = "არა საზღვარი">

და მაშინ ჩვენ შეგვიძლია დავამატოთ შემდეგი სტილის ჩვენი სტილის ფურცელი:

. საზღვარი
საზღვრის მარცხნივ: არა;
}

როგორ დავამატო ხაზები ხაზებს შორის მხოლოდ რიგები მაგიდაზე

როგორც სვეტებს შორის დასძინა ხაზები, შეგიძლიათ ამის გაკეთება მხოლოდ ერთი მარტივი სტილით დაემატა თქვენს სტილი ფურცელს. ქვემოთ მოყვანილი CSS რომ დავამატებთ ვერტიკალურ ხაზებს შორის თითოეული სვეტის მაგიდას შორის:

tr {
საზღვრის ქვედა: მყარი 1px შავი;
}

და საზღვრის ამოღების მაგიდასთან, თქვენ კიდევ ერთხელ დავამატებთ კლასს რომ tr tag:

class = "არა საზღვარი">

დაამატე შემდეგი სტილი:

. საზღვარი
საზღვრის ქვედა: არა;
}

როგორ დაამატოთ ხაზები სპეციფიურ სვეტებს შორის ან ცხრილებში ცხრილებს შორის

თუ მხოლოდ ხაზების ან სვეტების შორის ხაზები გსურთ, თქვენ უნდა გამოვიყენოთ კლასები იმ საკნებში ან რიგებში. სვეტების შორის ხაზის დამატება ოდნავ უფრო რთულია, ვიდრე რიგებიდან, რადგან კლასში ყველა საკანში უნდა დაამატოთ. თუ თქვენი ცხრილი ავტომატურად გენერირდება CMS- სგან, ეს შეიძლება არ იყოს შესაძლებელი, მაგრამ თუ ხელის ხელით კოდი ხართ, თქვენ შეგიძლიათ დაამატოთ შესაბამისი კლასები, როგორც ეს საჭიროა.

კლასი = "საზღვარი">

რიგები შორის ხაზების დამატება ბევრად უფრო ადვილია, რადგან თქვენ შეგიძლიათ უბრალოდ დაამატოთ კლასს ზედიზედ, რომელიც გინდათ ხაზი.

class = "border-bottom">

შემდეგ დაამატე CSS თქვენი სტილის ფურცელი:

.ბორდანი -
საზღვრის მარცხნივ: მყარი 1px შავი;
}
.ბარიანი ბოლოში {
საზღვრის ქვედა: მყარი 1px შავი;
}

როგორ დავამატოთ ხაზები ინდივიდუალური საკნების გარშემო მაგიდაზე

ინდივიდუალური უჯრედების ირგვლივ ხაზების დასამატებლად, კლასს კლავთ კლასს:

class = "border">

და შემდეგ დაემატოს შემდეგი CSS თქვენი სტილის ფურცელი:

.ბარი {
საზღვარი: მყარი 1px შავი;
}

როგორ დავამატოთ ხაზები Inside ინდივიდუალური საკნების მაგიდაზე

უჯრედის შინაარსით ხაზების დამატება გინდა, რომ ამის გაკეთება უმარტივესი გზაა ჰორიზონტალური წესების მიხედვით (

---

).

სასარგებლო რჩევები

თუ თქვენს საზღვრებში ხარვეზებს შეამჩნევთ, დარწმუნდით, რომ თქვენს მაგიდასთან შეიზღუდება საზღვრის კოლაფსის სტილი. სანიშნეს სტილის ფურცლის შემდეგ:

მაგიდა {
საზღვრის კოლაფსი: დაშლა;
}

თქვენ შეგიძლიათ თავიდან იქნას აცილებული ყველა ზემოთ CSS და გამოიყენოთ სასაზღვრო ატრიბუტი თქვენს მაგიდაზე. გააცნობიერეთ, რომ მისი ატრიბუტი, მიუხედავად იმისა, რომ არ არის გამორთული, სავალდებულოა CSS- ზე ნაკლები, რადგან შეგიძლიათ მხოლოდ საზღვრის სიგანე განსაზღვროს და მხოლოდ მაგიდასთან საკმარისია.