მთავარი / HTML / პირველი ნაბიჯები - ცხრილები  

ნაბიჯი 21 - ვქმნით ცხრილებს

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

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

ცხრილები <table></table> ტეგით გამოისახება, მაგრამ ცხრილს უჯრებიც გააჩნია? HTML-მა არც ის დაჩაგრა და საკუთარი ტეგი გამოუყო, მაგრამ გამოსახვის ერთი თავისებურებით: ჯერ ვუთითებთ, რომ გვაქვს სტრიქონი, შემდეგ კი ვუთითებთ ამ სტრიქონში არსებულ უჯრებს.

სტრიქონის ტეგს <tr> ჰქვია, უჯრისას კი <td>.

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

     
<table>
<tr>
<td> კონტენტი </td>
</tr>
</table>


ჯერ დაიწერა ტეგი <table>, რაც ცხრილის დასაწყისს ნიშნავს, შემდეგ "გავხსენით" ახალი სტრიქონი ტეგ <tr>-ს გამოყენებით და სიტყვა "კონტენტი" მოვაქციეთ უჯრის ტეგში. შემდეგ დავხურეთ გახსნილი ტეგები და ერთუჯრიანი ცხრილი მზადაა! თუმცა მას სრულყოფილებამდე ჯერ კიდევ ბევრი აკლია. ამ თავში სწორედ ამ ნაკლის გამოსწორებას შევეცდებით.



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


     
<table>
<tr></tr>
<tr></tr>
</table>


ეს კოდი ორ სტრიქონს ქმნის. ჩვენ ორი სტრიქონი, სამი სვეტი და მათი გაფორმება გვინდა. ასე რომ, მივიწევთ წინ.


     
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>


ამ კოდმა თითოეულ სტრიქონში სამი სვეტი ჩაამატა. წინსვლა იგრძნობა :)

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

შევავსოთ მიღებული კარკასი:


     
<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>


ალბათ მიხვდით, რომ ტეგ <td>-ებს შორის ჩაწერილი ციფრები ცხრილის შესაბამის უჯრაში ჩაიწერება და თანაც სტრიქონისა და სვეტის ნომრებსაც აღნიშნავს:

1x1
1x2
1x3
2x1
2x2
2x3

ჩვენს შედეგს ზემოთ მოყვანილი მაგალითისგან ფერიღა განასხავებს. მოვაშოროთ განსხვავება ატრიბუტ bgcolor-ის მეშვეობით. ეს სწორედ ის ატრიბუტია, <body> ტეგში გვერდის ძირითადი ფერის მისათითებლად რომ ვიყენებდით, მაგრამ ახლა სხვა გამოყენებაც მოეძებნა:


     
<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>


და აი რა მივიღეთ:

1x1 1x2 1x3
2x1 2x2 2x3


თუ თქვენ ძირითადი ფონის ფერის მითითება სტრიქონისთვის დაგჭირდა, მაშინ bgcolor ტეგ <tr>-ს მიუწერეთ:

<tr bgcolor="#FFCC33">

თუ ძირითადი ფონის ფერის მითითება მთელი ცხრილისთვის მოგინდათ, მაშინ bgcolor ტეგ <table>-ს მიუწერეთ:

<table bgcolor="#FFCC33">

ზუსტად იგივენაირად შეიძლება ფონად სურათი მივუთითოთ, ოღონდ ატრიბუტად background, მნიშვნელობად კი სურათის მისამართი უნდა მივუთითოთ.

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

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