ბლოგი

განვაგრძოთ საუბარი ცხრილებზე და განვიხილოთ

ცხრილის შემცველობის ვერტიკალური პოზიციონირება.

ვერტიკალური პოზიციონირება კეთდება ატრიბიუტ valign=”middle” (top, bottom) მეშვეობით- კონკრეტული უჯრის შემცველობა, განთავსებული იქნება, უჯრის შუალედში, (ზევით თუ ქვევით).

სურათზე მოცემულია მაგალითი, მოდით განვიხილოთ თუ როგორ კეთდება ყველსფერი ეს:

<table>
<tr>
<td height=”35″ width=”50″ bgcolor=”#FFCC33″ valign=”top”> <center>1×1</center> </td>
<td width=”50″ bgcolor=”#336699″> <center>1×2</center> </td>
<td width=”50″ bgcolor=”#FFCC33″ valign=”bottom”> <center>1×3</center> </td>
</tr>
<tr>
<td height=”35″ width=”50″ bgcolor=”#336699″ valign=”bottom”> <center>2×1</center> </td>
<td width=”50″ bgcolor=”#FFCC33″> <center>2×2</center> </td>
<td width=”50″ bgcolor=”#336699″ valign=”top”> <center>2×3</center> </td>
</tr>
</table>

ეხლა ვისაუბროთ ისეთ ატრიბუტებზე როგორიცაა  colspan და rowspan. უფრო გასაგები რომ იყოს მოდით მივმართოთ მაგალითს:

ჩვენი მიზანია გავზარდოთ უჯრა 1х1 ორ სვეტზე. ამისათვის ჩვენ ვიყენებთ ატრიბუტ  colspan=”2″, კოდი იქნება შემდეგნაირი:

<table>
<tr>
<td height=”35″ bgcolor=”#FFCC33″ colspan=”2″> <center>1×1</center> </td>
<td width=”50″ bgcolor=”#336699″> <center>1×2</center> </td>
</tr>
<tr>
<td height=”35″ width=”50″ bgcolor=”#336699″> <center>2×1</center> </td>
<td width=”50″ bgcolor=”#FFCC33″> <center>2×2</center> </td>
<td width=”50″ bgcolor=”#336699″> <center>2×3</center> </td>
</tr>
</table>

რაც შეეხება პარამეტრს rowspan მოქმედების პრინციპი იგივეა რაც colspan -ისათვის.

<table>
<tr>
<td height=”35″ bgcolor=”#FFCC33″> <center>1×1</center> </td>
<td width=”50″ bgcolor=”#336699″> <center>1×2</center> </td>
<td width=”50″ bgcolor=”#336699″ rowspan=”2″> <center>1×3</center> </td>
</tr>
<tr>
<td height=”35″ width=”50″ bgcolor=”#336699″> <center>2×1</center> </td>
<td width=”50″ bgcolor=”#FFCC33″> <center>2×2</center> </td>
</tr>
</table>

<table>
<tr>
<td height=”35″ bgcolor=”#FFCC33″ colspan=”2″> <center>1×1</center> </td>
<td width=”50″ bgcolor=”#336699″ rowspan=”2″> <center>1×2</center> </td>
</tr>
<tr>
<td height=”35″ width=”50″ bgcolor=”#336699″> <center>2×1</center> </td>
<td width=”50″ bgcolor=”#FFCC33″> <center>2×2</center> </td>
</tr>
</table>

რისის გაკეთება შეიძლება კიდევ? შეიძლება მანძილის გაუქმება უჯრედებს შორის, კეთდება ეს ატრიბუტ cellspacing -ის მეშვეობით, მისი მნიშვნელობა უნდა იყოს ნულის ტოლი.

<table cellspacing=”0″>
<tr>
<td height=”35″ bgcolor=”#FFCC33″ colspan=”2″> <center>1×1</center> </td>
<td width=”50″ bgcolor=”#336699″ rowspan=”2″> <center>1×2</center> </td>
</tr>
<tr>
<td height=”35″ width=”50″ bgcolor=”#336699″> <center>2×1</center> </td>
<td width=”50″ bgcolor=”#FFCC33″> <center>2×2</center> </td>
</tr>
</table>

შეიძლება პირიქით გავზარდოთ მანძილი უჯრედებს შორის, დავუშვათ cellspacing=”5″, მაშინ მივიღებთ :

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

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