Online- კურსები - HTML
გაკვეთილი 11. ცხრილები (გაგრძელება)
როგორც წინა გაკვეთილში ვთქვით, ცხრილებს გააჩნიათ ბევრი ატრიბუტები. შევისწავლოთ კიდევ ორი.
ატრიბუტები "colspan" და "RowSpan".
Colspan - შემოკლებულად "clean column / მოიცავს სვეტებს" -ისგან. Colspan გამოიყენება ტეგში <TD> რათა გაარკვიოს რამდენ სვეტს მოიცავს მოცემული უჯრა:
მაგალითი 1:
Colspan - შემოკლებულად "clean column / მოიცავს სვეტებს" -ისგან. Colspan გამოიყენება ტეგში <TD> რათა გაარკვიოს რამდენ სვეტს მოიცავს მოცემული უჯრა:
მაგალითი 1:
<TABLE ALIGN = "Center" border = "1" CELLPADDING = "0">
<TR>
<TD colspan = "3"> უჯრა 1 </ TD>
</ TR>
<TR> <
<TD> უჯრა 2 </ TD>
<TD> უჯრა 3 </ TD>
<TD> უჯრა 4 </ TD>
</ TR>
</ Table>
<TR>
<TD colspan = "3"> უჯრა 1 </ TD>
</ TR>
<TR> <
<TD> უჯრა 2 </ TD>
<TD> უჯრა 3 </ TD>
<TD> უჯრა 4 </ TD>
</ TR>
</ Table>
ბრაუზერში ასე გამოიყურება:
უჯრა 1
| ||
უჯრა 2
|
უჯრა 3
|
უჯრა 4
|
Colspan "3" -ის დასმა, იძულებულს ხდის უჯრას პირველ რიგში მოიცვას სამი სვეტი. თუ დავსვამთ colspan "2", უჯრა მხოლოდ ორ სვეტს მოიცავს, და საჭირო გახდება დამატებითი უჯრების დასმა პირველ რიგში, რათა უჯრები თანაბრად გადანაწილდნენ ორ რიგში.
მაგალითი number 2:
მაგალითი number 2:
<TABLE ALIGN = "Center" border = "1" CELLPADDING = "0">
<TR>
<TD colspan = "2"> უჯრა 1 </ TD>
<TD> უჯრა 2 </ TD>
</ TR>
<TR>
<TD> უჯრა 3 </ TD>
<TD> ყჯრა 4 </ TD>
<TD> უჯრა 5 </ TD>
</ TR>
</ Table>
<TR>
<TD colspan = "2"> უჯრა 1 </ TD>
<TD> უჯრა 2 </ TD>
</ TR>
<TR>
<TD> უჯრა 3 </ TD>
<TD> ყჯრა 4 </ TD>
<TD> უჯრა 5 </ TD>
</ TR>
</ Table>
ეს ყველაფერი ბრაუზერში ასე გამოიყურება:
ყჯრა 1
|
უჯრა 2
| |
უჯრა 3
|
უჯრა 4
|
უჯრა 5
|
როგორც უკვე მიხვდით, RowSpan განსაზღვრავს, რამდენ რიგს მოიცავს ეს უჯრა:
მაგალითი № 3:
მაგალითი № 3:
<TABLE ALIGN = "Center" border = "1" CELLPADDING = "0">
<TR>
<TD RowSpan = "3"> უჯრა 1 </ TD>
<TD> უჯრა 2 </ TD>
</ TR>
<TR>
<TD> უჯრა 3 </ TD>
</ TR>
<TR>
<TD> უჯრა 4 </ TD>
</ TR>
</ Table>
<TR>
<TD RowSpan = "3"> უჯრა 1 </ TD>
<TD> უჯრა 2 </ TD>
</ TR>
<TR>
<TD> უჯრა 3 </ TD>
</ TR>
<TR>
<TD> უჯრა 4 </ TD>
</ TR>
</ Table>
ბრაუზერში:
უჯრა 1 |
უჯრა 2
|
უჯრა 3
| |
უჯრა 4
|
ამ მაგალითში RowSpan -ს აქვს მნიშვნელობა "3" უჯრაში "უჯრა 1". ეს აჩვენებს რომ, უჯრა უნდა მოიცავდეს სამ რიგს (თავის რიგს პლიუს კიდევ ორი).
სულაც არ არის რთული. თავადაც შეადგინეთ ერთი ორი ცხრილი და გაიარეთ პრაქტიკა, ატრიბუტების "colspan" და "RowSpan" -ის გამოყენებით.
