Demək yadınızdadırsa, biz sizinlə belə bir cədvəl yaratmalı idik:

Amma bizdə hələlik belə cədvəl alınıb:

Bəs problem nədədir? İş ondadır ki, biz cədvəlin sətir və sütunlarının ölçüsünü verməmişik. "height" və "width" xassələrini yada salaq. Siz bunları bütöv cədvəl üçün və həmçinin ayrıca xanalar üçün də verə bilərsiniz. Yada salaq ki, hündürlük və en piksel və ya faizlərlə də verilə bilər. Bizim nümunədə biz xanalar üçün hündürlüyü piksellə verəcəyik.

 

<table> <tr> <td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td> <td width="50" bgcolor="#336699"> 1x2 </td> <td width="50" bgcolor="#FFCC33"> 1x3 </td> </tr> <tr> <td height="35" width="50" bgcolor="#336699"> 2x1 </td> <td width="50" bgcolor="#FFCC33"> 2x2 </td> <td width="50" bgcolor="#336699"> 2x3 </td> </tr> </table>

 

O dəqiqə ilk sualı özüm verəcəyəm: "Nə üçün hündürlük yalnüz 2 xana üçün verilib, lakin en hamısı üçün verilib?" Sadəcə olaraq: Çünki cədvəllərdə xanalardan hansı ən böyük olarsa, onda həmin xana üzrə yerdə qalan xanalar da o hundurlukdə olacaq:) Həmçinin sətirlər üçün də ən uzun olan sütunun ölçüsü üzrə digər sütunlar da o uzunluqda olacaqlar. 

Həmçinin siz bütöv cədvələ ölçü verə bilərsiniz, bu halda sətir və sütunlar öz aralarında eyni ölçüdə bölünəcəklər. 

Yeri gəlmişkən, "height" və "width" atributlarını faizlə də təyin etmək olar:

<td width="30%"> Sətrin içindəki mətn </td>

Əgər biz sətrin uzunluğunu nümunədəki kimi 30 faiz təyin etmişiksə, onda cədvəlin qalan sətrinin uzunluğu 70 faizi keçməməlidir. Niyə? "Niyə"si çox sadə bir riyazi usulla aydındır, belə ki, cədvəlin ümumi uzunluğu 100 faiz olmalıdır və əgər biz bir tərəfə 30 faiz təyin etmişiksə onda 100-30=70 :) 

İndi nümunəmizə qayıdaq, biz öz istəyimizə demək olar ki, çatmışıq:) 

İndi bizə cədvəlin daxilindəkiləri uyğunlaşdırmaq qalıb:

 

<table> <tr> <td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td> <td width="50" bgcolor="#336699"> <center> 1x2 </center> </td> <td width="50" bgcolor="#FFCC33"> <center>1x3 </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>

 

Və... Hazır!:)

Hər bir xananın daxili xüsusi otaq kimi olduğu üçün, biz hər bir xananın daxilində mətni mərkəzləşdirmək üçün hər dəfə yeni teqlər yazdıq. 

Siz həmçinin mətni mərkəzləşdirmək üçün <center> teqindən başqa, "align" atributunu da xatırlamalısıniz. Bu atributla cədvəlin xanalarına uyğunlaşma vermək olar: 

<td align="center">2x2</td> 

Həmçinin "align" atributuna "right" və "left" qiymətləri təyin etmək olar. <td> teqinin "align" atributunda "justify" qiymətini istifadə etmək mümkün deyil. Bizim halda "align" atributu xananın içindəki məlumatları uyğunlaşdırır (əgər siz başa düşməmisinizsə:). 

Hər bir xanada şəkil, mətn və hətta cədvəl də ola bilər. Həmçinin bizim mətnləri formatlaşdırmaq üçün istifadə etdiyimiz teqlər də istifadə oluna bilər. 

Gəlin növbəti addıma keçək və cədvəllər haqqında söhbətimizi davam edək.