HTML ცხრილის უჯრედის ფონი. ატრიბუტები და თვისებები და


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

HTML ცხრილის აღწერილობის საშუალებები

WWW– ს შემუშავებისთანავე ცხადი გახდა, რომ NTML– ში ჩასმული საშუალებები არ არის საკმარისი სხვადასხვა სახის დოკუმენტების მაღალხარისხიანი ჩვენებისთვის. НТМL– ის მინუსი იყო მისი შემადგენლობის მაგიდის ჩვენების საშუალებების არარსებობა. ამ მიზნით, წინასწარ ფორმატირებული ტექსტი (ტეგ 

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


ცხრილების შექმნა HTML- ში


ნიშანი გამოიყენება ცხრილების აღსაწერად<ТАВLЕ>... მონიშნე<ТАВLЕ>როგორც მრავალი სხვა, ის ავტომატურად თარგმნის ხაზს ცხრილის წინ და შემდეგ.


ცხრილის რიგის - ტეგის შექმნა<ТR>


მონიშნე<ТR> (Table Row, Table row) ქმნის ცხრილის მწკრივს. ყველა ტექსტი, სხვა ტეგები და ატრიბუტები, რომლებიც უნდა განთავსდეს ერთ ხაზზე, უნდა განთავსდეს lt; TR\u003e ტეგებს შორის.


ცხრილის უჯრედების განსაზღვრა - Tag<ТD>


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

 

 
მაგიდა

 

 

 

 თუ ცხრილს აქვს ორი TR ნიშანი, მაშინ მას აქვს ორი რიგი.
 

 

 თუ სტრიქონში სამი TD ტეგია,
 შემდეგ მასში
 სამი სვეტი.
 

 

 



 
მაგიდის სვეტის სათაურები - ტეგი<ТН>


ცხრილის სვეტებისა და მწკრივების სათაურები მითითებულია სათაურის ტეგით<ТН> (ცხრილი Neader, ცხრილი სათაური). ეს ტეგები ჰგავს<ТD>... განსხვავება იმაშია, რომ ტექსტი თეგებს შორის<ТН>, ავტომატურად იწერება თამამად და ნაგულისხმევად მდებარეობს უჯრედის შუა ნაწილში. შეგიძლიათ გააუქმოთ ცენტრირება და გასწორდეთ ტექსტი მარცხნივ ან მარჯვნივ. თუ იყენებთ<ТD> ტეგით<В> და ატრიბუტი<АLIGN=center>, ტექსტი სათაურსაც წააგავს. ამასთან, გაითვალისწინეთ, რომ ყველა ბრაუზერი მხარს არ უჭერს სქელ ტექსტს ცხრილებში, ამიტომ უმჯობესია ცხრილის სათაურის დაყენება<ТН>.

 

 

 

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

 

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

 

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

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 




ცხრილის სათაურების გამოყენება - ტეგი<САРТIОN>


მონიშნე  საშუალებას გაძლევთ შექმნათ მაგიდის სათაურები. სტანდარტულად, სათაურები ორიენტირებულია და განთავსებულია ზემოთ (<САРТION АLIGN=top>), ან მაგიდის ქვეშ (<САРТION ALIGN=bottom>) სათაური შეიძლება იყოს ნებისმიერი ტექსტი და სურათები. ტექსტი გაყოფილი იქნება სტრიქონებად, რომლებიც ემთხვევა ცხრილის სიგანეს. ზოგჯერ tag<САРТION> გამოიყენება სურათის სათაურისთვის. ამისათვის საკმარისია აღწეროს ცხრილი საზღვრების გარეშე.

 

 

 სასადილო მაგიდის ზემოთ
 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 

 სათაური ცხრილის ქვემოთ
 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 




NOWRAP ატრიბუტი


როგორც წესი, ნებისმიერი ტექსტი, რომელიც არ ჯდება მაგიდის უჯრედის ერთ სტრიქონში, გადადის შემდეგ სტრიქონზე. ამასთან, NOWRAP ატრიბუტის ტეგებთან ერთად გამოყენებისას<ТН> ან<ТD> უჯრედის სიგრძე ფართოვდება ისე, რომ თანდართული ტექსტი ერთ სტრიქონზე ჯდება.


COLSPAN ატრიბუტი


წარწერები<ТD> და<ТН> შეცვლილია COLSPAN (Column Span) ატრიბუტით. თუ გსურთ უჯრედის გაკეთება ზედა ან ქვედა ნაწილზე განიერი იყოს, შეგიძლიათ გამოიყენოთ COLSPAN ატრიბუტი, რომ გაჭიმოთ იგი ნებისმიერი რაოდენობის რეგულარულ უჯრედებზე.

 

 

 

 

 თუ გსურთ უჯრედი უფრო ფართო გააკეთოთ, ვიდრე ზედა ან ქვედა,
 შეგიძლიათ გამოიყენოთ СLSPAN \u003d 2 ატრიბუტი,
 

 

 გაჭიმოს იგი ნებისმიერი რაოდენობის რეგულარულ უჯრედებზე.
 

 

 




ROWSPAN ატრიბუტი


ROWSPAN ატრიბუტი გამოიყენება თეგებში<ТD> და<ТН>, COLSPAN \u003d ატრიბუტის მსგავსია, გარდა იმ შემთხვევისა, რომ იგი განსაზღვრავს უჯრედის გასწორების მწკრივების რაოდენობას. თუ ROWSPAN \u003d s ატრიბუტში მიუთითეთ ერთზე მეტი ნომერი, მაშინ მწკრივების შესაბამისი რაოდენობა უნდა იყოს გაჭიმული უჯრედის ქვემოთ. მისი განთავსება მაგიდის ბოლოში არ შეიძლება.


WIDTH ატრიბუტი


WIDTH ატრიბუტი გამოიყენება ორი გზით. თქვენ შეგიძლიათ განათავსოთ იგი tag<ТАВLЕ>მისცეს მთელი ცხრილის სიგანე, ან ის შეიძლება გამოყენებულ იქნას თეგებში<ТD> ან<ТН>უჯრედის ან უჯრედების ჯგუფის სიგანის დასაყენებლად. სიგანე შეიძლება მიეთითოს პიქსელებში ან პროცენტულად. მაგალითად, თუ თეგში დააყენებთ<ТАВLЕ> WIDTH \u003d 250, თქვენ მიიღებთ ცხრილს, რომლის სიგანეა 250 პიქსელი, მიუხედავად თქვენი მონიტორის გვერდის ზომისა. WIDTH \u003d 50% -ის დანიშვნისას თეგში<ТАВLЕ> მაგიდა აიღებს გვერდის სიგანის ნახევარს ეკრანზე გამოსახულების ნებისმიერი ზომისთვის. მაგიდის სიგანეზე პროცენტად მითითებისას გაითვალისწინეთ, რომ თუ მომხმარებელს აქვს ვიწრო ხედი, თქვენი გვერდი შეიძლება ცოტა უცნაურად გამოიყურებოდეს. თუ პიქსელს იყენებთ და ცხრილი უფრო ფართოა, ვიდრე ხედვის პორტი, ქვედა მხარეს გამოჩნდება გადახვევის ზოლი, რომ გვერდზე გადაადგილდეს მარჯვნივ და მარცხნივ. მოცემული დავალების მიხედვით, მაგიდის სიგანის დაყენების ორივე მეთოდი შეიძლება სასარგებლო იყოს.

 

 

 

 ტექსტი ან მონაცემები - 100% სიგანე
 

 
 ან 

 

 

 ტექსტი ან მონაცემები - 50% სიგანე
 

 
 ან 

 

 

 ტექსტი ან მონაცემები - 200 პიქსელის სიგანე
 

 
 ან 

 

 

 ტექსტი ან მონაცემები - 100 პიქსელის სიგანე
 

 




ცარიელი უჯრედების გამოყენება


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


CELLPADDING ატრიბუტი


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

 

 

 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 



 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 




ALIGN და VALIGN ატრიბუტები


წარწერები<ТR>, <ТD> და<ТН> მისი შეცვლა შესაძლებელია ALIGN და VALIGN ატრიბუტების გამოყენებით. ALIGN ატრიბუტი განსაზღვრავს ტექსტისა და გრაფიკის ჰორიზონტალურ გასწორებას, ეს არის მარცხნივ ან მარჯვნივ, ან ცენტრისკენ. ჰორიზონტალური გასწორება შეიძლება მითითებული იყოს რამდენიმე გზით:


ALIGN \u003d სისხლდენა ახდენს უჯრედის შინაარსის დაჭერას მარცხენა კიდეზე.


ALIGN \u003d მარცხნივ უჯრედის შინაარსს სწორდება მარცხნივ, CELLPADDING ატრიბუტით მითითებული ჩაღრმავების გათვალისწინებით.


ALIGN \u003d ცენტრი ათავსებს უჯრედის შინაარსს.


ALIGN \u003d მართალია უჯრედის შინაარსს სწორად უთანასწორებს CELLPADDING ატრიბუტით მითითებულ padding- ს.

 

 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 




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


VALIGN \u003d ზედა უჯრედის შინაარსს უთანასწორებს მის ზედა საზღვართან.


VALIGN \u003d შუა უჯრედის შინაარსს ვერტიკალურად ათავსებს.


VALIGN \u003d ქვედა უჯრედის შინაარსს უთანასწორებს მის ქვედა საზღვარს.

 

 

 

 

 VALIGN ატრიბუტი ვერტიკალურად ასწორებს უჯრედში ტექსტსა და გრაფიკას.
 ზედა,
 შუა,
 ქვედა
 

 

  VALIGN \u003d top უჯრედის შინაარსი სწორდება მის ზედა საზღვარზე.
 ზედა,
 ზედა,
 ზედა
 

 

 VALIGN \u003d შუა ადგენს უჯრედის შინაარსს ვერტიკალურად.
 შუა,
 შუა,
 შუა.
 

 

 VALIGN \u003d ქვედა უჯრედის შინაარსი სწორდება მის ქვედა საზღვარზე.
 ქვედა,
 ქვედა,
 ქვედა
 

 

 




სასაზღვრო ატრიბუტი


ტეგში<ТАВLЕ> ხშირად განსაზღვრავს, თუ როგორ გამოიყურება ჩარჩოები, ანუ ხაზები, რომლებიც გარშემორტყმულია მაგიდის უჯრედებზე და თვით მაგიდაზე. თუ არ მიუთითებთ საზღვარს, მიიღებთ ცხრილს ხაზების გარეშე, მაგრამ მათთვის ადგილი იქნება. პარამეტრით იგივე შედეგის მიღწევაა შესაძლებელი<ТАВLЕ ВОRDER=0>... ზოგჯერ გსურთ საზღვარი უფრო სქელი გახადოთ, რომ უკეთესად გამოირჩეოდეს. შეგიძლიათ დააყენოთ განსაკუთრებული თამამი საზღვრები, რომ ყურადღება მიაქციოთ სურათს ან ტექსტს. ჩასმული მაგიდების შექმნისას სხვადასხვა მაგიდისთვის უნდა გააკეთოთ სხვადასხვა სისქის საზღვრები, რომ მათი გარჩევა უფრო მარტივი იყოს.


CELLSPACING ატრიბუტი


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

 

 

 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 ტექსტი ან მონაცემები
 
 ტექსტი ან მონაცემები
 

 

 




BGCOLOR ატრიბუტი


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

 

 

 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 ტექსტი ან მონაცემები
 

 

 




ფონის ატრიბუტი


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


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


კარგია ცხრილების შესახებ, რომ თუ გინდა, მათი საზღვრები უხილავი გახდები. ეს საშუალებას იძლევა გამოიყენოთ ტეგი<ТАВLЕ> ლამაზად განათავსეთ ტექსტი და გრაფიკა გვერდზე. მიუხედავად იმისა, რომ tag<ТАВLЕ> რჩება ერთადერთ მძლავრ ფორმატის ინსტრუმენტად HTML- ში. ვებ – გვერდების დიზაინერებს ახლა თითქმის იგივე თავისუფლება აქვთ გამოიყენონ „თეთრი სივრცე“, როგორც დაბეჭდილი გვერდების შემქმნელები. ცხრილები საუკეთესო საშუალებაა ვებ – გვერდებზე ტექსტის იერარქიული განლაგებისგან თავის ასარიდებლად.


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

 

 

 

 

 
 
ურალის სახელმწიფო პედაგოგიური უნივერსიტეტი

 
მოგესალმებით!

 

 

 სასწავლო კურსი "WEB- მასტერინგის საფუძვლები"
 

 

 		
 

 

 



 
ფერადი მაგიდების შექმნა


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


ფერადი საზღვრები Netscape Navigator- ში. მაგიდის არა მხოლოდ ლამაზი ჩარჩოთი გარშემორტყმა შეგიძლიათ, არამედ შეგიძლიათ შეადგინოთ ფერი, რომელიც განსხვავდება ტექსტისა და ფონის ფერებისგან. შექმენით მარტივი ნაცრისფერი GIF (ან ნებისმიერი სხვა GIF, რომლის ფონიც გინდათ რომ იყოს) და განსაზღვრეთ იგი თეგში<ВODY> როგორც გვერდის ფონი. შემდეგ დააყენეთ გვერდის ფონის ფერი. შედეგად, თქვენი ნიშანი<ВОDY> ასე გამოიყურება:

 

თქვენ შექმენით ორმაგი ფონი - GIF და მოცემული ფერი. შედეგად, ფონის ფერი ჩანს ყველა ცხრილის საზღვარზე და ჰორიზონტალურ ხაზებზე (<НR>) მიუხედავად იმისა, ნაცრისფერია თუ არა თქვენი ფონის GIF, მაგიდების ფერადი ხაზები და საზღვრები შესამჩნევად გამოირჩევა. თუ ფონის GIF არ არის ძალიან რთული, გვერდის ჩატვირთვის დრო მხოლოდ მცირედით გაიზრდება.


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


საზღვრის დაშლა: ცალკე - თითოეულ უჯრედს აქვს საკუთარი საზღვარი (ნაგულისხმევი)


საზღვრის დაშლა: დაშლა - ზოგადი საზღვარი


საზღვრის დაშლა: მემკვიდრეობა - მნიშვნელობა აღებულია მშობლის ელემენტიდან


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


სტილი:

 ... პრაქტიკაში, არის შემთხვევები, როდესაც თქვენ გჭირდებათ სპეციალური სვეტის ფორმატირება, რაც შესაძლებელია შემდეგი გზით: 
ტეგის გამოყენებით
შეგიძლიათ დააყენოთ ნებისმიერი სვეტის ფონი;
ცხრილის td- ის გამოყენებით: first-child, table td: last-child selector, შეგიძლიათ შეადგინოთ ცხრილის პირველი ან ბოლო სვეტი (ცხრილის სათაურის პირველი უჯრის გამოკლებით);
ცხრილის ამორჩევის td: nth-child (სვეტის შერჩევის წესი) გამოყენებით, შეგიძლიათ ცხრილში ჩამოაყალიბოთ ნებისმიერი სვეტი.
შეგიძლიათ წაიკითხოთ მეტი CSS სელექტორების შესახებ.
5. როგორ დავამატოთ ცხრილის სათაური
შეგიძლიათ დაამატოთ სათაური ცხრილს თეგის გამოყენებით 
1
2
3
4
5
6


 


გვერდი






 

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

 

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












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


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

 

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


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


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


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


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


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


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


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



1. ცხრილი ესაზღვრება საზღვარს


მის შიგნით არსებული ცხრილი და უჯრედები ნაჩვენებია ბრაუზერში, ნაგულისხმევი საზღვრების გარეშე. მაგიდის საზღვრები მითითებულია სასაზღვრო საკუთრებით:
ცხრილი.
სათაურის უჯრედის საზღვრები თითოეული სვეტი დაყენებულია მე –9 ელემენტისთვის:
Th (საზღვარი: 1px მყარი ნაცრისფერი;)
უჯრედის საზღვრები td ელემენტისთვის დაყენებულია ცხრილი.
Td (საზღვარი: 1px მყარი ნაცრისფერი;)
მიმდებარე უჯრედების საზღვრების სიგანე არ არის გაორმაგებული, ასე რომ თქვენ შეგიძლიათ დააყენოთ საზღვრები მთელი ცხრილისთვის შემდეგი გზით:
Th, td (საზღვარი: 1px მყარი ნაცრისფერი;)
ცხრილის გარე საზღვარი შეიძლება შეირჩეს გაზრდილი სიგანის მიცემით:
ცხრილი (საზღვარი: 3px მყარი ნაცრისფერი;)
საზღვრების დაყენება ნაწილობრივ შეიძლება:
 / * დააყენეთ 3px ნაცრისფერი გარე საზღვარი ცხრილისთვის * / მაგიდა (საზღვრის ზემო: 3px მყარი ნაცრისფერი;) / * დააყენეთ 1px ნაცრისფერი საზღვარი მაგიდის კორპუსის უჯრედისთვის * / td (საზღვრის ქვედა: 1px მყარი ნაცრისფერი;)
შეგიძლიათ წაიკითხოთ მეტი სასაზღვრო ქონების შესახებ.


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


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


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


ცხრილისა და სვეტების სიგანე ჩვეულებრივ მითითებულია px ან% -ში, მაგალითად:
ცხრილი (სიგანე: 600px;) ე (სიგანე: 20%;) td: პირველი შვილი (სიგანე: 30%;)
მაგიდის სიმაღლე დაყენებული არ არის. მწკრივების სიმაღლე ცხრილების მანიპულირება შესაძლებელია ელემენტებზე ზედა და ქვედა ბალიშების დამატებით 
 და  ... არ არის რეკომენდებული სიმაღლის დაფიქსირება სიმაღლის თვისების გამოყენებით.
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
 



 მაიკროსოფტი
 20.3
 30.5
 




 გუგლი
 50.2
 40.63
 45.23



 ცხრილი (საზღვარი: 1px მყარი # 69c; საზღვრის დაშლა: ცალკე; ცარიელი უჯრედები: დამალვა;) th, td (საზღვარი: 2px მყარი # 69c;)  ფიგურა: 5. ცარიელი მაგიდის უჯრედის დამალვის მაგალითი 
9. ცხრილის განლაგების განლაგება ცხრილის განლაგების თვისების გამოყენებით


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


Სინტაქსი
ცხრილი (ცხრილის განლაგება: ფიქსირებული;)
10. საუკეთესო მაგიდის განლაგებები


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


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


 


თანამშრომელიხელფასიბონუსიმეთვალყურე


სტივენ C. კოქსი$300$50ბობ


ჯოზეფინ თან$150-ენი


ჯოისი მინგი$200$35ენდი


ჯეიმს პენტელი$175$25ენი


 ცხრილი (შრიფტის ოჯახი: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; სიგანე: 70%; საზღვრის დაშლა: კოლაფსი; ტექსტი -align: მარცხენა;) th (შრიფტის წონა: ნორმალური; ფერი: # 039; საზღვრის ქვედა ნაწილი: 2px მყარი # 6678b1; padding: 10px 8px;) td (ფერი: # 669; padding: 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; საზღვრის მარცხნივ: 30px solid #fff; ფერი: # 669; padding: 12px 2px;)
3. "ყუთის" სტილი


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

Th (შრიფტის ზომა: 13px; შრიფტის წონა: ნორმალური; ფონი: # b9c9fe; საზღვრის ზედა: 4px მყარი #aabcfe; საზღვრის ქვედა: 1px მყარი #fff; ფერი: # 039; padding: 8px;) td (ფონი : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: hover td (ფონი: #ccddff;)
ყველაზე რთული რამ არის ფერების სქემის პოვნა, რომელიც ჰარმონიულად ერწყმის თქვენს საიტს. თუ საიტი დატვირთულია გრაფიკითა და დიზაინით, მაშინ ამ სტილის გამოყენება საკმაოდ გაგიჭირდებათ. 

ცხრილი (შრიფტის ოჯახი: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; შრიფტის ზომა: 14px; მაქსიმალური სიგანე: 70%; სიგანე: 70%; ტექსტის გასწორება: ცენტრი; საზღვრის დაშლა: დაშლა ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (შრიფტის ზომა: 13px; შრიფტის წონა: ნორმალური; ფონი: # e8edff; საზღვრის მარჯვნივ: 1px მყარი # 9baff1; საზღვარი - მარცხნივ: 1px solid # 9baff1; ფერი: # 039; padding: 8px;) td (ფონი: # e8edff; საზღვარი მარჯვნივ: 1px solid #aabcfe; საზღვრის მარცხნივ: 1px solid #aabcfe; ფერი: # 669; padding: 8px ;)
4. ჰორიზონტალური ზებრა


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

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


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

ცხრილი (საზღვარი: 1px მყარი # 69c;) ე (შრიფტის წონა: ნორმალური; ფერი: # 039; საზღვრის ქვედა ნაწილი: 1px გაწყვეტილი # 69c; padding: 12px 17px;) td (ფერი: # 669; padding: 7px 17px; ) tr: hover td (ფონი: #ccddff;)
ცხრილი (კონტური: 1px მყარი # 69c;) ე (შრიფტის წონა: ნორმალური; ფერი: # 039; შევსება: 10px;) td (ფერი: # 669; საზღვრის ზემო: 1px გაწყვეტილი #fff; შევსება: 10px; ფონი: #ccddff;) tr: hover td (ფონი: # 99bcff;)
ცხრილი (საზღვარი: 1px მყარი # 6cf;) ე (შრიფტის წონა: ნორმალური; შრიფტის ზომა: 13px; ფერი: # 039; ტექსტის გარდაქმნა: ზედა; საზღვარი მარჯვნივ: 1px მყარი # 0865c2; ზედა ზღვარი: 1px მყარი # 0865c2; საზღვრის მარცხნივ: 1px მყარი # 0865c2; საზღვრის ქვედა: 1px მყარი #fff; შევსება: 20px;) td (ფერი: # 669; საზღვარი მარჯვნივ: 1px დაშლილი # 6cf; შევსება: 10px 20px;)
6. მაგიდის ფონი


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

Png ") 98% 86% განმეორება;) th (შრიფტის წონა: ნორმალური; შრიფტის ზომა: 14px; ფერი: # 339; padding: 10px 12px; ფონი: თეთრი;) td (ფერი: # 669; საზღვარი - ზედა: 1px მყარი თეთრი; შევსება: 10px 12px; ფონი: rgba (51, 51, 153, .2); გადასვლა: .3s;) tr: hover td (ფონი: rgba (51, 51, 153, .1); )



    




    
    
   

    
    


    

        

    
    
    


    



                    

                             

                
             
				
            			



	
            
        
		

                



            
            
            
            
            

                

                    
                                            

    


                                        

                    
                

                
                

                                    

                
                

                    
                

                
                

                    

    კონტაქტები


                    
Olympus კომპიუტერის დახმარება

            

            
            
 © 2020. olympsb.ru. კომპიუტერი დაეხმარება Olympus- ს.