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

მოგესალმებით! HTML-ში ცხრილი წარმოდგენილია ერთგვარი მწკრივის სახით, სადაც ჩალაგებულია უჯრები. ვებ გვერდზე ცხრილის გამოსატანად გამოიყენება ტეგი table, რომელშიც ჩალაგებულია მწკრივები tr ტეგის დახმარებით. თითოეული უჯრის მონიშვნა ხდება td ტეგის დახმარებით. (Table – ქართულად ცხრილს ნიშნავს. Tr — ანუ table row ცხრილის მწკრივია. Td — table data კი ცხრილის მონაცემები.) ასევე გამოიყენება th — table heading ითარგმნება როგორც ცხრილის სათაური. იმისთვის, რომ გაიაზროთ რისი გაკეთება მინდა, ნახეთ საბოლოო პროდუქტი: უნდა შევქმნათ ვებ გვერდის კოდი, რომლის შესრულების შემდეგ ბრაუზერი გამოიტანს წელიწადის დროების და შესაბამისი თვეების დასახელების ცხრილს ..... მაშ ასე მე უკვე გახსნილი მაქვს Notepad++, სადაც თქვენ ხედავთ ბოლო ნამუშევარ დოკუმენტს. File-Save as ბრძანებით ეს ფაილი შეინახეთ მეოთხე გაკვეთილის საქაღალდეში. ფაილის სახელად table დაარქვით. ამიერიდან მე ცალკე ინსტრუქციას არ მოგაწვდით სორს კოდის ფაილის შენახვასთან დაკავშირებით. გთხოვთ ფაილები დამოუკიდებლად შეინახოთ ცალ-ცალკე ფაილებში გაკვეთილის შესაბამის საქაღალდეებში ............ შეცვალეთ კომენტარისა და სათაურის ტეგის შიგთავსი. ასევე გააკეთეთ გვერდის სათაური h3 ტეგის გამოყენებით. გაკვეთილების ცხრილი. Body ტეგის დახურვამდე არსებული ყველა ჩანაწერი წაშალეთ. ალბათ ამჩნევთ, რომ მე ყველა გაკვეთილში დაჟინებით მოვითხოვ კომენატრის და სათაურის ცვლილებას. მინდა მიგაჩვიოთ ამ პროცესს, რადგანაც ეს საკმაოდ მნიშვნელოვანია. გირჩევთ არ დაგეზაროთ კომენტარების დამატება, განსაკუთრებით მაშინ როცა კოდის სტრიქონების რაოდენობა დიდია. და კიდევ ერთი რჩევა. კოდის წერას ყოველთვის ვიწყებთ არსებული კოდის გადაკეთებით. body ტეგების შიგნით h3 სათაურის შემდეგ აკრიფეთ გამხსნელი და დამხურავი table ტეგი. ეს ტეგი აღნიშნავს ცხრილის დასაწყისს და დასასრულს. კურსორი გადაიყვანეთ ტეგის შიგნით. დააჭირეთ Enter კლავიშას. /table დამხურავი ტეგი ჩამოწიეთ ერთი აბზაცით ქვევით. მნიშვნელოვანია: ნაგულისხმევ ვარიანტში HTML-ში ცხრილის აგება ხდება ხაზების გარეშე. ამიტომ გირჩევთ CSS სტილის დახმარებით head ელემენტში დაამატოთ შემდეგი კოდი style table, th, td { border: 1px solid black; } /style ამ კოდის დანიშნულების გაგება ძნელი არ უნდა იყოს: ის უზრუნველყოფს table, th, td ტეგებისთვის 1 პიქსელი (1px) უწყვეტი (solid) შავი (black) ხაზის (border) გავლებას ცხრილის, სათაურის და ჩვეულებრივი უჯრების ირგვლივ. CSS სტილებს და ცხრილის სხვა ატრიბუტებს ცალკე ვიდეოგაკვეთილში ნახავთ table ტეგის შიგნით აკრიფეთ გამხსნელი და დამხურავი tr ტეგი. ეს ტეგი აღნიშნავს ახალი მწკრივის დასაწყისს და დასასრულს. კურსორი გადაიყვანეთ ტეგის შიგნით. დააჭირეთ Enter კლავიშას. /tr დამხურავი ტეგი ჩამოწიეთ ერთი აბზაცით ქვევით. HTML ცხრილებში არსებობს საშუალება ცხრილს ჰქონდეს ე.წ. სათაურის მწკრივი. ჩვეულებრივ ცხრილებში ამ მწკრივს სვეტების სათაურებისთვის იყენებენ ხოლმე. სათაურის უჯრების მოსანიშნად აკრიფეთ გამხსნელი და დამხურავი th ტეგი. ამ ტეგებს შორის განთავსებულ უჯრებში ტექსტი იქნება გამუქებული. ასევე CSS სტილების დამხმარებით შესაძლებელია ასეთი უჯრებისთვის განსხვავებული ატრიბუტების მინიჭება, ვთქვათ შრიფტის ფერი, ფონის ფერი და ა.შ. დააკვირდით საბოლოო ცხრილს. ადვილი დასათვლელია, რომ პირველ მწკრივში სულ 4 უჯრაა საჭირო. ამ უჯრების დასამატებლად მონიშნეთ xx ხაზზე არსებული ელემენტი th . გააკეთეთ ასლი, გადადით ახალ სტრიქონზე და 3-ჯერ დაამატეთ დამახსოვრებული კოდი. კოდში შემდეგი ცვლილებების შეტანამდე მინდა დავრწმუნდე რომ ყველაფერი უშეცდომოდ გააკეთეთ. გირჩევთ მთლიანი სამუშაოს პატარა ეტაპის დასრულების შემდეგ ყოველთვის დარწმუნდეთ კოდის სისწორეში. დაიმახსოვრეთ შეტანილი ცვლილებები და დააჭირეთ Run-Lanch in chrome. რაიმე შეცდომის არმოჩენის შემთხვევაში დააკვირდით კოდის შესაბამის ლისტინგს და შეიტანეთ ცვლილებები. კვლავ შეამოწმეთ შეტანილი ცვლილებების სისწორე. თქვენს ეკრანზე უნდა გამოჩნდეს ცხრილის მწკრივი, რომელშიც ჩალაგებულია 4 უჯრა. სასურველია ახლავე დავამატოთ უჯრების შიგთავსი, პირველი ტეგის შიგნით აკრიფეთ გაზაფხული, მეორე ტეგის შიგნით — ზაფხული. მესამე ტეგის შიგნით — შემოდგომა და მეოთხე ტეგის შიგნით — ზამთარი. კვლავ გადაამოწმეთ შეტანილი ცვლილებები. დაუბრუნდით კოდს და კურსორი გადაიყვანეთ ახალ აბზაცზე. აკრიფეთ ცხრილის ახალი სტრიქონის გამხსნელი და დამხურავი ტეგი tr. კურსორი გადაიყვანეთ ტეგის შიგნით. ტეგი შეწიეთ მარჯვნივ 2 სიმბოლოზე. აკრიფეთ გამხსნელი და დამხურავი ტეგი td. ეს ტეგი გამოიყენება ცხრილში ახალი უჯრების დასამატებლად. ამ ტეგის შიგნით აკრეფილი ტექსტი გაფორმებული იქნება ჩვეულებრივი ტექსტით. დაიმახსოვრეთ, რომ td ელემენტი არის მონაცემთა კონტეინერი. ის შეიძლება შეიცავდეს HTML დოკუმენტის ყველა ტიპის ელემენტს: ტექსტს, სურათს, სიას, სხვა ცხრილს და ა.შ. მონიშნეთ უჯრის ელემენტი. გააკეთეთ ასლი. დააჭირე Enter. დაითვალეთ რომ კიდევ გჭირდებათ 3 უჯრის დამატება. ამიტომ ცალ-ცაკლე სტრიქონზე 3-ჯერ ჩასვით დამახსოვრებული კოდი. სასურველია არ დაიზაროთ და კვლავ შეამოწმოთ შეტანილი ცვლილებების სისწორე. ახლა კვლავ დააკვირდით საბოლო ცხრილს. კიდევ ზუსტად ასეთი ორი მწკრივი გჭირდებათ. ამიტომ ხვდებით ალბათ, რომ უმჯობესი იქნება თუ გააკეთებთ მთელი tr ელემენტის ასლს ოთხივე უჯრასთან ერთად. ხოლო შემდეგ ახალ სტრიქონზე ჩასვამთ 2 ჯერ. დაიმახსოვრეთ შეტანილი ცვლილებები და კვლავ შეამოწმეთ კოდის სისწორე ბრაუზერში. თუ ყველაფერი სწორად არის, ისღა დაგვრჩენია td ტეგებს შორის ჩავწეროთ თვეების დასახელებები. გაითვალისიწინეთ, რომ tr ტეგებით მწკრივია მონიშნული. ამიტომ ამ ტეგებში ტექსტიც მწკრივების შესაბამისად განლაგდება. ანუ წელიწადის ერთი დროის შესაბამისი თვეები სხვადასხვა სტრიქონის ტეგში იქნება განთავსებული. იმედია ეს არ დაგაბნევთ. ტექსტი აკლია საბოლოოდ მე ასეთი ლისტინგი მივიღე. შეადარეთ თქვენს ნამუშევარს. დაიმახსოვრეთ და შეამოწმეთ მართლაც ყველაფერი თავის ადგილზეა თქვენ ხედავთ წელიწადის დროების ცხრილს რომელიც მიღებულია კოდში table ტეგის გამოყენებით. ცხრილი 4 სვეტის და 4 მწკრივისგან შედგება. ცხრილის პირველი მწკრივი შექმნილია tr ტეგში ჩასმული th გამოყენებით. ამიტომაც ტექსტი სხვა უჯრების ტექსტისგან განსხვავებით მუქია. შემდეგ სამ მწკრივში ჩამოთვლილია შესაბამის თვეები. ამ უჯრების ასაგებად კოდში გამოყენებულია td ტეგი. დასკვნა და სურათი ცხრილის გასაკეთებლად გამოიყენეთ ტეგი table ახალი სტრიქონის დასამატებლად გამოიყენეთ tr ტეგი ცხრილში სათაურის სტრიქონის დასამატებლად გამოიყენეთ th ტეგი ხოლო სტრიქონში უჯრის დასამატებლად გამოიყენეთ td ტეგი ..................................... ასევე თქვენთვის შეიძლება საინტერესო იყოს ვიდეოგაკვეთილი ცხრილის ატრიბუტების შესახებ, რომელიც განთავსებულია ამავე ვებგვრდზე. ამით დაგემშვიდობებით გისურვებთ წარმატებას გმადლობთ ყურადღებისთვის!