საგანმანათლებლო ტექნოლოგიები - ციფრული რესურსების პორტალი

მოგესალმებით! ამ ვიდეოგაკვეთილში მინდა განახოთ ცხრილის ატრიბუტები. ნახავთ ახალ ტეგს caption, სტილის პარამეტრს collapse, padding, სვეტის ატრიბუტს colspan, მწკრივის ატრიბუტს rowsan პირველ რიგში ვნახოთ სტილის პარამეტრი collapse. მინდა გითხრათ რომ ამ გაკვეთილების თემა არ არის კასკადური სტილების განხილვა, მაგრამ HTML 5-ში ანალოგიური ატრიბუტების გამოყენება მოძველებულად ითვლება. ამიტომ ვარჩიე სტილის გამოყენება, როგორც წინა გაკვეთილში. სტილში collapse პარტამეტრის გამოყენება უზრუნველყოფს უჯრებს შორის მანძილს ან შერწყმას. გთხოვთ style-ს დაამატოთ პარამეტრი collapse . დაიმახსოვრეთ შეტანილი ცვლილებები, დააჭირეთ Run-Launch in Chrome. მართლაც უჯრებს შორის დაცილებები გაქრა ასევე სასურველია გამოიყენოთ პარამეტრი padding იმისათვის რომ უჯრების ხაზსა და ტექსტს შორის ადგილი დარჩეს. ასევე style-ში th და td უჯრებისთვის დაამატეთ padding პარამეტრი რომელიც ტოლია 10px. (5px) დაიმახსოვრეთ შეტანილი ცვლილებები და შემოწმეთ ბრაუზერში რა მოხდება. მართლაც მემგონი ცოტა უფრო კითხვადი ცხრილი მიიღეთ. დაუბრუნდით კოდს... ცხრილთან მუშაობის დროს ძალიან ხშირად საჭიროა ვერტიკალური და ჰორიზონტალური უჯრების გაერთიანება. ჰორიზონტალური უჯრების გასაერთიანებლად td ტეგში უნდა გამოიყენოთ ატრიბუტი colspan, ხოლო ვერტიკალურად უჯრების გასაერთიანებლად — rowspan. იმისთვის რომ გაიაზროთ რისი გაკეთება მოგეთხოვებათ დააკვირდით საბოლოო პროდუქტს: უნდა შექმნათ HTML კოდი, რომლის ბრაუზერში გახსნის შემთხვევაში მომხმარებელი ნახავს გაზაფხულის თვეებს აქ კოდი უნდა ვანახო მე უკვე გახსნილი მაქვს Notepad++, სადაც თქვენ ხედავთ ბოლო ნამუშევარ დოკუმენტს. ............ ეს ფაილი შეინახეთ მეოთხე გაკვეთილის საქაღალდეში. ფაილს დაარქვით სახელი table attributes. შეცვალეთ კომენტარის, title და h3 ტეგების ტექსტები გაზაფხულის თვეები. გაზაფხული მარტი აპრილი მაისი თქვენ ახლა ეკრანზე ხედავთ საბოლოო ცხრილის მაკეტს, ამ ცხრილის აღქმა ბევრნაირად შეიძლება, მაგრამ HTML მას შემდეგნაირად აღიქვამს. სვეტების მაქსიმალური რაოდენობა არის 3, მწკრივების მაქსიმალური რაოდენობა არის 2. ანუ აგებულია ცხრილი 3 სვეტით და 2 მწკრივით. მე ამ გაკვეთილში მოვიქცევი შემდეგნაირად. table ტეგში დავტოვებ წინა კოდის სათაურის და პირველი მწკრივის კოდს. როგორც ცხრილის მაკეტიდან გახსოვთ პირველ მწკრივში განთავსებულია ერთი უჯრა, რომელიც მეორე მწკრივის სამ უჯრას მოიცავს. ასეთი უჯრის მისაღებად პირველი უჯრის th ტეგის შიგნით დაამატეთ colspan ატრიბუტი, რომელიც ტოლი იქნება ბრჭყალებში ჩასმული 3-ის. ეს ატრიბუტი უზრუნველყოფს შემდეგი სამი უჯრის გაერთიანებას. საბოლოო კოდი ასე გამოიყურება th colspan="3". ამ მწკრივში მეტი უჯრები არ არის. შესაბამისად ძველ კოდში არსებული th ტეგები უნდა წაიშალოს. გადადით შემდეგ მწკრივზე. ძველი კოდის მიხედვით, ამ მწკრივში ჩალაგებული იყო 4 უჯრა. ახალ ცხრილში კი მხოლოდ 3 გჭირდებათ. ამიტომაც ერთი td ტეგი წაშალეთ. ჩაასწორეთ უჯრის ტექსტიც. ვფიქრობ დროა ნახოთ რა მივიღეთ. დაიმახსოვრეთ შეტანილი ცვლილებები და დააჭირეთ ბრძანებას Run-launch in chrome. მართლაც ყველაფერი თავის ადგილზეა თქვენ ხედავთ გაზაფხულის თვეების ცხრილს რომელიც მიღებულია კოდში colspan ატრიბუტის გამოყენებით. გაითვალისწინეთ რომ ამ კოდში მწკრივის უჯრების ჩალაგებულია სათაურის უჯრის ტეგის გამოყენებით. თუმცა თუ თქვენ th ტეგს დამოუკიდებლად შეცვლით td ტეგზე, არც არაფერ შეიცვლება უჯრების სტრუქტურაში, (უბრალოდ შიგთავსი არ იქნება გამუქებული.) ახლა დროა განახოთ ვერტიკალური მწკრივების გაერთიანება წინასწარ ნახეთ როგორი ცხრილი უნდა გააკეტოთ: დააკვირდით ცხრილის ჩემს მიერ შექმნილ მაკეტს. ცხრილი უნდა შედგებოდეს ორი სვეტისგან, სადაც პირველ სვეტში წერია წელიწადის დრო, ხოლო მეორე სვეტში ჩამოწერილია თვეები. ცხრილის მაკეტის აგება შეიძლება ვორდის ან რომელიმე გრაფიკული პროგრამის დახმარებით აგრეთვე არსებობენ ე.წ. ვიზუალური რედაქტორები, რომლებიც საშუალებას გაძლევენ გრაფიკული ინსტრუმენტების დახმარებით გააკეთოთ გვერდის დიზაინი და შემდეგ ეს პროგრამები თვითონ მოახდენენ გვერდის HTML კოდში ინტერპრეტაციას. დაიწყეთ ახალი დავალების შესრულება: ამისათვის კოდში გააკეთეთ სათაური h3 ტეგის გამოყენებით უკვე არსებული ცხრილის ასლი ჩასვით ახალი სტრიქონიდან. რათქმაუნდა ამ კოდში უკვე არ გჭირდებათ სვეტების გაერთიანება, ამიტომ th ტეგში colspan ატრიბუტი შეცვალეთ rowspan ატრიბუტით. ეს ატრიბუტი უზრუნველყოფს უჯრის ვერტიკალურ გაერთიანებას. თქვენ გჭირდებათ პირველმა უჯრამ 3 უჯრა გააერთიანოს. ამიტომ rowspan მნიშვნელობა ტოლი იქნება სამის. საბოლოო ტეგი ასე გამოიყურება th rowspan="3". ტეგის შიგნით უკვე წერია სიტყვა გაზაფხული. ამავე მწკრივში კიდევ საჭიროა ერთი სვეტის დამატება სადაც უნდა ჩაიწეროს თვეების დასახელება. კურსორი გადაიყვანეთ th ტეგის გარეთ. გააკეთეთ ახალი სტრიქონი და შემდეგი სტრიქონზე არსებული უჯრის კოდი, რომელიც წარწერა მარტს გამოიტანს, გადაიტანეთ გაზაფხულის უჯრის ტეგის ქვედა სტრიქონზე, როგორც ეს მე გავაკეთე. ამით პირველი მწკრივი დამთავრება. ისევ გადადით შემდეგი მწკრივის პირველ უჯრაში. იქ სადაც წერია აპრილი. მაგრამ მანამდე ჯობია დააკვირდეთ საბოლოო ცხრილის სქემას. აქ ჩანს რომ პირველი უჯრა უკვე არსებობს. პირველი უჯრის არსებობა განპირობებულია rowspan ატრიბუტით. შედეგად tr ტეგი td ტეგში არსებულ უჯრას მეორე სვეტში გამოიტანს წარწერით „აპრილი.“ და ეს ზუსტად ისაა რაც თქვენ გინდათ. მხოლოდ ისღა დაგრჩენიათ კურსორი გადაიყვანოთ td ტეგის გარეთ. დაამატოთ ახალო აბზაცი და აკრიფოთ მწკრივის დახურვის ტეგი /tr. დააკვირდით დავალების ცხრილის მაკეტს. ამჟამად დამთავრებული გაქვთ ორი მწკრივის შექმნა. კიდევ საჭიროა მესამე მწკრივი. მესამე მწკრივის დასამატებლად კურსორი გადაიყვანეთ ახალ აბზაცზე და დაამატეთ ახალი სტრიქონის დამატების ტეგი tr. შემდეგ წერია უკვე უჯრის გამოტანის td ტეგი. ხოლო შემეგ სტრიქონზე უკვე არსებობს თქვენს მიერ დამატებული ახალი სტრიქონის გახსნის ტეგის დამხურავი წყვილი ტეგი. თუ რამე არ გამომრჩა, მთელი ლისტინგიც ეს არის. დაიმახსოვრეთ შეტანილი ცვლილებები და ნახეტ ბრაუზერში რა მოხდება. მართლაც, ეკრანზე ჩანს ორი ცხრილი. პირველი მიღებული colspan ატრიბუტის გამოყენებით. ხოლო მეორე ცხრილი შესრულებულია rowspan ატრიბუტის გამოყენებით ასევე საინტერესოა caption ტეგი, რომელიც უზრუნველყოფს ცხრილის სათაურის შექმნას. ეს ტეგი უნდა გაიხსნას და დაიხუროს table ტეგის შემდეგ სტრიქონზე. ნახეთ მაგალითი შევაჯამოთ ნანახი ვიდეოგაკვეთილი დასკვნა და სურათი უჯრების სვეტების (ჰორიზონტალურად) გასაერთიანებლად გამოიყენეთ ატრიბუტი colspan უჯრების მწკრივების (ვერტიკალურად) გასაერთაინებლად გამოიყენეთ ატრიბუტი rowspan ცხრილის სატაურის გასაკეტებლად გამოიყენება caption ტეგი ერთი მნიშვნელოვანი შენიშვნა რამდენიმე წლის წინ ცხრილებით ვებ გვერდის დიზაინის აწყობა საკმაოდ პოპულარული ხერხი იყო, რასაც მეც ხშირად მივმართავდი. ამ დროისთვის კი ცხრილით საიტის აწყობა მოძველებულ ტექნოლოგიად ითვლება და არ არის რეკომენდებული ..................................... ამით დაგემშვიდობებით გისურვებთ წარმატებას გმადლობთ ყურადრებისთვის!