html გაკვეთილი მეთოთხმეტე
განვაგრძოთ საუბარი ცხრილებზე და განვიხილოთ
ცხრილის შემცველობის ვერტიკალური პოზიციონირება.
ვერტიკალური პოზიციონირება კეთდება ატრიბიუტ 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>
2 კომენტ. “html გაკვეთილი მეთოთხმეტე”
es kvelaferi dzalian kargi, magramkargi iqneba tu gvascavlit shveni ackobili saiti internetshi rogor ganvatavsot:)
გამარჯობათ მარი!
პერსპექტივაში შეიძლება გავაკეთოთ შესაბამისი ვიდეო გალვეთილი