HTML

Cədvəllər. Xanaları bölməyi öyrənirik (rowspan, colspan)

Cədvəllər. Xanaları bölməyi öyrənirik (rowspan, colspan)

Bu bölmədə biz "rowspan" və "colspan" xassələrindən danışacağıq. "colspan" verilmiş xananın sütunlarının sayını təyin edir, "rowspan" isə sətirlərin sayını təyin edir (Bu xassələr 2 və daha artıq qiymətlər ala bilər. Yəni ki, bizim xana 2-dən çox hissəyə bölünə bilər). İndi hər şeyi yaxşı başa düşmək üçün nümunələrə müraciət edək. 

Bu nümunədə biz 1x1 xanası üçün colspan="2" yazdıq. Kod növbəti şəkildə olacaq:


 

     

<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>


 

Fikir versəniz görərsiniz ki, biz nümünədə 1x1 xanası üçün "width" xassəsini verməmişik, əgər vermək lazım gəlsəydi onu 100 piksel vermək lazım idi, çünki 1x1 xanası o biri xanalardan 2 dəfə böyükdür.

Bizim nümunədə 1x3 xanasının olmamasına fikir verməyi xahiş edirəm, yəni ki, 1-ci sıradakı 1x1 xanasının uzunluq ölçüsü 2 xananın ölçüsünə bərabərdir (bunu biz "colspan" xassəsində vermişik. Əgər biz 1x3 xanasını yazsaydıq, onda bizdə belə bir mənasız şey alınardı. 

"colspan" və "rowspan" xassələri ilə ehtiyatla davranın. Səhv etsəniz, ola bilər ki, sizin sayt qaçsın, səhv göstərsin. "colspan" xassəsi ilə tanış olduqdan sonra indi də "rowspan" xassəsi ilə tanış olaq, burada da prinsip eynidir: 


Bu cür cədvəl üçün özünüz yazmağa çalışın (Qeyd edim ki, burada 2x3 xanası itməlidir). Bütöv mənimsənilməsi üçün bu cür cədvəl üçün də kod yazmağa çalışın: 

Əgər heç nə alınmayıbsa, növbəti addımda nümunəyə baxa bilərsiniz. Hər şey uğurlu alınıbsa, deməli siz qoçaqsıniz və artıq növbəti addıma keçə bilərsiniz.