10@- ცხრილები

Online- კურსები - HTML

გაკვეთილი 10. ცხრილები

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

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

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

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

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

<TABLE ALIGN = "Center" border = "1" CELLPADDING = "0">
<TR>
<TD> პირველი უჯრა </ TD>
<TD> მეორე უჯრა </ TD>
</ TR>
<TR>
<TD> მესამე უჯრა </ TD>
<TD> მეოთხე უჯრა </ TD>
</ TR>
</ Table>

ეს ყველაფერი ბრაუზერში ასე გამოიყურება:

პირველი უჯრა	მეორე უჯრა
მესამე უჯრა	მეოთხე უჯრა

კოდში ჩვენ ვხედავთ ჩვენთვის ახალ ტეგებს <table>, <TR> და <TD>.

როგორც მიხვდით ტეგი <table> - ეს არის ცხრილის გამხსნელი და დამკეტი ტეგი. შემდეგ:
<TR> - "table row - ცხრილის რიგი", იწყებს და ასრულებს უჯრების ჰორიზონტალურ რიგს.
<TD> - შემოკლებით "Data table -სგან - ცხრილის მონაცემები". ეს ტეგი იწყებს და ამთავრებს ცხრილის რიგის ყოველ უჯრას.

ნებისმიერ ცხრილში: რიგი - ეს არის უჯრების ჰორიზონტალური სტრიქონი, სვეტი კი - უჯრების ვერტიკალური რიგი:

პირველი უჯრა	მეორე უჯრა
მესამე უჯრა	მეოთხე უჯრა

პირველი უჯრა და მეორე უჯრა ქმნიან რიგს. პირველი უჯრა და მესამე უჯრა ქმნიან სვეტს.

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

მაგალითი  number 2:

<TABLE ALIGN = "Center" border = "1" CELLPADDING = "0">
<TR>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> <strong> ცხოველი </ STRONG> </ P> </ TD>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> <strong> ფრინველი </ STRONG> </ P> </ TD>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> <strong> ადამიანი </ STRONG> </ P> </ TD>
</ TR>
<TR>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> ძაღლი </ P> </ TD>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> მტრედი </ P> </ TD>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> კაცი </ P> </ TD>
</ TR>
<TR>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> კატა </ P> </ TD>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> არწივი </ P> </ TD>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> ქალი </ P> </ TD>
</ TR>
<TR>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> მელია </ P> </ TD>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> ქორი </ P> </ TD>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> ბავშვი </ P> </ TD>
</ TR>
<TR>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> ლომი </ P> </ TD>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> ყანჩა </ P> </ TD>
<TD width = "213" VALIGN = "top"> <P ALIGN = "Center"> ექიმი </ P> </ TD>
</ TR>
</ Table>

ეს ყველაფერი ბრაუზერში ასე გამოიყურება:

ცხოველი	ფრინველი	ადამიანი
ძაღლი	მტრედი	კაცი
კატა	არწივი	ქალი
მელია	ქორი	ბავშვი
Eggplant	ყანჩა	ექიმი

ცხრილს გააჩნია ბევრი ატრიბუტები.

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

მაგალითი № 3:

ვქმნით ცხრილს ჩარჩოს სისქით 1 პიქსელი:

<Table border = "1">
<TR>
<TD> Cell 1 </ TD>
<TD> Cell 2 </ TD>
</ TR>
<TR>
<TD> Cell 3 </ TD>
<TD> Cell 4 </ TD>
</ TR>
</ Table>

ბრაუზერი ამას ასე აჩვენებს:

უჯრა 1	უჯრა 2
უჯრა 3	უჯრა 4

იგივე ცხრილი ჩარჩოს სისქით - 0:

<Table border = "0">
<TR>
<TD> უჯრა 1 </ TD>
<TD> უჯრა 2 </ TD>
</ TR>
<TR>
<TD> უჯრა 3 </ TD>
<TD> უჯრა 4 </ TD>
</ TR>
</ Table>

ბრაუზერში:

უჯრა 1	უჯრა 2
უჯრა 3	უჯრა 4

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

<Table border = "1" width = "30%">

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

ატრიბუტი "align": ჰორიზონტალურად ათანაბრებს ცხრილის მთელ შიგთავსს, რიგში ან ცალკეულ უჯრაში. ამ ატრიბუტის მნიშვნელობები შესაძლებელია რომ იყოს: Left, Center ან right.

ატრიბუტი "VALIGN": უჯრის შიგთავსს ათანაბრებს ვერტიკალურად. მისი მნიშვნელობები შეიძლება იყოს: upper, middle, lower ან.

<TD ALIGN = "right" VALIGN = "top"> უჯრა 1 </ TD>

რა შეიძლება ჩავსვათ ცხრილში?

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

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

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

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