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

ნაბიჯი 27 - ცხრილების მართვა(ჩარჩოები).

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

ჩარჩოს ატრიბუტი უკვე ნაცნობი "border" გახლავთ და ტეგ <table>-ში თავსდება. მისი მნიშვნელობა კი ჩარჩოს სიგანეს განსაზღვრავს. ქვემოთ მოცემულ ცხრილში border="3" :

ჩარჩოიანი ცხრილი

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

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

ჩარჩოიანი ცხრილი

შეამჩნევდით, რომ ჩარჩოს ორი ხაზი აქვს. თუ ესეც ხელს გვიშლის, მაშინ შეიძლება ერთი ხერხი გამოვიყენოთ:

ვქმნით ერთუჯრიან ცხრილს, cellpadding-ს და bgcolor-ს ვანიჭებთ იმ მნიშვნელობებს, რასაც border-ს და bordercolor-ს მიანიჭებდით, შემდეგ კი ამ ცხრილში ვაკეთებთ ჩართულ ცხრილს ჩარჩოს გარეშე.

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

ჩართული ცხრილით
ჩარჩოიანი ცხრილი

და შესაბამისი კოდები:

     
<table border="0" cellspacing="0" cellpadding="3" bgcolor="#000000">
<tr>
<td>
<table width="100" border="0" bgcolor="#FFFFFF">
<tr>
<td height="30" valign="middle" align="center">ჩართული ცხრილით</td>
</tr>
</table>
</td>
</tr>
</table>


     
<table border="3" bordercolor="#000000">
<tr>
<td width="100" height="30" valign="middle" align="center">ჩარჩოიანი ცხრილი</td>
</tr>
</table>

რაღა თქმა უნდა, პირველი ხერხი უფრო რთულია, მაგრამ მას არცთუ ისე მწირი შესაძლებლობები აქვს. შეიძლება მთავარ ცხრილს ფონის ფერის მაგივრად სურათი მიეთითოს და ასე თქვენ ნებისმიერი სახის ჩარჩოს მიიღებთ. დამეთანხმებით, გამოსადეგი ფუნქციაა.

თუმცა მთავარი სირთულე ჩარჩოს შექმნა კი არა, მისი ყველა ბროუზერში სწორად ჩვენებაა. აი ერთი მაგალითი:


ცხრილები IE-ში
 
ცხრილები NN-ში
 


სწორედ ამიტომ გამოცდილი კოდერები ყოველთვის ცდილობენ თავისი საიტი ბევრ ბროუზერში დატესტონ. ამას შეცდომის და არასასურველი დიზაინის გაჩენის შანსი მინიმუმამდე დაყავს.

ასევე გასათვალისწინებელია, რომ ვინმე თქვენს საიტს 800x600 გაფართოების მქონე ეკრანზე შეიძლება უყურებდეს. ასე რომ, თუ საიტის კონტენტი მათთვისაცაა გათვლილი(ეს აუცილებელი არაა :) ), აუცილებლად დატესტეთ ის ამ გაფართოებაშიც.

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