ცხრილი არის მანძილი უჯრედებს შორის.

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

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

... ამასთან, არსებობს კიდევ ერთი, უფრო სასურველი ვარიანტი: CSS.

ამ შემთხვევაში, აბზაცები დადგენილია თვისების გამოყენებით ბალიში... მისი დახმარებით, ძნელი არ იქნება საჭიროებისამებრ ჩაწერა, ანუ ზემოდან, მარჯვნივ, ქვემოდან ან მარცხნივ, შესაბამისად, ერთ -ერთი ამ თვისებების გამოყენებით: padding-top, padding-right, ბალიში-ქვედადა padding-left.

თქვენ შეგიძლიათ განსაზღვროთ რამდენი პიქსელი უნდა იყოს შეწეული. აქ არის მაგალითი, სადაც ქვედა ზღვარი იქნება 20 პიქსელი, და ყველა დანარჩენი იქნება 10 ... ისეთი CSS-კოდი ასე გამოიყურება:

Td (შევსება: 10px; padding-bottom: 20px;)

და სტილის სრული კოდი ამ ეტაპზე:

მაგიდა (საზღვარი: მყარი 1 პიქსელი ლურჯი; საზღვარი-ჩამონგრევა: ჩამონგრევა;) td (საზღვარი: მყარი 1 პიქსელი ლურჯი; შევსება: 10 პიქსელი; შევსება-ქვედა: 20 პიქსელი;)

შედეგი ბრაუზერში:

შეღწევა უჯრედებს შორის

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

ცხრილებში ჩასმული არ არის მხოლოდ უჯრედების შიგნით. ისინი ასევე შეიძლება არსებობდეს თავად უჯრედებს შორის.

უჯრედებს შორის ჩაღრმავების ორი გზა არსებობს:

ატრიბუტის გამოყენებით უჯრედების განლაგებატეგისთვის

გამოყენებით CSS-თვისებები საზღვრების დაშორება.

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

მოდით შევხედოთ მაგალითს:

მაგიდა (საზღვარი: მყარი 1 პიქსელი ლურჯი; საზღვარი-დაშლა: ცალკე; საზღვარი-ინტერვალი: 5 პქს;) td (საზღვარი: მყარი 1 პიქსელი ლურჯი; შევსება: 10 პიქსელი; შევსება-ქვედა: 20 პქს;)

და შედეგი:

მოდით დაუყოვნებლივ განვაცხადოთ, რომ თქვენ არ უნდა სცადოთ ასეთი აბზაცების გამოყენება საზღვარი-დაშლა: ჩამონგრევა... მართლაც, ამ ვარიანტის გამოყენებისას უჯრედები ერთმანეთს „ეკიდებიან“.

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

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

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

ცხრილების ფორმატირება

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

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

ცხრილი (საზღვარი-ჩამონგრევა: ჩამონგრევა; / * უჯრედებს შორის ცარიელი ადგილების ამოღება * / საზღვარი: 1px მყარი ნაცრისფერი; / * ცხრილისთვის 1px ნაცრისფერი გარე საზღვრის დაყენება * /)

სათაურის უჯრედის საზღვრებითითოეული სვეტი მითითებულია th ელემენტისთვის:

Th (საზღვარი: 1px მყარი ნაცრისფერი;)

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

Td (საზღვარი: 1px მყარი ნაცრისფერი;)

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

Th, td (საზღვარი: 1px მყარი ნაცრისფერი;)

მაგიდის გარე საზღვარი შეიძლება შეირჩეს გაზრდილი სიგანის მიცემით:

მაგიდა (საზღვარი: 3px მყარი ნაცრისფერი;)

საზღვრები შეიძლება ნაწილობრივ იყოს დადგენილი:

/ * დააყენეთ 3px ნაცრისფერი გარე საზღვარი მაგიდისთვის * / table (border-top: 3px solid ნაცრისფერი;) / * 1px ნაცრისფერი საზღვარი მაგიდის სხეულის უჯრედისთვის * / td (border-bottom: 1px solid ნაცრისფერი;)

შეგიძლიათ მეტი წაიკითხოთ სასაზღვრო საკუთრების შესახებ.

2. როგორ დავაყენოთ მაგიდის სიგანე და სიმაღლე

ნაგულისხმევი მაგიდის სიგანე და სიმაღლეგანისაზღვრება მისი უჯრედების შინაარსით. თუ სიგანე არ არის მითითებული, მაშინ ის უდრის ყველაზე ფართო რიგის (ხაზის) სიგანეს.

მაგიდისა და სვეტის სიგანემითითებული სიგანის თვისების გამოყენებით. თუ მაგიდაზე მითითებულია ცხრილი (სიგანე: 100%;), მაშინ ცხრილის სიგანე უდრის კონტეინერის ბლოკის სიგანეს, რომელშიც ის მდებარეობს.

ცხრილისა და სვეტების სიგანე ჩვეულებრივ მოცემულია px ან%-ში, მაგალითად:

ცხრილი (სიგანე: 600px;) ე (სიგანე: 20%;) td: პირველი შვილი (სიგანე: 30%;)

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

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

ტეგის გამოყენებით

თქვენ შეგიძლიათ დააყენოთ ფონი ნებისმიერი რაოდენობის სვეტისთვის;

ცხრილის გამოყენებით td: first-child, table td: last-child selector, თქვენ შეგიძლიათ სტილი შექმნათ ცხრილის პირველი ან ბოლო სვეტი (გარდა ცხრილის სათაურის პირველი უჯრედისა);

ცხრილის გამოყენებით td: nth-child selector (სვეტის შერჩევის წესი), შეგიძლიათ სტილი შეადგინოთ ცხრილში.

შეგიძლიათ წაიკითხოთ მეტი CSS სელექტორების შესახებ.

5. როგორ დავამატოთ სათაური ცხრილს

თქვენ შეგიძლიათ დაამატოთ სათაური ცხრილს ტეგის გამოყენებით

და

... არ არის რეკომენდებული სიმაღლის დაფიქსირება სიმაღლის თვისების გამოყენებით.

Th, td (შევსება: 10px 15px;)

3. როგორ დავაყენოთ მაგიდის ფონი

ნაგულისხმევი მაგიდის ფონიდა უჯრედები გამჭვირვალეა. თუ ცხრილის შემცველ გვერდს ან ბლოკს აქვს ფონი, მაშინ ის ბრწყინავს ცხრილში. თუ ფონი მითითებულია როგორც ცხრილისთვის, ასევე უჯრედებისთვის, მაშინ მხოლოდ უჯრედების ფონი გამოჩნდება იმ ადგილებში, სადაც ცხრილის და უჯრედების ფონი გადახურულია. მაგიდის მთლიანობა და მისი უჯრედები შეიძლება იყოს:
შევსება,
,
.

4. ცხრილის სვეტები

CSS ცხრილის მოდელი ძირითადად ორიენტირებულია სტრიქონებზე (სტრიქონებზე), რომლებიც ჩამოყალიბებულია ტეგის გამოყენებით

და წარწერის გვერდითი თვისების გამოყენებით ის შეიძლება განთავსდეს მაგიდის წინ ან ქვემოთ. ტექსტის გასწორების თვისება გამოიყენება სათაურის ტექსტის ჰორიზონტალური გასწორებისთვის. Მემკვიდრეობით მიღებული.

...

ცხრილი No1
კომპანია	Q1	Q2	Q3	Q4

წარწერა (წარწერის გვერდი: ქვედა; ტექსტის გასწორება: მარჯვნივ; შევსება: 10px 0; შრიფტის ზომა: 14px;)

ბრინჯი 2. ცხრილის ქვეშ სათაურის ჩვენების მაგალითი

6. როგორ ამოიღოთ უფსკრული უჯრედის ჩარჩოებს შორის

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

Სინტაქსი

მაგიდა (საზღვარი-დაშლა: ჩამონგრევა;)
ბრინჯი 3. ცხრილების მაგალითი შერწყმისა და გაყოფილი უჯრედის საზღვრებით

7. როგორ გავზარდოთ სივრცე უჯრედის საზღვრებს შორის

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

Სინტაქსი

მაგიდა (საზღვარი-ჩამონგრევა: ცალკე; საზღვარი-ინტერვალი: 10px 20px;) მაგიდა (საზღვარი-ჩამონგრევა: ცალკე; საზღვრის დაშორება: 10px;)
ბრინჯი 4. ცხრილების მაგალითი უჯრედების ჩარჩოებს შორის გაზრდილი ხარვეზებით

8. როგორ დავმალოთ ცარიელი მაგიდის უჯრედები

ცარიელი უჯრედების თვისება მალავს ან აჩვენებს ცარიელ უჯრედებს. მოქმედებს მხოლოდ უჯრედებზე, რომლებიც არ შეიცავს შინაარსს. თუ უჯრედისთვის არის მითითებული ფონი, ხოლო ცხრილისთვის არის მითითებული ცხრილი (საზღვარი-დაშლა: ჩამონგრევა;), მაშინ უჯრედი არ დაიმალება. Მემკვიდრეობით მიღებული.

კომპანია	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

მაგიდა (საზღვარი: 1px მყარი # 69c; საზღვარი-დაშლა: ცალკე; ცარიელი უჯრედები: დამალვა;) th, td (საზღვარი: 2px მყარი # 69c;)

ბრინჯი 5. ცარიელი მაგიდის უჯრედის დამალვის მაგალითი

9. მაგიდის განლაგება მაგიდის განლაგების თვისების გამოყენებით

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

Სინტაქსი

მაგიდა (მაგიდის განლაგება: ფიქსირებული;)

10. საუკეთესო მაგიდის განლაგება

1. ჰორიზონტალური მინიმალიზმი

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

თანამშრომელი	ხელფასი	ბონუსი	ხელმძღვანელი
სტივენ სი. კოქსი	$300	$50	ბობ
ჯოზეფინ ტან	$150	-	ენი
ჯოისი მინ	$200	$35	ენდი
ჯეიმს ა. პენტელი	$175	$25	ენი

მაგიდა (შრიფტი-ოჯახი: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; შრიფტის ზომა: 14px; ფონი: თეთრი; მაქსიმალური სიგანე: 70%; სიგანე: 70%; საზღვარი-დაშლა: ჩამონგრევა; ტექსტი -გასწორება: მარცხნივ;) ე (შრიფტი-წონა: ნორმალური; ფერი: # 039; საზღვარი-ქვედა: 2px მყარი # 6678b1; შევსება: 10px 8px;) td (ფერი: # 669; შევსება: 9px 8px; გადასვლა: .3s ხაზოვანი;) tr: hover td (ფერი: # 6699ff;)

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

Td (საზღვარი-ქვედა: 1px მყარი #ccc; ფერი: # 669; padding: 9px 8px; გადასვლა: .3s ხაზოვანი;) / * დანარჩენი კოდი არის როგორც ზემოთ მოყვანილ მაგალითში * /

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

Th (შრიფტის წონა: ნორმალური; ფერი: # 039; შევსება: 10px 15px;) td (ფერი: # 669; საზღვარი-ზედა: 1px მყარი # e8edff; შევსება: 10px 15px;) tr: hover td (ფონი: # e8edff ;)

2. ვერტიკალური მინიმალიზმი

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

Th (შრიფტის წონა: ნორმალური; საზღვარი-ქვედა: 2px მყარი # 6678b1; საზღვარი-მარჯვნივ: 30px მყარი #fff; საზღვარი-მარცხენა: 30px მყარი #fff; ფერი: # 039; შევსება: 8px 2px;) td (საზღვარი- მარჯვნივ: 30px solid #fff; border-left: 30px solid #fff; color: #669; padding: 12px 2px;)

3. "ყუთის" სტილი

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

Th (შრიფტის ზომა: 13px; შრიფტის წონა: ნორმალური; ფონი: # b9c9fe; საზღვარი-ზედა: 4px მყარი #aabcfe; საზღვარი-ქვედა: 1px მყარი #fff; ფერი: # 039; შევსება: 8px;) td (ფონი : # e8edff; საზღვარი-ქვედა: 1px მყარი #fff; ფერი: # 669; საზღვარი-ზედა: 1px მყარი გამჭვირვალე; padding: 8px;) tr: hover td (ფონი: #ccddff;)

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

ცხრილი (შრიფტი-ოჯახი: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collaps: collaps ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- მარცხენა: 1px მყარი # 9baff1; ფერი: # 039; შევსება: 8px;) td (ფონი: # e8edff; საზღვარი-მარჯვნივ: 1px მყარი #aabcfe; საზღვარი-მარცხენა: 1px მყარი #aabcfe; ფერი: # 669; შევსება: 8px ;)

4. ჰორიზონტალური ზებრა

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

Th (შრიფტის წონა: ნორმალური; ფერი: # 039; შევსება: 10px 15px;) td (ფერი: # 669; საზღვარი-ზედა: 1px მყარი # e8edff; შევსება: 10px 15px;) tr: nth-child (2n) ( ფონი: # e8edff;)

5. გაზეთის სტილი

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

მაგიდა (საზღვარი: 1px მყარი # 69c;) th (შრიფტის წონა: ნორმალური; ფერი: # 039; საზღვარი-ქვედა: 1px მოწყვეტილი # 69c; შევსება: 12px 17px;) td (ფერი: # 669; შევსება: 7px 17px; ) tr: hover td (ფონი: #ccddff;)

მაგიდა (საზღვარი: 1px მყარი # 69c;) th (შრიფტის წონა: ნორმალური; ფერი: # 039; შევსება: 10px;) td (ფერი: # 669; საზღვარი-ზედა: 1px დატეხილი #fff; შევსება: 10px; ფონი: #ccddff;) tr: hover td (ფონი: # 99bcff;)

ცხრილი (საზღვარი: 1px მყარი # 6cf;) th (შრიფტის წონა: ნორმალური; შრიფტის ზომა: 13px; ფერი: # 039; ტექსტის გარდაქმნა: დიდი; საზღვარი-მარჯვნივ: 1px მყარი # 0865c2; საზღვარი-ზედა: 1px მყარი # 0865c2; საზღვარი-მარცხენა: 1px მყარი # 0865c2; საზღვარი-ქვედა: 1px მყარი #fff; შევსება: 20px;) td (ფერი: # 669; საზღვარი-მარჯვნივ: 1px დაშლილი # 6cf; შევსება: 10px 20px;)

6. მაგიდის ფონი

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

Png ") 98% 86% განმეორებითი;) th ზედა: 1px მყარი თეთრი; შევსება: 10px 12px; ფონი: rgba (51, 51, 153, .2); გადასვლა: .3s;) tr: გადაადგილება td (ფონი: rgba (51, 51, 153, .1); )

Გამარჯობა ყველას! ასე რომ, ახლა თქვენ შეგიძლიათ შექმნათ ელემენტარული ცხრილები, რომელიც შედგება იმდენი რიგისა და სვეტისგან, რამდენიც გჭირდებათ. არ არის ცუდი, არ არის ცუდი. ახლა მოდით ვისაუბროთ ამ მაგიდების დიზაინზე.

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

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

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

ზედა მარცხენა უჯრედი	ზედა მარჯვენა უჯრედი
ქვედა მარცხენა უჯრედი	ქვედა მარჯვენა უჯრედი

შედეგი ბრაუზერში:

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

თავის მხრივ, HTML ცხრილის საზღვრების მოსაშორებლად, ან ასევე შეგიძლიათ თქვათ, რომ ისინი უხილავი გახადოთ, გჭირდებათ ატრიბუტი საზღვარიმითითებული მნიშვნელობა 0 ... ამ მარტივი მოქმედებების შემდეგ, ჩარჩო წაიშლება.

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

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

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

მაგალითი ცხრილი

ზედა მარცხენა უჯრედი	ზედა მარჯვენა უჯრედი
ქვედა მარცხენა უჯრედი	ქვედა მარჯვენა უჯრედი

შედეგი ბრაუზერში:

ახლა მოდით დავამატოთ საზღვრები თითოეული უჯრედისთვისაც. ამისათვის უბრალოდ დაამატეთ სტილები:

შედეგი ბრაუზერში:

როგორ ამოიღოთ შევსება უჯრედებს შორის HTML ცხრილში

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

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

მაგიდა (საზღვარი: მყარი 1 პიქსელი ლურჯი; საზღვარი-დაშლა: დაშლა;) ...

შედეგად, უჯრედებს შორის მანძილი ამოღებულია:

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

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

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

ტეგის შიგნით

მაგიდის უჯრედები განლაგებულია, წარმოდგენილია ტეგებით შეგიძლიათ გამოიყენოთ მხოლოდ ერთი CSS თვისება, ფონის ფერი, მაგრამ ამ ელემენტზე პირდაპირ არ შეგიძლიათ დააყენოთ ფონის ფერი hover (the: hover pseudo-class). ამ მაგალითში ჩვენ შევხედავთ როგორ გამოვყოთ ცხრილის სვეტი მხოლოდ CSS გამოყენებით.

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

ან

... ეს არის უჯრედები, რომლებიც შეიცავს ვებ გვერდზე ნაჩვენები ცხრილის მთელ შინაარსს.

მაგიდის ჩარჩო

ნაგულისხმევად, ვებ – გვერდზე HTML ცხრილი გაფორმებულია საზღვრის გარეშე; ცხრილში საზღვრის დასამატებლად, როგორც ყველა სხვა ელემენტისთვის, გამოიყენება საზღვრის CSS თვისება. მაგრამ უნდა აღინიშნოს, რომ თუ თქვენ დაამატებთ საზღვარს მხოლოდ ელემენტს

, შემდეგ ის ნაჩვენები იქნება მთელ ცხრილში. იმისათვის, რომ ცხრილის უჯრედებს ასევე ჰქონდეთ საზღვარი, თქვენ დაგჭირდებათ ელემენტების საზღვრის თვისების დაყენება და და მათი სტილი.

ცხრილის სვეტების მონიშვნის მაგალითი

და

მაგიდა, th, td (საზღვარი: 1px მყარი შავი;) სცადეთ "

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

მაშინაც კი, თუ ჩვენ ამოვიღებთ ხარვეზებს უჯრედებს შორის საზღვრის დაშორების თვისების 0 მნიშვნელობის გამოყენებით, მაშინ უჯრედების საზღვრები ერთმანეთს შეეხო, გაორმაგდება. საზღვრის ჩამონგრევის თვისება გამოიყენება უჯრედის საზღვრების შერწყმისათვის. მას შეუძლია მიიღოს ორი მნიშვნელობა:

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

დოკუმენტის სახელი

სახელი	გვარი
ჰომეროსი	სიმპსონი
მარჯი	სიმპსონი

სახელი	გვარი
ჰომეროსი	სიმპსონი
მარჯი	სიმპსონი

სცადე "

მაგიდის ზომა

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

Th, td (padding: 7px;) სცადე "

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

მაგიდა (სიგანე: 70%;) ე (სიმაღლე: 50 პიქსელი;) სცადეთ "

ტექსტის გასწორება

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

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

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

დოკუმენტის სახელი

სახელი	გვარი
ჰომეროსი	სიმპსონი
მარჯი	სიმპსონი

სცადე "

მაგიდის რიგების ფონის ფერის შეცვლა

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

დოკუმენტის სახელი

სახელი	გვარი	პოზიცია
ჰომეროსი	სიმპსონი	მამა
მარჯი	სიმპსონი	დედა
ბარტი	სიმპსონი	ვაჟიშვილი
ლიზა	სიმპსონი	ქალიშვილი

სცადე "

ყოველ მეორე სტრიქონზე კლასის ატრიბუტის დამატება დამღლელი ამოცანაა. CSS3– ს დაემატა: nth ბავშვის ფსევდო კლასი, რომელიც ამ საკითხს ალტერნატიულად მიმართავს. ახლა ინტერლივაციის ეფექტის მიღწევა შესაძლებელია მხოლოდ CSS– ის საშუალებით, დოკუმენტის HTML მარკირების შეცვლის გარეშე. Nth-child ბავშვის ფსევდოკლასით, თქვენ შეგიძლიათ აირჩიოთ ცხრილიდან ყველა კენტი ან ლუწი რიგები ერთ-ერთი საკვანძო სიტყვის ლუწი (ლუწი) ან კენტი (კენტი) გამოყენებით:

Tr: nth-child (უცნაური) (ფონის ფერი: # EAF2D3;) სცადე "

შეცვალეთ ხაზის ფონი გადაადგილებისას

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

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

Tr: hover (ფონის ფერი: # E0E0FF;) სცადე "

მაგიდის ცენტრალური გასწორება

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

მაგიდა (ზღვარი: 10px ავტო;) სცადეთ "

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

ცხრილი (ზღვარი: 10px ავტო 30px;)

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

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

ჰიპერტექსტური მარკირების ენა HTML მოგვცა დიდი შესაძლებლობები, რომ CSS სტილი დავუკავშიროთ ათ უნიკალურ ტეგს, რომელიც განკუთვნილია ცხრილებთან მუშაობისთვის, მე გირჩევთ გაიმეოროთ ისინი შემდგომი შესწავლის წინ:

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

ნივთებისთვის

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

ჩვენი მაგალითის შედეგი:

ბრინჯი 153 ცხრილებში სტილის რიგების მაგალითი

ქვემოთ მოყვანილი მაგალითი გვიჩვენებს როგორ გამოვიყენოთ კუთხის დამრგვალება მაგიდის უჯრედებზე (თვისება).

უჯრედის კუთხეების დამრგვალების მაგალითი

წარწერა

აღწერა


განსაზღვრავს ცხრილის შინაარსს.

განსაზღვრავს ცხრილის სახელს.
		განსაზღვრავს ცხრილის სათაურის უჯრედს.

განსაზღვრავს რიგს ცხრილში.
		განსაზღვრავს ცხრილის მონაცემთა უჯრედს.

გამოიყენება ცხრილში ჯგუფის სათაურის ჩასატარებლად (ცხრილის სათაური).

გამოიყენება მაგიდის "სხეულის" შესანახად.

გამოიყენება ცხრილის "ქვედა კოლონტიტულის" შესანახად.

განსაზღვრავს სვეტის განსაზღვრულ თვისებებს თითოეული სვეტისთვის ტეგში

განსაზღვრავს სვეტების ჯგუფს ცხრილში.

მაგიდის ბუდეებთან მუშაობა

ბალიშის გამოყენება მაგიდაზე

ცხრილის აბზაცები
1	2	3	4
2
3
4

ამ მაგალითში ჩვენ:

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

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

ჩვენი მაგალითის შედეგი:

უჯრედებს შორის მანძილი

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

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

შეცვალეთ ინტერვალი ცხრილებს შორის

საზღვრის ინტერვალი: 30px 10px;
1	2	3
2
3

საზღვრებს შორის მანძილი: 0;
1	2	3
2
3

საზღვრებს შორის მანძილი: 0.2em;
1	2	3
2
3

ამ მაგალითში ჩვენ:

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

) - თამამი.

ცხრილის უჯრედებისათვის (სათაურისა და მონაცემთა უჯრედებისათვის) ჩვენ დავაყენეთ 1 პიქსელიანი მყარი საზღვარი # F50 თექვსმეტობით და დავაყენეთ შევსება 19 პიქსელზე ყველა მხარისთვის.

კლასისთვის პირველი მაგიდისთვის .პირველიჩვენ დავაყენეთ ინტერვალი ცხრილის უჯრედებს შორის (საზღვრის ინტერვალის თვისება) 30px 10px, მეორე მაგიდისთვის კლასთან ერთად .მეორენულის ტოლი, მესამე მაგიდისთვის კლასთან ერთად .მესამეუდრის 0,2 ემ.

თქვენს ყურადღებას ვაქცევ იმ ფაქტს, რომ თუ საზღვრის ინტერვალის თვისებაში მითითებულია მხოლოდ ერთი სიგრძის მნიშვნელობა, მაშინ ის მიუთითებს ინტერვალს, როგორც ჰორიზონტალურად, ასევე ვერტიკალურად, ხოლო თუ ორი სიგრძის მნიშვნელობაა მითითებული, პირველი განსაზღვრავს ჰორიზონტალურ დისტანციას და მეორე ვერტიკალური. მიმდებარე უჯრედების საზღვრებს შორის მანძილი შეიძლება განისაზღვროს CSS ერთეულებში (px, cm, em და ა.შ.). ნეგატიური მნიშვნელობები დაუშვებელია.

ჩვენი მაგალითის შედეგი:

მაგიდის უჯრედების გარშემო საზღვრების ჩვენება

Შეგიძლია თქვა: - ასე რომ, ჩვენ ამოვიღეთ მანძილი უჯრედებს შორის საზღვრის ინტერვალის თვისების გამოყენებით 0 მნიშვნელობით, მაგრამ რატომ გვაქვს ახლა უჯრედების საზღვრები იკვეთება?

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

ამისათვის თქვენ უნდა გამოიყენოთ CSS თვისება საზღვრის ჩამონგრევის მიზნით. უცნაურია, მაგრამ საზღვრის ჩამონგრევის თვისების ჩამონგრევის მნიშვნელობა არის საუკეთესო საშუალება უჯრედებს შორის უფსკრული ამოიღონ მათ შორის ორმაგი საზღვრების გარეშე.

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

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

საზღვრებს შორის მანძილი: 0;
1	2	3
2
3

საზღვარი-დაშლა: ჩამონგრევა;
1	2	3
2
3

ამ მაგალითში ჩვენ:

ჩვენი ცხრილები მოძრავი და მარცხნივ გასწორებული (float: left), დააყენეთ მათი მარჯვენა ზღვარი 30 პიქსელზე.
დააყენეთ ცხრილის სახელი (ტეგი

) - თამამი.

ცხრილის უჯრედებისათვის (სათაური და მონაცემთა უჯრედები) ჩვენ ვადგენთ 5px მყარ საზღვარს # F50 hex– ით და ვაყენებთ ფიქსირებულ სიგანეს 50 px და სიმაღლე 75 px.

კლასისთვის პირველი მაგიდისთვის .პირველიჩვენ დავაყენებთ ინტერვალს ცხრილის უჯრედებს შორის ნულამდე (საზღვარი-ინტერვალი: 0;), ხოლო მეორე მაგიდისთვის კლასთან ერთად .მეორედააყენეთ საზღვრის ჩამონგრევის თვისება კოლაფსისთვის, რომელიც შეძლებისდაგვარად აერთიანებს უჯრედის საზღვრებს ერთში.

ჩვენი მაგალითის შედეგი:

უჯრედების ცარიელი ქცევა

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

მოდით გადავიდეთ მაგალითზე:

ცხრილის ცარიელი უჯრედების ჩვენების მაგალითი

ცარიელი უჯრედები: ჩვენება;
1	2	3
2		☺
3	☺

ცარიელი უჯრედები: დამალვა;
1	2	3
2		☺
3	☺

იმის გაგება, თუ როგორ მუშაობს ცარიელი უჯრედების თვისება ამ მაგალითიდან, ძალიან მარტივია, თუ ის დამალულია, მაშინ ცარიელი უჯრედები და მათში ფონი დაიმალება, თუ მითითებულია (ნაგულისხმევი), მაშინ ისინი გამოჩნდება.

ცხრილის სათაურის მდებარეობა

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

მოდი ვნახოთ ამ ქონების გამოყენების მაგალითი:

წარწერის გვერდითი თვისების გამოყენების მაგალითი

სათაური მაგიდის ზემოთ
სახელი	ფასი
Თევზი	350 რუბლი
ხორცი	250 რუბლი

სათაური ცხრილის ქვემოთ
სახელი	ფასი
Თევზი	350 რუბლი
ხორცი	250 რუბლი

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

ჩვენი მაგალითის შედეგი:

ჰორიზონტალური და ვერტიკალური განლაგება

უმეტეს შემთხვევაში, ცხრილებთან მუშაობისას, თქვენ დაგჭირდებათ შინაარსის გასწორება სათაურში და მონაცემთა უჯრედებში. ტექსტის გასწორების თვისება გამოიყენება ჰორიზონტალური გასწორებისთვის ნებისმიერი ტექსტური ინფორმაციის მსგავსი. ჩვენ განვიხილეთ ამ ქონების გამოყენება ტექსტისთვის ადრე სტატიაში "".

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

ცხრილში ჰორიზონტალური გასწორების მაგალითი

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

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

ჩვენი მაგალითის შედეგი:

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

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

* -ცხრილის უჯრედზე გამოყენებული ქვე, სუპერ, ტექსტი-ზედა, ტექსტი-ქვედა, სიგრძე და% მნიშვნელობები იქცევიან ისე, თითქოს იყენებენ საბაზისო მნიშვნელობას.

მოდით შევხედოთ გამოყენების მაგალითს:

ცხრილში ვერტიკალური გასწორების მაგალითი

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

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

ბრაუზერის მიერ ცხრილის განლაგების განთავსების ალგორითმი

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

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

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

მოდით შევხედოთ ამ ქონების გამოყენებას შემდეგი მაგალითით:

მაგიდის განლაგების თვისების გამოყენების მაგალითი

მაგიდის განლაგება: ავტო;
სახელი	2009	2010	2011	2012	2013	2014	2015	2016
ხორბალი	125	215	2540	33287	695878	1222222	125840000	125

მაგიდის განლაგება: ფიქსირებული;
სახელი	2009	2010	2011	2012	2013	2014	2015	2016
ხორბალი	125	215	2540	33287	695878	1222222	125840000	125

ამ მაგალითში ჩვენ:

ცხრილის სტრიქონებისა და სვეტების სტილისტიკა

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

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

მაგალითი: nth ბავშვი ფსევდო კლასის გამოყენებით ცხრილებით

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

ამ მაგალითში ჩვენ:

ჩვენი მაგალითის შედეგი:

მოდით გადავიდეთ შემდეგ მაგალითზე, რომელშიც ჩვენ გადავხედავთ ცხრილების რიგების სტილის ვარიანტებს.

ცხრილებში რიგების სტილის მაგალითი

მომსახურება	ფასი
თანხა	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

ამ მაგალითში ჩვენ:

დააყენეთ ცხრილის სიგანე მშობელი ელემენტის სიგანის 100% -ზე, დააყენეთ სათაური და მონაცემთა უჯრედები 1px მყარ კონტურზე.
დაინსტალირებულია საქონლისთვის

1	2	3	4	5

ამ მაგალითში ჩვენ:

ცენტრი მაგიდა paddings, მითითებული სიგანე და სიმაღლე header საკნები 50px, მითითებული გამჭვირვალესაზღვარი 5 პიქსელი.
აღმოჩნდა, რომ სათაურის უჯრედზე გადაფრენისას (ფსევდოკლასი: hover) ის იღებს ფონს ლურჯიფერები, ნარინჯისფერიტექსტის ფერი, საზღვარი ნარინჯისფერიფერები 5 პიქსელი და რადიუსი 100%.
გამჭვირვალე საზღვარიაუცილებელია საზღვრისთვის ადგილის დასატოვებლად, რომელიც ნაჩვენები იქნება გადაადგილებისას, თუ ეს არ გაკეთებულა მაგიდა "ხტება".

ჩვენი მაგალითის შედეგი:

შემდეგი მაგალითი ეხება HTML ელემენტების გამოყენებას

Აპლიკაციის ნომერი	მომსახურება	ფასი, რუბლს შეადგენს.	სულ
1	მღერის	6 000	6 000
2	გარეცხვა	2 000	2 000
3	დასუფთავება	1 000	1 000
4	წვალება	1 500	1 500
5	Კითხვა	3 000	3 000

ამ მაგალითში ჩვენ:

ჩვენი მაგალითის შედეგი:

ისე, და ბოლო მაგალითი, რომლის გაგებაც საკმაოდ რთულია და საჭიროებს CSS– ში მოწინავე ცოდნას, რადგან ის ეხება ამ კურსის ფარგლებში დეტალური შესწავლისათვის დაგეგმილ მომავალ თემებს.

წინა მაგალითში ჩვენ მივხვდით, რომ HTML ელემენტი

Აპლიკაციის ნომერი	მომსახურება	ფასი, რუბლს შეადგენს.	სულ
1	მღერის	6 000	6 000
2	გარეცხვა	2 000	2 000
3	დასუფთავება	1 000	1 000
4	წვალება	1 500	1 500
5	Კითხვა	3 000	3 000

ამ მაგალითში ჩვენ:

ჩვენ დავაყენეთ მაგიდა, რომ დაიკავოს მშობელი ელემენტის 100%, მაგიდის უჯრედები იკავებს მშობელი ელემენტის 25% -ს და აქვს 1 პიქსელიანი მწვანე მყარი საზღვარი, სათაურები და მონაცემთა უჯრედები 45px სიმაღლეა. ჩვენ ამოვიღეთ უჯრედებს შორის არსებული უფსკრული მნიშვნელობის მქონე საზღვრის ჩამონგრევის თვისების გამოყენებით

ასე რომ, ფსევდოელემენტის შემდეგ :: დაამატეთ შინაარსი თითოეული ელემენტის შემდეგ.

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

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

ჩვენი გენერირებული ბლოკისთვის ჩვენ ვაყენებთ ზედა თვისებას, რომელიც მიუთითებს პოზიციონირებული ელემენტის გადაფრენის მიმართულებას ზედა ზღვიდან და ქვედა თვისებას, რომელიც მიუთითებს პოზიციონირებული ელემენტის ქვედა ზღვარზე გადაადგილების მიმართულებას. ორივე თვისებისთვის, 0 მნიშვნელობა იყო მითითებული, ამიტომ ბლოკი მთლიანად დაიკავებს ელემენტს ცხრილის ქვემოდან და ზემოდან, ამ ბლოკის სიგანე დადგენილია 25%-ზე, ეს მნიშვნელობა შეესაბამება თავად უჯრედის სიგანეს.

და საბოლოო თვისება, რომელიც ჩვენ დავაყენეთ ამ ბლოკისთვის: z- ინდექსი "-1" მნიშვნელობით ის განსაზღვრავს პოზიციონირებული ელემენტების თანმიმდევრობას Z ღერძი... ეს თვისება აუცილებელია ისე, რომ ტექსტი იყოს ამ ბლოკის წინ და არა მის უკან, თუ თქვენ არ დააყენებთ მნიშვნელობას ნულზე ნაკლები, მაშინ ბლოკი დახურავს ტექსტს.

ჩვენი მაგალითის შედეგი:

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