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

ნაბიჯი 26 - ცხრილების მართვა(დამატებითი ელემენტები).

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

აი ჩართული ცხრილის ერთი უმარტივესი მაგალითი:

აქ მოყვანილია intel-ისა და AMD-ს და სხვა კომპანიის წარმოების ცენტრალური პროცესორების მომხმარებელთა პროცენტული განაწილება. რომელიც მოპოვებულია მსოფლიო აღიარების მქონე ვებ-რესურსებიდან და შესაბამისად უტყუარია.   ესეც გამოკითხვის შედეგები:


intel     65%
AMD     20%
სხვა     15%


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


     
<table style="FONT-FAMILY: times new roman, verdana, geneva, arial, sans-serif; FONT-SIZE: 14px; LINE-HEIGHT: 18px">
<tr>
<td width="200" valign="top" background="step4.gif" align="center">აქ მოყვანილია intel-ისა და AMD-ს და სხვა კომპანიის წარმოების ცენტრალური პროცესორების მომხმარებელთა პროცენტული განაწილება. რომელიც მოპოვებულია მსოფლიო აღიარების მქონე ვებ-რესურსებიდან და შესაბამისად უტყუარია. </td>
<td width="10" background="step5.gif" > </td>
<td width="200" valign="top" background="step4.gif" align="center">ესეც გამოკითხვის შედეგები:<br><br><br>
<table cellspacing="3" style="FONT-FAMILY: times new roman, verdana, geneva, arial, sans-serif; FONT-SIZE: 16px; LINE-HEIGHT: 20px">
<tr>
<td width="50" background="step5.gif">intel</td><td background="step5.gif">     65%</td>
</tr>
<tr><td width="50" background="step5.gif">AMD</td><td background="step5.gif">     20%</td></tr>
<tr><td width="50" background="step5.gif">სხვა</td><td background="step5.gif">     15%</font></td></tr>
</table>
</td>
</tr>
</table>


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

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

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

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

კიდევ ერთი ნიუანსი: ზემოთ მოყვანილ კოდში შეცდომაა, რომელიც სპეციალურად დავუშვი იმისთვის, რომ კოდის დიზაინი ძალიან არ გაფუჭებულიყო. თუ უკვე მოასწარით კოდის გადაკოპირება და ბროუზერში მისი შემოწმება, მაშინ იმასაც ნახავდით, რომ პროცენტული მაჩვენებლები უჯრის არა მარჯვენა, არამედ მარცხენა მხარეს იქნებიან განლაგებული, თუმცაღა მათ შორის საკმარისი რაოდენობის ჰარიებია. რისი ბრალია ეს?

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