ცხრილის შეყვანა css. მინდვრები შუაში

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

ვარიაციები ბლოკის მოდელით

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

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

ხელისუფლების საზღვრების დაშორება

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

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

მაგიდა (
საზღვრების დაშორება: 0;
}

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

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

გარე შეყვანის შუაზე დაყენების ძველი გზა

ადრე ამ ტეგისთვის

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

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

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

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

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

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

(მაგიდის „ძირი“) ფონის ფერი – მარჯანიელემენტისთვის ("მაგიდის სათაური") დააყენეთ ფონის ფერი ვერცხლი.

ელემენტებისთვის

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

ჩვენი დუნდულების შედეგი:

Პატარა 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

ვისი განაცხადი:

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

) – უფრო თამამი ვიდრე გამოსახულება.

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

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

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

ჩვენი დუნდულების შედეგი:

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

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

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

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

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

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

საზღვრების დაშორება: 0;
1	2	3
2
3

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

ვისი განაცხადი:

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

) – უფრო თამამი ვიდრე გამოსახულება.

ცხრილის შუაში (სათაურები და მონაცემთა შუა ნაწილი) ჩვენ ვაყენებთ სივრცეს 5 პიქსელის ზომას შორის მეთექვსმეტე ფერით #F50 და დავაყენეთ ფიქსირებული სიგანე 50 პიქსელი და ფიქსირებული სიმაღლე 75 პიქსელი.

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

ჩვენი დუნდულების შედეგი:

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

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

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

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

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

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

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

ცხრილის სათაურის გადაწყობა

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

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

vikoristannya vlastivosti-ის კონდახი წარწერის მხარეს

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

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

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

ჩვენი დუნდულების შედეგი:

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

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

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

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

მნიშვნელობა	აღწერა
დატოვა	ტექსტი იწყება შუადან მარცხნივ. Tse znachennya za promovchannyam (yakscho პირდაპირ ბოროტების ტექსტზე მარჯვნივ).
უფლება	რეკლამის ტექსტი არის მარჯვენა ხელი. ეს მნიშვნელოვანია პრომისტებისთვის (პირდაპირ ტექსტში, მარჯვნივ მარცხნივ).
ცენტრი	ტექსტი გასწორებულია ცენტრში.
ამართლებს	ჭიმავს ხაზებს ისე, რომ კანის ხაზი იგივე სიგანე იყოს (ტექსტს შუა სიგანეზე აჭიმავს).

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

ჩვენი დუნდულების შედეგი:

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

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

* - მნიშვნელობები sub , super , text-top , text-bottom , length და % , შენახული ცხრილის შედგენამდე, მიღებული იქნება საბაზისო ხაზის შესაბამისი მნიშვნელობებიდან.

მოდით შევხედოთ ვიკორისტანის კონდახს:

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

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

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

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

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

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

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

მოდით შევხედოთ ამ ძალის სტაგნაციას შემტევ კონდახზე:

კონდახი vikoristannya vlastivosti მაგიდის განლაგება

მაგიდა-განლაგება: ავტო;
სახელი	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

ვისი განაცხადი:

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

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

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

Wikoristanny-ის კონდახი ფსევდოკლასამდე: მე-n-შვილი მაგიდებით

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

ვისი განაცხადი:

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

1	2	3	4	5

ვისი განაცხადი:

ცხრილის ცენტრში მოვათავსეთ გარე მინდვრები, დავაყენეთ სათაურის ველების სიგანე და სიმაღლე 50 პიქსელზე და დავაზუსტეთ ხედვაკორდონი 5 პიქსელი.
დადგინდა, რომ თავის ცენტრში (ფსევდოკლასი :hover) ცურვისას უკანა ტანის ამოღება ხდება. ლურჯიფერადი, ფორთოხალიფერადი ტექსტი, კორდონი ფორთოხალიფერი 5 პიქსელი და დამრგვალების რადიუსი 100%.
პროზორული კორდონიაუცილებელია კორდონის ქვეშ ადგილის დასაჯავშნად, რომელიც ნაჩვენები იქნება ცურვისას, რადგან „სტრიბატის“ ცხრილის შექმნა შეუძლებელია.

ჩვენი დუნდულების შედეგი:

წინ მიმავალი კონდახი გამოდის Wikostanny HTMLელემენტები і და მათი სტილიზაციები.

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

განაცხადის No.	სერვისი	ფასი, რუბლი.	ერთად
1	Spiv	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 ელემენტი თქვენ შეგიძლიათ დააყენოთ მხოლოდ ერთი CSS კონტროლი - ფონის ფერი (ფონის ფერი), მაგრამ თქვენ არ შეგიძლიათ დააყენოთ ფონის ფერი ელემენტზე (ფსევდო-კლასი :hover) ჰოვერირებისას. ამ შემთხვევაში, ჩვენ გადავხედავთ, თუ როგორ უნდა გამოვყოთ მთელი ცხრილი CSS-ის გამოყენებით.

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

განაცხადის No.	სერვისი	ფასი, რუბლი.	ერთად
1	Spiv	6 000	6 000
2	მიტია	2 000	2 000
3	მოწესრიგება	1 000	1 000
4	ნიტია	1 500	1 500
5	Კითხვა	3 000	3 000

ვისი განაცხადი:

ჩვენ ვაყენებთ, რომ ჩვენი ცხრილი დაიკავოს Father-ის ელემენტის 100%-ით, ცხრილის სვეტები იკავებენ Father-ის ელემენტის 25%-ს და მთავარი საზღვარი არის 1 პიქსელიანი მწვანე ფერი, სათაურებისა და მონაცემთა სვეტების სიმაღლე ხდება 45px. შუა ნაწილებს შორის უფსკრული მოწესრიგებულია, ვიკორისტი და ძალაუფლების საზღვარი იშლება მნიშვნელობებისთვის .
ასე რომ, ვიკორისტი და ფსევდოელემენტი :: კანის ელემენტის ნაცვლად ემატება after როცა მიუთითებს. :: შემდეგ ფსევდოელემენტი დიდად არის დამოკიდებული შინაარსის სიმძლავრეზე, ამიტომ ჩვენ ჩავსვით ბლოკის ელემენტი, რომელიც არის ფერის უკანა მხარეს. ტყისმწვანედა მაისი აბსოლუტურად პოზიციონირება.
აქ აბსოლუტური პოზიციონირება აუცილებელია ელემენტის წინაპრის მოცემულ კიდეზე გადასატანად, რომელშიც წინაპარი პასუხისმგებელია პოზიციის დედამნიშვნელობაზე კონტროლის ფონზე - სტატიკური, წინააღმდეგ შემთხვევაში სამუშაო განხორციელდება მინიჭებული ზღვარი.ბრაუზერზე დავაინსტალირეთ ცხრილისთვის კონკრეტული პოზიციონირება(ნათესავი).
ჩვენი გენერირებული ბლოკისთვის, ჩვენ დავაყენეთ სიმძლავრე ზევით, რაც პირდაპირ მიუთითებს პოზიციური ელემენტის გადაადგილებაზე ზედა კიდედან და სიმძლავრე ქვემოდან, რაც პირდაპირ მიუთითებს პოზიციური ელემენტის ქვედა კიდეზე გადაადგილებაზე. ორივე ავტორიტეტისთვის მითითებული იყო მნიშვნელობა 0, ასე რომ ბლოკი დაიკავებს მთელ ელემენტს ცხრილის ქვედა და ზედა ნაწილში, რომლის სიგანე დაყენებულია 25% -ზე და ეს მნიშვნელობა შეესაბამება თავად ყუთის სიგანეს. .
მე დავასკვენი სიმძლავრე, რომელიც ჩვენ დავაყენეთ ამ ბლოკისთვის: z-ინდექსი მნიშვნელობებით "-1" ნიშნავს პოზიციური ელემენტების განლაგების რიგს. Z ღერძი. ეს სიმძლავრე აუცილებელია იმისთვის, რომ ტექსტი იყოს ბლოკის წინ და არა მის უკან, თუ არ დააყენეთ მნიშვნელობა ნულზე ნაკლები, მაშინ ბლოკი დახურავს ტექსტს.

ჩვენი დუნდულების შედეგი:

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

იკითხა თემაზე

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

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

2016-2020 დენის ბოლშაკოვი, საიტის პატივისცემა და წინადადებები შეიძლება გაიგზავნოს საიტზე@gmail.com

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

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

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

ოჟე, ამისთვის კარის ჩარჩო HTML ცხრილი შუაგულებს შორისერთი ტეგის ატრიბუტი აკლია

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

...

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

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

...

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

vikorystuvati ატრიბუტი cellpadding. და ეს არის რიცხვის მნიშვნელობა, რაც ნიშნავს პიქსელის ზომებს.

...

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

კონდახი HTML ცხრილის ჩარჩოებსა და შესასვლელებს შორის

საზღვრები, ჩარჩოები და მაგიდის შესასვლელები

შუა 1.1	შუა 1.2	შუა 1.3
შუა 2.1	შუა 2.2	შუა 2.3
შუა 3.1	შუა 3.2	შუა 3.3

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

შუა 1.1	შუა 1.2	შუა 1.3
შუა 2.1	შუა 2.2	შუა 2.3
შუა 3.1	შუა 3.2	შუა 3.3

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

ცხრილი შესასვლელებისა და გაფართოებების ცვლილებებით:

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

ჟიდნო HTML სინტაქსი, ბრაუზერები ამატებენ cellpacing და cellpadding მნიშვნელობებს ცხრილის ზომებსა და შუაში. მაგალითად, თუ დააყენებთ სანიშნეს სიგანეს 100 პიქსელზე და cellpadding = "10" - ბრაუზერები დაამატებენ 20 პიქსელის სიგანეს (მარჯვნივ 10 პიქსელს) და დამატებით 120 პიქსელს. ბოდიშს გიხდით, როგორც კი წახვალ მიხვდებით.

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

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

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

პირველი მეთოდი. აბსტრაქტულად შეიყვანეთ სტილის ატრიბუტი შემდეგი მნიშვნელობებით:

style="margin:0" >... - იღებს ნახვებს HTML გვერდის ყველა მხრიდან.

სტილი= "ზღვარი: ზედა მარჯვენა ქვედა მარცხნივ">... - არეგულირებს კანის მხარის ღიობების ზომას წლის ისრის უკან. როგორც წესი, ზომები იზომება პიქსელებში, მაგალითად: style= "ზღვარი: 5px 3px 4px 5px" >...

სხვა და სხვა ხელით გზა. უ თეზი

Საშინაო დავალება.

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

შექმენით სამი ცხრილი, თითოეული შედგება ერთი რიგისა და სამი სვეტისგან.
პირველ ცხრილში მოათავსეთ გვერდის სათაური ან „სათაური“ (არ აგერიოთ HTML დოკუმენტის „სათაურთან“), მეორეში - მარცხნივ. მარჯვენა მენიუ, ისევე როგორც ძირითად ადგილს (შინაარსს), მესამეს აქვს გვერდის ქვედა კოლონტიტული ან „ფუტერი“.
შეიძლება დაფიქსირდეს კანის მაგიდის პირველი და დარჩენილი მონაკვეთების სიგანე.
Მნიშვნელოვანი. ვიქორის ტეგი მხოლოდ ოთხი ღილაკის დაჭერისთვის ჰორიზონტალური მენიუ"შაფცის" მხარეს. სხვა შემთხვევაში, არ დაუშვათ სურათები ნაწილებად, სხვა შემთხვევაში, მხოლოდ რამდენიმე ფერი გამოჩნდება ცხრილში, ხოლო პირველ და ბოლო ცხრილში არის #99FF99.
გვერდითი შინაარსის ტექსტი გვერდიგვერდ გასწორდება ცხრილის შუაში, ხოლო სათაური განთავსდება ცენტრში.
თუ პრობლემაა მაგიდის შუა ნაწილებს შორის სივრცეში, ისევე როგორც შუა კიდეებს, მაშინ დაფიქრდით, სად უნდა მოიხსნას და სად უნდა გაიზარდოს.

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

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

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

1. მაგიდებს შორის.

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

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

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

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

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

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

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

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

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

ცხრილი (საზღვრები: 3px მყარი ნაცრისფერი;)

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

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

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

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

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

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

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

ცხრილი (სიგანე: 600 პიქსელი;) th (სიგანე: 20%;) td:first-child (სიგანე: 30%;)

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

Th, td (შეფუთვა: 10px 15px;)

3. როგორ დავაყენოთ ცხრილის ფონი

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

4. მაგიდის ნივთები

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

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

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

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

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

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

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

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

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

...

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

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

Პატარა 2. მაგიდის ქვეშ სათაურის ჩვენების მაგალითი

6. როგორ შევქმნათ უფსკრული შუა ჩარჩოებს შორის

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

Სინტაქსი

ცხრილი (საზღვრის კოლაფსი: კოლაფსი;)
Პატარა 3. კონდახის მაგიდა ცალკე ჩარჩოებით

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

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

Სინტაქსი

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

8. როგორ მოვაგროვოთ ცარიელი ნივთები მაგიდაზე

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

კომპანია	Q1	Q2	Q3
მაიკროსოფტი	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; შრიფტის ზომა: 14 პიქსელი; ფონი: თეთრი; მაქსიმალური სიგანე: 70%; სიგანე: 70%; საზღვრის ჩაკეცვა: კოლაფსი; ტექსტი -გასწორება: მარცხნივ; ) th ( შრიფტის წონა: ნორმალური; ფერი: #039; საზღვრის ქვედა: 2px მყარი #6678b1; padding: 10px 8px; ) td (ფერი: #669; padding: 9px 8px; გარდამავალი: .3s წრფივი; ) tr:hover td (ფერი: #6699ff;)

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

Td (ბოლო-ბოლო: 1px მყარი #cccc; ფერი: #669; padding: 9px 8px; გარდამავალი: .3s ხაზოვანი; )/*მეტი კოდი - როგორც აპლიკაციაში*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

შუაგულების ფერადი ფონი

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

კონდახი 2.3. ფერადი ფონი

მაგიდები

სათაური 1	სათაური 2
შუა 3	შუა 4

ამ შემთხვევაში ლურჯი ფერის ფონი არჩეულია შუაში (ტეგი ) და წითელი სათაურის ტეგი (ტეგი ). ამიტომ, ვინაიდან TH სელექტორის სტილი არ არის მითითებული, TABLE სელექტორის მამის ფონი „გაბრწყინდება“. და TD სელექტორის ფერი პირდაპირ არის მითითებული, შუა ღერძი "ივსება" ლურჯი ფერით.

ამ კონდახის შედეგი ნაჩვენებია ნახ. 2.4.

Პატარა 2.4. ფერის ფონის შეცვლა

მინდვრები შუაში

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

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

კონდახი 2.4. ცხრილის ველები

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

მაგიდები

სათაური 1	სათაური 2
შუა 3	შუა 4

ამ აპლიკაციაში, სელექტორების დამატებითი დაჯგუფებისთვის, ველები ერთდროულად დამონტაჟებულია TD და TH სელექტორისთვის. კონდახის შედეგი ნაჩვენებია ნახ. 2.5.

Პატარა 2.5. ველები შუაში

თუ დაყენებულია მაგიდის შუაში ჩასმის სტილის ძალა, მაშინ ტეგის cellpadding ატრიბუტი

იგნორირებულია.

დადექით შუაგულებს შორის

ცენტრებს შორის სივრცის შესაცვლელად დაყენებულია ტეგის cellpacing ატრიბუტი

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

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

კონდახი 2.5. დადექით შუა ქუჩების კორდონებს შორის

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

უჯრედების ინტერვალის ჩანაცვლება

ლეონარდო	5	8
რაფაელი	4	11
მიქელანჯელო	24	9
დონატელო	2	13

ამ კონდახის შედეგი ნაჩვენებია ნახ. 2.6.

Პატარა 2.6. ცხრილის ხედი საკონტროლო სიის საზღვრების ინტერვალის საათის ქვეშ

ბრაუზერი Internet Explorerამ ვერსიამდე, საზღვრების დაშორების ძალა არ არის მხარდაჭერილი, ამიტომ ცხრილისთვის რომელ ბრაუზერში დაყენდება პარამეტრებისთვის მითითებული უჯრედების დაშორების მნიშვნელობები (დაყენებულია 2 პიქსელზე).

TABLE ამომრჩეველზე საზღვრის კოლაფსის სიმძლავრის დამატებისას უჯრედების ინტერვალის ატრიბუტი იგნორირებულია და საზღვრების დაშორების მნიშვნელობები ნულამდე აღდგება.

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

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

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

ვიკიპედია cellpacing ატრიბუტისთვის

თქვენ ხედავთ რა არის ტეგის cellpacing ატრიბუტი

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

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

Vikoristannya vlastivosti საზღვარი

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

საზღვრის დახმარებით, მთლიანობაში მაგიდის ირგვლივ ჩარჩოს ვამატებთ TABLE ამომრჩეველს, ხოლო შუაში ჩარჩოს TD ან TH სელექტორს (მაგალითი 2.6).

კონდახი 2.6. ჩამოკიდებული ჩარჩოს დამატება

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

მაგიდები

სათაური 1	სათაური 2
შუა 3	შუა 4

ვისი კონდახია ვიკორისტი? ჩამოკიდებული ჩარჩოშავი ფერი თავად მაგიდასთან და თეთრი ფერის ერთი ჩარჩო კანის მიდამოებთან. კონდახის შედეგი ნაჩვენებია ნახ. 2.7.

Პატარა 2.7. კორდონი მაგიდასთან და შუაში

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

. მიუხედავად იმისა, რომ ეს ატრიბუტი არსად ჩანს აპლიკაციის კოდში, ბრაუზერი არის vikoryst yogo პოპულარიზაციისთვის. რა დააყენო

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

კონდახი 2.7. ერთი ჩარჩოს გახსნა

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

მაგიდები

სათაური 1	სათაური 2
შუა 3	შუა 4

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

Პატარა 2.8. კორდონი მაგიდასთან

ვირუსი ჯიშის ნაცვლად

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

კონდახი 2.8. ვირუსი ჰორიზონტალურად ცენტრირების ნაცვლად

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

მაგიდები

სათაური 1	შუა 1	შუა 2
სათაური 2	შუა 3	შუა 4

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

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

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

კონდახი 2.9. ვერტიკალური ცენტრირების ნაცვლად ვერიფიკაცია

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

მაგიდები

სათაური 1	სათაური 2
შუა 1	შუა 2

რომელი განაცხადისთვის არის მითითებული სათაურის სიმაღლე 40 პიქსელიდან ტექსტი გასწორებულია ქვედა კიდის გასწვრივ. კონდახის შედეგი ნაჩვენებია ნახ. 2.10.

Პატარა 2.10. ტექსტის გადამოწმება შუაში

ცარიელი შუაგულები

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

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

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

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

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

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

კონდახი 2.10. ცარიელი შუაგულები

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

ლეონარდო	5	8
რაფაელი		11
მიქელანჯელო	24
დონატელო		13

Safari ბრაუზერში ცხრილის ხედი ნაჩვენებია ნახ. 2.11a. იგივე ცხრილი IE7 ბრაუზერში ნაჩვენებია ნახ. 2.11ბ.

ა. ბრაუზერებში Safari, Firefox, Opera, IE8, IE9

ბ. ბრაუზერში IE7

Პატარა 2.11. მაგიდის ხედი ცარიელი კონტეინერებით

კატეგორიები

პოპულარული