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

ნაბიჯი 25 - უჯრების მართვა (cellspacing და cellpadding).

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



ახლა კი შევეცადოთ მისგან ასეთი მივიღოთ:



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

ატრიბუტი cellspacing აუცილებლად <table> ტეგში თავსდება და უჯრებს შორის დაშორების კოეფიციენტს ინახავს. default მნიშვნელობა 2-ს უდრის, მაგრამ ჩვენ ამ სიცარიელის გაქრობა გვინდა, ასე რომ, cellspacing="0":


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


შეიძლება პირიქით გავზარდოთ დაშორება, მაგალითად 5-მდე და ასეთ შედეგს მივიღებთ:



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

ის უჯრაში ტექსტის განლაგების კიდევ ერთი სამართავი ატრიბუტია და ტექსტის უჯრის კედლებიდან დაშორების კოეფიციენტს განსაზღვრავს, მაგრამ ერთი თავისებურებით: შედეგის მისაღებად თვითონ უჯრას ადიდებს ან აპატარავებს, ტექსტს კი ხელუხლებელს ტოვებს. მისი default მნიშვნელობა 1-ის ტოლია.

ჩვენი მაგალითი ახლანდელი სახით არ გამოგვადგება, რადგანაც ტექსტი უჯრის შუაშია მოქცეული და ატრიბუტის მოქმედება არ გამოჩნდება, ამიტომ მივწიოთ ტექსტი კუთხეებისკენ valign-ის გამოყენებით:



ახლა კი კოდში ჩავამატოთ cellpadding="5":


     
<table cellpadding="5">
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2" valign="top"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>2x2</center> </td>
</tr>
</table>


და აი შედეგიც:



განსხვავება აშკარაა - ტექსტი უჯრის კედლებს დაცილდა, უფროსწორად უჯრის კედლები დაცილდა ტექსტს :)

თუ გვინდა, რომ ტექსტი უჯრის კედლებს საერთოდ აღარ დაშორდეს, წინა კოდის მნიშვნელობა 0-ით შევცვალოთ, მაგრამ რას მივიღებთ, ეგ უკვე თქვენ გაარკვიეთ.