4shared

ბლოგი

html გაკვეთილი მეთოთხმეტე

Categories: კომპიუტერის გაკვეთილები

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

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

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

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

ცხრილები html

<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. უფრო გასაგები რომ იყოს მოდით მივმართოთ მაგალითს:

html gakvetilebi

ჩვენი მიზანია გავზარდოთ უჯრა 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>

Goal_Keeper
Author: Goal_Keeper

2 Responses to "html გაკვეთილი მეთოთხმეტე"

  1. მარი
    მარი Posted on კვირა, ნოემბერი 9, 2014 at 3:26 pm

    es kvelaferi dzalian kargi, magramkargi iqneba tu gvascavlit shveni ackobili saiti internetshi rogor ganvatavsot:)

  2. Goal_Keeper
    Goal_Keeper Posted on კვირა, ნოემბერი 9, 2014 at 4:59 pm

    გამარჯობათ მარი!

    პერსპექტივაში შეიძლება გავაკეთოთ შესაბამისი ვიდეო გალვეთილი

კომენტარის დატოვება

* Copy This Password *

* Type Or Paste Password Here *