Dərslər
Başlamaq
Öyrənməyə başlayın
CodeGym /Kurslar /Frontend SELF AZ /Cədvəllərin stilizasiyası

Cədvəllərin stilizasiyası

Frontend SELF AZ
Səviyyə , Dərs
Mövcuddur

9.1 Atributların istifadəsi

HTML-də cədvəllərin stilləşdirilməsi müxtəlif yollarla həyata keçirilə bilər. Onlardan biri — atributların birbaşa cədvəl və onun element tag-lərində istifadəsidir. Müasir web-developer-lər adətən stilləşdirmə üçün CSS istifadə etməyi üstün tuturlar, lakin HTML atributlarını anlamaq baza stilləşdirmə üçün faydalıdır.

Cədvəllər üçün əsas atributlar

«border» atributu

Cədvəlin sərhəd qalınlığını təyin edir. Adətən dəyər piksel ilə göstərilir.

HTML 
    
      <table border="1">
        <tr>
          <th>Ad</th>
          <th>Qiymət</th>
        </tr>
        <tr>
          <td>İvan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Mariya</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

«cellpadding» atributu:

Hüceyrələrin daxilindəki boşluğu (hüceyrələrin kənarlarından olan boşluqları) təyin edir.

HTML 
    
      <table cellpadding="10">
        <tr>
          <th>Ad</th>
          <th>Qiymət</th>
        </tr>
        <tr>
          <td>İvan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Mariya</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

«cellspacing» atributu:

Hüceyrələr arasında məsafəni təyin edir.

HTML 
    
      <table cellspacing="5">
        <tr>
          <th>Ad</th>
          <th>Qiymət</th>
        </tr>
        <tr>
          <td>İvan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Mariya</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

«width» və «height» atributları:

Cədvəlin enini və hündürlüyünü təyin edir. Bu atributları <td> və <th> tag-lərində də hüceyrələrin ölçülərini təyin etmək üçün istifadə etmək olar.

HTML 
    
      <table style="text-align: left;" width="100%" height="200">
        <tr>
          <th width="50%">Ad</th>
          <th width="25%">Layihə</th>
          <th width="25%">Şəhər</th>
        </tr>
        <tr>
          <td>Alisə</td>
          <td>25</td>
          <td>Paris</td>
        </tr>
      </table>

«align» atributu:

Cədvəlin səhifədə hizalanmasını təyin edir (sol, sağ, mərkəz).

HTML 
    
      <table align="center">
        <tr>
          <th>Ad</th>
          <th>Qiymət</th>
        </tr>
        <tr>
          <td>İvan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Mariya</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

«bgcolor» atributu:

Cədvəlin və ya hüceyrələrin fon rəngini təyin edir.

HTML 
    
      <table bgcolor="#f0f0f0">
        <tr>
          <th>Ad</th>
          <th>Qiymət</th>
        </tr>
        <tr>
          <td>İvan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Mariya</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

9.2 Cədvəl hüceyrələri üçün atributlar

Cədvəl hüceyrələri üçün atributlar

colspan atributu:

Hüceyrələri üfüqi şəkildə birləşdirir.

HTML 
    
      <td colspan="2">Birləşdirilmiş hüceyrə</td>

rowspan atributu:

Hüceyrələri şaquli şəkildə birləşdirir.

HTML 
    
      <td rowspan="2">Birləşdirilmiş hüceyrə</td>

align atributu:

Hüceyrə məzmununun üfüqi düzülüşünü təyin edir (left, right, center).

HTML 
    
      <td align="center">Mərkəzləşdirilmiş mətn</td>

valign atributu:

Hüceyrə məzmununun şaquli düzülüşünü təyin edir (top, middle, bottom).

HTML 
    
      <td valign="top">Yuxarı sərhəddə mətn</td>

bgcolor atributu:

Hüceyrə üçün fon rəngini təyin edir.

HTML 
    
      <td bgcolor="#ffcc00">Rəngli fon</td>

9.3 Tam nümunə

Cədvəlin atributlarla stilləşdirilməsinin tam nümunəsi:

HTML 
    
      <table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
        <caption>Tələbələrin siyahısı və onların qiymətləri</caption>
        <thead bgcolor="#c0c0c0">
          <tr>
            <th align="left">Ad</th>
            <th align="center">Yaş</th>
            <th align="right">Şəhər</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>İvan</td>
            <td align="center">30</td>
            <td align="right">London</td>
          </tr>
          <tr>
            <td colspan="2" align="center">Mariya və Pyotr</td>
            <td align="right">Liverpul</td>
          </tr>
          <tr>
            <td rowspan="2" valign="middle">Anna</td>
            <td>25</td>
            <td>Mançester</td>
          </tr>
          <tr>
            <td>27</td>
            <td>Lids</td>
          </tr>
        </tbody>
        <tfoot>
          <td colspan="3" align="center">Cədvəlin sonu</td>
        </tfoot>
      </table>

Nümunənin izahı

  • border="1": cədvələ 1 piksellik sərhəd əlavə edir
  • cellpadding="10": cədvəl hücrələrinin daxilindəki məsafəni 10 piksel olaraq təyin edir
  • cellspacing="5": cədvəl hücrələri arasındakı məsafəni 5 piksel olaraq qurur
  • width="80%": cədvəlin enini ana elementin eninin 80%-nə bərabər təyin edir
  • align="center": cədvəli səhifənin mərkəzində düzür
  • bgcolor="#e0e0e0": cədvəlin fon rəngini təyin edir
  • <caption>: cədvələ başlıq əlavə edir
  • <thead> və <tbody>: başlıqları və cədvəl gövdəsini qruplaşdırır. Başlıqlar üçün fon rəngi bgcolor="#c0c0c0" ilə təyin edilib
  • <th> və <td>: başlıq və məlumat hücrələrini təyin etmək üçün istifadə edilir
  • <align> və <valign>: hücrələrin məzmununu üfüqi və şaquli olaraq düzür
  • <colspan> və <rowspan>: hücrələri üfüqi və şaquli olaraq birləşdirir
Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION