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

ნაბიჯი 22 - ვქმნით ცხრილებს - გაგრძელება.

წინა ნაბიჯში ჩვენ ასეთი ცხრილის შექმნა ვცადეთ:



და ასეთი ცხრილი გამოგვივიდა:

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


მგონი ზომაში განსხვავება საგრძნობია :) რა ვქნათ ამის თავიდან ასაცილებლად?

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


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


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

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

მაგრამ არსებობს შემთხვევებიც, როცა სიმაღლისა და სიგანის მითითება პროცენტებში ჯობს. დავუშვათ, დაგჭირდათ, რომ სტრიქონში ერთი უჯრა მეორეს 75% იყოს. პროცენტული შეფარდების ანგარიშის ნაცვლად სასურველი უჯრის სიგანეს მნიშვნელობად მშვიდად უწერთ 75%-ს, HTML კი თავად ანგარიშობს, რომ ერთ უჯრას თუ მთელი სტრიქონის 75% აქვს დაკავებული, მეორეს 25% დარჩება და შესაბამისადაც იქცევა.

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



მაგრამ ტექსტის(ამ შემთხვევაში ციფრების) უჯრების შუაში გამოსახვაა საჭირო:


     
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>


ტექსტი ნაცნობი <center> ტეგის მეშვეობით უჯრის შუაში დავსვით და სასურველი შედეგიც მიღებულია:



თქვენ <center> ტეგის დანიშნულების მქონე ატრიბუტიც უნდა გახსოვდეთ. მას align ჰქვია და <td> ტეგთანაც გამოიყენება:

<td align="center">2x2</td>

ასევე გვახსოვს, რომ align-ს კიდევ სამი მნიშვნელობა აქვს, მაგრამ <td> ტეგთან მხოლოდ ორი - left და right გამოიყენება. სამწუხაროდ, justify-ს გამოყენება არ შეგვიძლია.

ნებისმიერ უჯრაში შეიძლება იყოს სურათები, ღილაკები, ბმულები და ტექსტი, რაღა თქმა უნდა. მოკლედ, სრული კომპლექტი.