html ცხრილის უჯრედის ფონის ალტერნატიული ფერი. ბრაუზერის ჩვენება

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

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

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

მაგალითი 1: ცხრილის მწკრივების გამოყოფა ხაზებით

	2004	2005	2006
ლალები	43	51	79
ზურმუხტები	28	34	48
საფირონები	29	57	36

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

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

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

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

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

	2004	2005	2006
ლალები	43	51	79
ზურმუხტები	28	34	48
საფირონები	29	57	36
ამეთვისტოები	23	64	97

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

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

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

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

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

n-ე ბავშვის ფსევდოკლასის შესაძლებლობები და მისი გამოყენება საიტზე

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

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

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

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

/wp-content/themes

სინამდვილეში, CSS სტილის დეველოპერების ინსტრუმენტთა პანელზე, თქვენ იპოვით ხაზსაც კი, რომელზეც სასურველი წესი იწერება სტილის ფაილში. ჩემს შემთხვევაში ეს არის 281 ხაზი. ამიტომ, როდესაც გავხსენი style.css Notepad-ში (მე ის მინიჭებული მაქვს როგორც ნაგულისხმევი რედაქტორი ყველა ფაილისთვის, რომელიც გამოჩნდება საიტის ძრავში), მაშინვე გადავედი ამ ხაზზე.

და მის ქვემოთ მე დავამატე კიდევ რამდენიმე წესი (ეს წესი პასუხისმგებელია მენიუს მარჯვენა ზოლის ფონის ფერის შეცვლაზე, როდესაც მაუსის კურსორი პირდაპირ მის ზემოთ არის - ეს მენიუს უფრო "ცოცხალს" ხდის) და n-ით. - ზემოთ ნახსენები ბავშვის ფსევდოკლასი. თუ ჩვენ უკვე ვისაუბრეთ hovver-ზე (იხილეთ ბმული ზემოთ), მაშინ ახლა ვისაუბრებთ nth-შვილზე. თუ შეამჩნიეთ, რომ პარამეტრი 2n ჩაწერილია ფრჩხილებში ამ ფსევდოკლასისთვის.

N-ე შვილი (2n)

Ზოგადად ამ ფსევდო-კლასის n-ე ბავშვის ღირებულებამოცემულია გამოხატვის გამოყენებით: an+b, სადაც a და b არის მთელი რიცხვები, ხოლო n არის მრიცხველი, რომელიც იღებს მთელ მნიშვნელობებს 0-დან და მეტიდან: 0,1,2,3... ჩვენს შემთხვევაში, n მრიცხველის შეცვლისას მივიღებთ რიცხვებს 0. , 2, 4, 6 და ა.შ. ეს ნიშნავს, რომ ამ ფსევდოკლასისთვის მითითებული თვისება (ჩვენს შემთხვევაში, ეს არის სიის ხაზის ფონის დაყენების წესი ) გამოყენებით სიაში #E4F2FA.

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

მენიუს ზოლის ფონისთვის, მაუსის კურსორით მასზე გადასვლისას (ფსევდო კლასის ჰოვერი), იმავე მწკრივიდან ავირჩიე კიდევ უფრო ღია ჩრდილი.

nth-child-ის გამოყენების სხვა მაგალითები

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

მეტი მე-n-შვილის გამოყენების რამდენიმე მაგალითისიების, ცხრილებისა და მსგავსი ელემენტების სხვადასხვა რიგების ხაზგასასმელად:

1. უცნაური ელემენტების დასაცავად, თქვენ შეგიძლიათ გამოიყენოთ NTH-Child (უცნაური) ზემოთ ნაჩვენები გამოხატვის ნაცვლად, და მე -4-ბავშვი (თუნდაც) თუნდაც ელემენტებისთვის.
2. რა მოხდება, თუ გსურთ შეცვალოთ მხოლოდ მეოთხე ხაზი? შემდეგ დაამატეთ CSS წესს ფსევდო კლასის მეცხრე-ბავშვი (4), რომელიც გამოყოფილია მსხვილი ნაწლავის მიერ.
3. გსურთ შეცვალოთ ხაზების გარეგნობა მეცხრეიდან დაწყებული? პრობლემა არ არის - მე-n-შვილი (n+9).
4. თუ გსურთ, პირიქით, შეარჩიოთ მხოლოდ პირველი ცხრა ელემენტი, შემდეგ გამოიყენეთ NTH-CHILL (-N+9) მშენებლობა.
5. თუ გსურთ აირჩიოთ ელემენტები მეცხრეიდან მეთვრამეტემდე, დაამატეთ ნაერთის ფსევდო კლასს: მე -2-ბავშვი (n+9): NTH-Child (-N+18). სუფთა ლოგიკა.
6. გსურთ იგივე გააკეთოთ, როგორც წინა აბზაცში, მაგრამ ხაზს უსვამს მხოლოდ ამ დიაპაზონში თანაბარ რიგებს? პრობლემა არ არის-: მეცხრე-ბავშვი (n+9): nth-child (-n+18): მეცხრე-ბავშვი (თანაბრად).

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

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

შეიძლება დაგაინტერესოთ

ფსევდო კლასების და ფსევდო ელემენტების სელექციონერები CSS- ში (ჰოვერი, პირველი შვილი, პირველი სტრიქონი და სხვები), ურთიერთობები HTML კოდების ტეგებს შორის
ეკრანი (ბლოკი, არცერთი, ხაზის არია) CSS - განათავსეთ HTML ელემენტების ეკრანის ტიპი ვებ - გვერდზე
CSS თვისებები ტექსტური დეკორაცია, ვერტიკალური-გასწორება, ტექსტური გასწორება, ტექსტური ტექსტი ტექსტის დეკორაციისთვის HTML- ში
ჩამონათვალის სტილი (ტიპი, სურათი, პოზიცია) - CSS წესები HTML კოდში სიების გამოჩენის მიზნით
როგორ მოვძებნოთ და წაშალოთ გამოუყენებელი სტილის ხაზები (დამატებითი სელექტორები) თქვენი საიტის CSS ფაილში
პოზიცია (აბსოლუტური, ფარდობითი და ფიქსირებული) - Html ელემენტების განლაგების გზები CSS-ში (წესები მარცხნივ, მარჯვნივ, ზედა და ქვედა) განსხვავებული სტილი შიდა და გარე ბმულებისთვის CSS-ის საშუალებით
Css-ში პრიორიტეტები და მათი ზრდა მნიშვნელოვანი, სელექტორების, მომხმარებლის და ავტორის სტილის კომბინაციისა და დაჯგუფების გამო
შრიფტის (წონა, ოჯახი, ზომა, სტილი) და ხაზის სიმაღლის წესები შრიფტების სტილისთვის CSS-ში
ცურვა და გასუფთავება CSS-ში - ბლოკის განლაგების ხელსაწყოები
რისთვის არის CSS, როგორ დააკავშიროთ კასკადური სტილის ფურცლები Html დოკუმენტთან და ამ ენის ძირითადი სინტაქსი
Tag, class, Id და უნივერსალური სელექტორები, ასევე ატრიბუტების სელექტორები თანამედროვე CSS-ში

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

1. უჯრედების ფონის ფერის დაზუსტება. ეს კეთდება ქონების გამოყენებით ფონის ფერი.
2. უჯრედებში ტექსტის ფერის დაზუსტება. ეს კეთდება ქონების გამოყენებით ფერი.
3. განსაზღვრავს უჯრედის საზღვრების ფერს. ეს კეთდება ქონების გამოყენებით სასაზღვრო-ფერი.

ადრე ფერის შესაცვლელად გამოიყენებოდა ჩარჩოს აღწერის უფრო ლაკონური ფორმა. ის ასე გამოიყურებოდა:

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

და ბოლო ნაწილი იყო პასუხისმგებელი აქ ფერისთვის - მსუბუქი გეი.

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

როგორ შევცვალოთ უჯრედის ფერი

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

Td (ფონის ფერი: ფონის ფერი;)

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

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

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

*	2	3
2	4	6
3	6	9

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

როგორ შევცვალოთ საზღვრის ფერი ცხრილში

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

1. ხაზის ტიპი, ჩვენს შემთხვევაში მყარი (მყარი)
2. ხაზის სისქე, ჩვენს შემთხვევაში 1px
3. ხაზის ფერი, ჩვენს შემთხვევაში ლურჯი

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

Td (საზღვარი: 1px მყარი ლურჯი;)

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

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

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

RowGreen (ფონის ფერი: მწვანე;)

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

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

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

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

როგორ შევცვალოთ ტექსტის ფერი ცხრილში

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

მაგიდა (ფერი: მწვანე; ...)

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

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

ტეგები, რომლებიც გამოიყენება HTML- ში მაგიდის შესაქმნელად

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

მაგალითის კოდი მარტივი ცხრილისთვის

მაგიდის სახელი

სტობეტსი 1	სტობეტსი 2
ტექსტი პირველ საკანში	ტექსტი მეორე უჯრედში

ბრაუზერს აჩვენებს

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

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

html ცხრილების თვისებები და პარამეტრები: შეწევა, სიგანე, ფონის ფერი, საზღვარი (ჩარჩო)

უ მაგიდის ნიშანიარსებობს შემდეგი ატრიბუტები:

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

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

შედეგად, ბრაუზერში გამოჩნდება შემდეგი ცხრილი:

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

ბათილად - ჩარჩოს გარეშე,
ზემოთ - მხოლოდ ზედა ჩარჩო,
ქვემოთ - მხოლოდ ქვედა ჩარჩო,
hsides - მხოლოდ ზედა და ქვედა ჩარჩოები,
vsides - მხოლოდ მარცხენა და მარჯვენა ჩარჩოები,
lhs - მხოლოდ მარცხენა ჩარჩო,
rhs - მხოლოდ მარჯვენა ჩარჩო,
ყუთი - ჩარჩოს ოთხივე ნაწილი.

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

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

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

სტობეტსი 1	სტობეტსი 2

შედეგი

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

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

სტობეტსი 1	სტობეტსი 2
ტექსტი პირველი სვეტის პირველ უჯრედში	ტექსტი მეორე სვეტის მეორე უჯრედში

ბრაუზერი აჩვენებს ცენტრალურ ცხრილს, რომელიც ასე გამოიყურება:

tr რიგები და td უჯრედები HTML ცხრილებში

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

tr და td ტეგებისთვის არის შემდეგი

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

მოდით შევხედოთ კოდს, სადაც უჯრედების შიგთავსი (td) გასწორებულია სხვადასხვა კიდეების გასწვრივ: პირველში მარცხნივ, მეორეში მარჯვნივ:

სტობეტსი 1	სტობეტსი 2
ტექსტი პირველი სვეტის პირველ უჯრედში	ტექსტი მეორე სვეტის მეორე უჯრედში
სტობეტსი 1	სტობეტსი 2

შედეგი

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

Გმადლობთ ყურადღებისთვის! ვიმედოვნებ, რომ მასალა სასარგებლო იყო!

სტობეტსი 1	სტობეტსი 2
ტექსტი პირველი სვეტის პირველ უჯრედში	ტექსტი მეორე სვეტის მეორე უჯრედში