III ნაწილი
ცხრილები HTML დოკუმენტში
Web კვანძისათვის შექმნილი HTML დოკუმენტში ხშირად გამოიყენება ცხრილები, რომლის შექმნის ორი მეთოდი არსებობს .
პირველი ხერხი: თქვენ ცხრილის ტექსტს აფორმებთ ფიქსირებული შრიფტის ზომებით, ხოლო ტექსტის თქვენ თვითონ უსწორებთ გვერდებს.
მეორე ხერხი: გთავაზობთ HTML - ის ტეგების საშუალებით ცხრილის აგებას, რათქმა უნდა ამ შემთხვევაში მეორე არის უკეთესი რადგან, პირველს ძალიან ბევრი დრო მიაქვს.
ყოველი ცხრილი იწყება ტეგით <TABLE> და მთავრდება </TABLE>.
მას აქვს რამდენიმე ატრიბუტი:
ALIGN - განსაზღვრავს ცხრილის მდებარეობას დოკუმენტში, მის საზღვრებთან მიმართებაში. მას შეიძლება ჰქონდეს სამი მნიშვნელობა.
LEFT - გასწორება მარცხნივ
CENTER - ცენტრირება
RIGHT - გასწორება მარჯვნივ
JUSTIFY - ტექსტს გაუსწორებს ორივე, მარჯვენა და მარცხენა საზღვარს.
BACKGROUND - ეს ატრიბუტი გამოიყენება ცხრილის ფონად რაიმე სურათის
ჩასასმელად.
BGCOLOR - ეს ატრიბუტი გამოიყენება ცხრილის ფონის რაიმე ფერით შესავსებად.
BORDER - განსაზღვრავს ცხრილის ჩარჩოების სისქეს. მიეთითება პიქსელებში. თუ
მითითებული არაა, ცხრილი გამოდის ჩარჩოების გარეშე;
BORDERCOLOR - ჩარჩოს ფერი. ეს ატრიბუტი გამოიყენება border ატრიბუტის პარამეტრთან ერთად.
BORDERCOLOR DARK - მუქი ფერი, რომელიც აუცილებელია ჩარჩოს სამი განზომილების გამოსაკვეთად.
BORDERCOLOR LIGHT - ღია ფერი, რომელი ასევე აუცილებელია ჩარჩოს სამი განზომილების დასაფიქსირებლად.
CELLPADDING - თითოეული უჯრის შიგნით ველები, ანუ უჯრაში მოთავსებული ტექსტის ან სურათის დაშორება უჯრის საზღვრიდან.
CELLSPACING - უჯრებს შორის მანძილი.
CLEAR - ტექსტის ფორმატირება, რომელიც მოთავსებულია HTML დოკუმენტში ცხრილის შემდეგ. მას შეიძლება ჰქონდეს სამი მნიშვნელობა.
NO - ტექსტი თავსდება ცხრილის ქვემოთ.
LEFT - ტექსტი თავსდება პირველვე ხაზზე ცხრილის შემდეგ, მარცხენა მხარეს.
RIGHT - ტექსტი თავსდება პირველვე ხაზზე ცხრილის შემდეგ, მაგრამ მარცხენა მხარეს.
COLS - სვეტების რაოდენობა.
FRAME - განსაზღვრავს ჩარჩოს გარე ხედს, განთავსებულს ცხრილის გარშმო, შესაძლებელია შემდეგი მნიშვნელობები:
BORDER - გამოჩნდება მთლიანი გარე ჩარჩო.
VOID - ჩარჩო არ აისახება
ABOVE - აისახება მხოლოდ ზედა ხაზი.
BELOW - აისახება მხოლოდ ქვემო ხაზი .
LHS - აისახება მხოლოდ მარცხენა ხაზი
RHS - გამოჩნდება მხოლოდ მარჯვენა ხაზი.
VSIDES - ჩარჩო ორივე მარჯვენა და მატრცხენა მხრიდან შემოისაზღვრება.
NOWRAP - გრაფის შიგთავსი გამოდის ერთ სტრიქონზე;
WIDTH - ცხრილის სიგანე პიქსელებში.
HEIGHT - ცხრილის სიმაღლე პიქსელებში.
ცხრილის ყოველი სტრიქონი იწყება ტეგით <TR> და მთავრდება </TR>.
<TR> ატრიბუტებია:
ALIGN - ტექსტის გასწორება სტრიქონის გრაფაში; მას გააჩნია მნიშვნელობები RIGHT, CENTER, LEFT.
VALIGN - ტექსტის გასწორება სტრიქონის გრაფაში ვერტიკალურად.აქვს შემდეგი მნიშვნელობები TOP, MIDDLE, BOTTOM
ცხრილის ყოველი უჯრა იწყება ტეგით <TD> და მთავრდება ტეგით</TD>, მისი ატრიბუტებია:
NOWRAP - გრაფის შიგთავსი გამოდის ერთ სტრიქონზე;
COLSPAN - გრაფაში გააერთიანებს მითითებული რაოდენობის სვეტებს; მაგ: COLSPAN="4";
ROWSPAN - გრაფაში გააერთიანებს მითითებული რაოდენობის სტრიქონებს; მაგ: ROWSPAN="5";
ALIGN - ტექსტის გასწორება გრაფაში. აქვს შემდეგი მნიშვნელობები RIGHT, CENTER, LEFT;
VALIGN - ტექსტის გასწორება გრაფაში ვერტიკალურად. აქვს შემდეგი მნიშვნელობები TOP, MIDDLE, BOTTOM;
WIDTH - გრაფის სიგანე პიქსელებში.
HEIGHT - გრაფის სიმაღლე პიქსელებში.
თუ გრაფა ცარიელია, მის ირგვლივ ჩარჩო არ იხატება. თუ გრაფა ცარიელია და ჩარჩო მაინც გვჭირდება, საჭიროა მასში შევიყვანოთ სიმბოლური ობიექტი  . უნდა აღინიშნოს, რომ ცხრილის ნებისმიერი გრაფა შეეძლება შეიცავდეს ცალკე სხვა ცხრილს.
ცხრილს შეიძლება ჰქონდეს სათაური, რომელიც ჩაიწერება <CAPTION> და </CAPTION> ტეგებს შორის. იგი შეიცავს ატრიბუტს ALIGN, რომელიც იღებს ორ მნიშვნელობას:
<CAPTION> ALIGN=TOP (სათაური განთავსდება ცხრილის ზევით) </CAPTION> <CAPTION> ALIGN=BOTTOM (სათაური განთავსდება ცხრილის ქვევით) </CAPTION>.
მაგალითი:
<html>
<head>
<title>tables</title>
</head>
<body bgcolor="#FFFFFF">
<table>
<tr><td>000</td><td>001</td><td>002</td></tr>
<tr><td>010</td><td>011</td><td>012</td></tr>
<tr><td>100</td><td>101</td><td>102</td></tr>
</table>
<table align="justify" border="2" width="60%">
<tr><td>000</td><td>001</td><td>002</td></tr>
<tr><td>010</td><td>011</td><td>012</td></tr>
<tr><td>100</td><td>101</td><td>102</td></tr>
</table>
</html>
მაგალითი 2:
<table width=100%>
<caption align="bottom>table one</caption>
<tr><td>000</td><td>001</td><td>002</td></tr>
<tr><td>010</td><td>011</td><td>012</td></tr>
<tr><td>100</td><td>101</td><td>102</td></tr>
</table>
ძირითადად ცხრილებში სათაურის მითითება <th>...</th>ტეგების საშუალებით ხდება, იგი <td>...</td> ტეგის ანალოგიურია.
მაგალითი3:
<html>
<head>
<title>tables</title>
</head>
<body bgcolor="#FFFFFF">
<table border>
<tr><th>I colomn</th><th>II colomn</th><th>III colomn</th>
<tr><td>000</td><td>001</td><td>002</td></tr>
<tr><td>010</td><td>011</td><td>012</td></tr>
<tr><td>100</td><td>101</td><td>102</td></tr>
</table>
</body>
</html>
მაგალითი4:
<html>
<head>
<title>tables<title>
<body bgcolor=#FFFFFF>
<table border width=100%>
<caption valign=top align=right>table with doble heading</caption>
<tr><th colspan=3>heading for whole table</th></tr>
<tr><th colspan=2>colomn 1 and 2</th><th>colomn3</th></tr>
<tr><td>000</td><td>001</td><td>002</td></tr>
<tr><td>010</td><td>011</td><td>012</td></tr>
<tr><td>100</td><td>101</td><td>102</td></tr>
</table>
</body>
</html>