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

ნაბიჯი 24 - უჯრების მართვა (rowspan, colspan).

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

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



ამ ატრიბუტების გამოყენებით კი ეს ადვილი საქმე იქნება:

ზემოთ მოყვანილ ცხრილში პირველი უჯრა ჰორიზონტალურად ორი უჯრის ადგილს იკავებს, ე.ი. მის ტეგში "colspan="2" კოდის ჩამატება დაგვჭირდება:


     
<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <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>
<td width="50" bgcolor="#336699"> <center>2x3</center> </td>
</tr>
</table>


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



გავაკეთოთ იგივე rowspan-ით:

     
<table>
<tr>
<td height="35" bgcolor="#FFCC33"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <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>
</tr>
</table>


შედეგიც შესაბამისია:



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