Td padding. ნაწილობრივი საზღვრების ჩვენება

2. Property background="URL" - აყენებს ფონის სურათს. URL-ის ნაცვლად, უნდა დაიწეროს ფონის სურათის მისამართი.

მაგალითი

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

სვეტი 1

სვეტი 2

გარდაიქმნება შემდეგზე გვერდზე:

განხილულ მაგალითში ჩვენი ფონის სურათიმდებარეობს img საქაღალდეში (რომელიც იმავე დირექტორიაშია, სადაც html გვერდია) და სურათს ჰქვია fon.gif. გთხოვთ გაითვალისწინოთ, რომ ტეგში დავამატეთ style="color:white;" . ვინაიდან ფონი თითქმის შავია, ტექსტის ფონზე შერწყმის თავიდან ასაცილებლად, ტექსტი გავხადეთ თეთრი.

3. თვისება bgcolor="color" - ადგენს ცხრილის ფონის ფერს. თქვენ შეგიძლიათ აირჩიოთ ნებისმიერი ფერი მთელი პალიტრიდან (იხილეთ html ფერების კოდები და სახელები)

4. Property border="number" - ადგენს ცხრილის საზღვრის სისქეს. წინა მაგალითებში ჩვენ დავაზუსტეთ border="1", რაც ნიშნავს, რომ საზღვრის სისქე არის 1 პიქსელი.

5. თვისება bordercolor="color" - ადგენს საზღვრის ფერს. თუ border = "0" მაშინ არ იქნება საზღვარი და საზღვრის ფერს მნიშვნელობა არ ექნება.

6. თვისება cellpadding="number" - შეწევა ჩარჩოდან უჯრედის შიგთავსამდე პიქსელებით.

7. თვისება cellpacing="number" - უჯრედებს შორის მანძილი პიქსელებში.

8. თვისება cols="number" - სვეტების რაოდენობა. თუ არ დააყენეთ, ბრაუზერი თავად განსაზღვრავს სვეტების რაოდენობას. ერთადერთი განსხვავება ისაა, რომ ამ პარამეტრის მითითება, სავარაუდოდ, დააჩქარებს ცხრილის ჩატვირთვას.

9. Property frame="parameter" - როგორ გამოვაჩინოთ საზღვრები მაგიდის გარშემო. შეუძლია მიიღოს შემდეგი მნიშვნელობები:

• void - არ დახაზოთ საზღვრები
• საზღვარი - საზღვარი მაგიდის გარშემო
• ზემოთ - საზღვარი მაგიდის ზედა კიდეზე
• ქვემოთ - საზღვარი ცხრილის ბოლოში
• hsides - დაამატეთ მხოლოდ ჰორიზონტალური საზღვრები (ცხრილის ზედა და ქვედა)
• vsides - დახაზეთ მხოლოდ ვერტიკალური საზღვრები (მარცხნივ და მარჯვნივ)
• rhs - მხოლოდ საზღვარი მარჯვენა მხარემაგიდები
• lhs - საზღვარი მხოლოდ მაგიდის მარცხენა მხარეს

10. თვისება height="number" - ადგენს ცხრილის სიმაღლეს: პიქსელებში ან პროცენტებში.

11. Property rules="parameter" - სად უნდა გამოჩნდეს საზღვრები უჯრედებს შორის. შეუძლია მიიღოს შემდეგი მნიშვნელობები:

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

ატრიბუტები და თვისებები

1. Property align="parameter" - ადგენს ცხრილის ცალკეული უჯრედის გასწორებას. შეუძლია მიიღოს შემდეგი მნიშვნელობები:

• მარცხნივ - მარცხნივ გასწორება
• ცენტრი - ცენტრის გასწორება
• მარჯვენა - მარჯვენა გასწორება

2. Property background="URL" - ადგენს უჯრედის ფონის სურათს. URL-ის ნაცვლად, უნდა დაიწეროს ფონის სურათის მისამართი.

3. თვისება bgcolor="color" - ადგენს უჯრედის ფონის ფერს.

4. თვისება bordercolor="color" - ადგენს უჯრედის საზღვრის ფერს.

5. თვისება char="letter" - განსაზღვრავს ასოს, რომლიდანაც უნდა მოხდეს გასწორება. align ატრიბუტის მნიშვნელობა უნდა იყოს მითითებული char.

6. თვისება colspan="number" - ადგენს შესაერთებელი ჰორიზონტალური უჯრედების რაოდენობას.

7. თვისება height="number" - ადგენს ცხრილის სიმაღლეს: პიქსელებში ან პროცენტულად.

8. თვისება width="number" - ადგენს ცხრილის სიგანეს: პიქსელებში ან პროცენტულად.

9. თვისება rowspan="number" - ადგენს შესაერთებელი ვერტიკალური უჯრედების რაოდენობას.

10. თვისება valign="parameter" - უჯრედის შიგთავსის ვერტიკალური გასწორება.

• ზედა - უჯრედის შიგთავსის გასწორება მწკრივის ზედა კიდეზე
• შუა - შუა გასწორება
• ქვედა - გასწორება ქვედა კიდეზე
• საბაზისო - გასწორება საბაზისო ხაზთან

ტეგისთვის

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

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

...

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

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

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

საფუძვლები

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

• tr სიმებიანი;
• ე სათაურებისთვის;
• td სვეტებისთვის.

უფროსი	უფროსი	უფროსი
უჯრედი	უჯრედი	უჯრედი
უჯრედი	უჯრედი	უჯრედი

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

ტექსტი ( შრიფტი-ოჯახი: Helvetica, Sans-serif; შრიფტის ზომა: 5vw; ფერი: შავი; ფონის ფერი: rgba(228, 228, 245); padding: 20vh; )

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

(საზღვრის სიგანე: 2vw; საზღვრის სტილი: წერტილოვანი; საზღვრის ფერი: ცისფერი;)

შემოკლებით, როგორც საზღვარი: სიგანე სტილის ფერი.

( საზღვარი: 1px მყარი #4c6ea1; )

კონკრეტული მხარისთვის, ის დაყენებულია შაბლონის border-top(/right/bottom/left)-style(/color/width/radius) გამოყენებით.

(საზღვრის ზედა ფერი: მუქი ლურჯი;)

Padding აყენებს ბალიშს უჯრედის შიგნით ტექსტიდან ჩარჩომდე, text-align ადგენს გასწორებას.

სტილები გამოიყენება მაგიდის გარეგნობის შესაქმნელად. საზღვრის თვისება საშუალებას გაძლევთ მიუთითოთ საზღვრის სისქე, სტილი და ფერი. Padding ადგენს ჩაღრმავებას ტექსტიდან, text-align ადგენს გასწორებას.

Th, td (საზღვარი: 1vw მყარი #4c6ea1; padding: 1vw; ტექსტის გასწორება: მარცხნივ; )

ჩარჩოები არ არის

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

ცხრილი ( ტექსტის გასწორება: მარცხნივ; ფონის ფერი: rgba(228, 228, 245); საზღვარი-ზედა-მარცხნივ-რადიუსი: 15em 1em; საზღვარი-ქვედა-მარჯვნივ-რადიუსი: 15em 1em; ) td, th ( padding: 1.5 ვტ)

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

ცხრილი (ტექსტის გასწორება: მარცხნივ; ფონის ფერი: rgba(228, 228, 245); სიგანე: 70vw; საზღვრების დაშორება: 2vh 2vh; ) td, th ( padding: 1.5vh; ) td (ფონის ფერი: rgba (247, 247, 255);

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

ცხრილი ( ტექსტის გასწორება: ცენტრში; საზღვრის ჩაკეცვა: კოლაფსი; ფონის ფერი: rgba(228, 228, 245); საზღვრის რადიუსი: 50%; სიგანე: 29vh; სიმაღლე: 10vh; საზღვრის სტილი: დამალული; ) td (შეფუთვა: 1.5vh; საზღვარი: 0.5vh მყარი შავი;)

კოლაფსი და გამოყოფა

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

ცხრილი (საზღვარი-ჩაკეცვა: კოლაფსი;)

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

ორმაგი ჩარჩოები

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

ცხრილი (საზღვრების დაშორება: 0.5vw 1vw; )

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

ცხრილი ( საზღვრების ინტერვალი: 0.5vw 1vw; კონტური: 1vw მყარი #4c6ea1; ბალიშები: 1vw; ფონის ფერი: შავი; ) td, th ( საზღვარი: 1vw მყარი #4c6ea1; ბალიშები: 0.3vw; ტექსტის გასწორება: მარცხნივ; ფონის ფერი: თეთრი)

ცარიელი უჯრედები

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

ცხრილი (ცარიელი უჯრედები: ჩვენება;)

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

ცხრილი ( საზღვრების ინტერვალი: 0.5vw 1vw; საზღვარი: 0.1vw მყარი #4c6ea1; ბალიშები: 0.5vw; ფონის ფერი: rgba(33, 31, 171, 0.12); ცარიელი უჯრედები: დამალვა; ) td, th (საზღვარი : 0.3vw მყარი #4c6ea1 ტექსტის გასწორება: მარცხნივ;

ატრიბუტი

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

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

უფროსი	უფროსი	უფროსი
უჯრედი	უჯრედი	უჯრედი
უჯრედი	უჯრედი	უჯრედი

ცხრილი (საზღვარი ზედა: 1vw მყარი #486743; შრიფტის ზომა: 5vw; ) th, td (შეფუთვა: 2vw; )

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

ცხრილი (ბოლო: 1vw წერტილოვანი #486743; )

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

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

სტილის კონფლიქტები

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

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

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

კონფლიქტის ილუსტრაცია

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

უფროსი	უფროსი	უფროსი
უჯრედი	უჯრედი	უჯრედი
უჯრედი	უჯრედი	უჯრედი

შესაბამისი css.

ტექსტი ( შრიფტი-ოჯახი: Helvetica, Sans-serif; შრიფტის ზომა: 5vw; ფერი: შავი; ზღვარი: 0; სიგანე: 80vw; ფონის ფერი: თეთრი; padding: 3vw; ) ცხრილი (ფონის ფერი: rgba(33 , 31, 171, 0,12 ბალიშები: 0,5vw-საზღვაო ინტერვალი: დამალული; .second_cell ( საზღვარი: 0.01vw მყარი #4c6ea1; ) .third_cell (კონტური: 0.01vw ორმაგი წითელი; )

ჩარჩოს სტილები

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

Th, td ( შიგთავსი: 1vw; ტექსტის გასწორება: მარცხნივ; საზღვრის-სიგანე: 0.5vw; საზღვრის ფერი: მუქი; საზღვრის სტილი: წერტილოვანი; ) .შვიდი ( საზღვრის ზედა ფერი: ცისფერი; საზღვრის ზემოთ - სტილი საზღვრები-მარჯვნივ-სიგანე: საზღვრები-ქვედა-სტილი: დამალული;

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

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

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

სულ ათი კადრის სტილია. ისინი ყველა ცვლის ხაზს ან ხსნის მას:

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

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

ცხრილი ( ფონის ფერი: rgba(33, 31, 171, 0.12); padding: 0.5vw; საზღვრის-collapse: collapse; კონტური: 0.3vw მყარი შავი; ) th, td (შევსება: 1vw; ტექსტის გასწორება: მარცხნივ; ) .ერთი ( სასაზღვრო-ზემო: დამალული; საზღვრის-მარცხნივ: დამალული;) .ორი (საზღვარი-ზემო: 0.4vw ორმაგი #4c6ea1; საზღვარი-მარცხნივ: 0.4vw ორმაგი #4c6ea1;) .სამი (საზღვარი-ზედა: 0.5vw საზღვრები #4c6ea1; საზღვარი-მარცხნივ: 0.8vw წერტილოვანი #4c6ea1.ექვსი (საზღვარი-ზემო: 0.9vw ქედი #4c6ea1; საზღვარი-მარცხნივ: 0.9vw ქედი #4c6ea1;) : 1vw დასაწყისი #4c6ea1; .რვა (საზღვარი-ზედა: 1.1vw ღარი #4c6ea1; საზღვარი-მარცხნივ: 1.1vw ღარი #4c6ea1;) .nine (საზღვრის ზედა: 1.2vw ჩასმული #4c6ea1; ჩასმა #4c6ea1;

მასალის სტრუქტურირება

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

• ნულოვანი ხაზები (საზღვრის-სიგანისთვის მიუთითეთ მნიშვნელობა 0px);
• დამალული.

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

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

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

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

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

ცხრილი (საზღვრის მარცხენა სტილის: დამალული;)

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

Tr (საზღვრის სტილი: დამალული;)

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

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

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

უჯრედის ფონის ფერი

ცხრილის ყველა უჯრედის ფონის ფერი ერთდროულად დაყენებულია ფონის თვისებით, რომელიც გამოიყენება TABLE ამომრჩეველზე. ამ შემთხვევაში, უნდა გახსოვდეთ სტილის გამოყენების წესები, კერძოდ, ელემენტების თვისებების მემკვიდრეობა. მიუხედავად იმისა, რომ ფონის თვისება არ არის მემკვიდრეობით მიღებული, უჯრედების ფონის ნაგულისხმევი მნიშვნელობა გამჭვირვალეა, ე.ი. გამჭვირვალობა, ამიტომ ფონის შევსების ეფექტი ასევე მიიღება უჯრედებისთვის. თუ TABLE-თან ერთად დააყენებთ TD ან TH ამომრჩევის ფერს, მაშინ ეს ფერი დაყენდება უჯრედის ფონად (მაგალითი 2.3).

მაგალითი 2.3. ფონის ფერი

სათაური 1	სათაური 2
უჯრედი 3	უჯრედი 4

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

ბრინჯი. 2.9. ტექსტის გასწორება უჯრედებში

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

მაგალითი 2.9. უჯრედის შიგთავსის ვერტიკალურად გასწორება

მაგალითი 2.4. ველები ცხრილებში

ეს მაგალითი ადგენს სათაურის სიმაღლეს