HTML

HTML-də cədvəllər

müəllif Emil Hüseynov

Bu dərsdə HTML-də cədvəllərlə işləməyi öyrənəcəyik.

Cədvəl nədir?

Cədvəl sətir və sütunlardan ibarət strukturlaşdırılmış məlumat toplusudur. Məsələn, aşağıdakı cədvəldə insanlar və onların yaşı cədvəl şəklində tərtib edilib. Göründüyü kimi, bu halda informasiyanın insan tərəfindən qəbulu daha rahatdır.

İnsanlar çoxdan bəri cədvəllərdən istifadə edirlər. ABŞ-da 1800-cü ildə əhalinin siyahıya alınması sənədi də bunu təsdiq edir:

ABŞ-da 1800-cü ildə əhalinin siyahıya alınması sənədi

Ona görə HTML yaradıcılarının internetdə cədvəl məlumatlarını strukturlaşdırmaq və göstərmək üçün vasitə təqdim etməsində təəccüblü heç nə yoxdur.

Cədvəl yaratmaq üçün lazım olan teqlər

HTML-də cədvəl yaratmaq üçün aşağıdakı semantik teqlər mövcuddur:

  • <table>
  • <thead>
  • <tbody>
  • <tfoot>
  • <th>
  • <tr>
  • <td>

İlk cədvəli yaradırıq

İstənilən cədvəlin kontenti bu iki teq arasında yerləşir: <table></table>. Brauzer bu elementi "gördükdə" cədvəl yaratmalı olduğunu "başa düşür":

<table>
		
</table>

Hər bir cədvəl sətirlərdən ibarətdir. Cədvəldə sətir yaratmaq üçün <tr> elementindən (<tr> ... </tr>) istifadə edilir. <tr> - table row (cədvəlin sətri) ifadəsinin qısaltmasıdır. Cədvəlin üç sətirdən ibarət olmasını istəyiriksə, <tr> elementini <table> elementinin içərisində aşağıdakı kimi üç dəfə yazmaq lazımdır:

<table>
    <tr></tr>
    <tr></tr>
    <tr></tr>
</table>

Cədvəlin hər bir sətrində yerləşən xanalar <td> elementinin (<td> ... </td>) köməyilə yaradılır. <td> - table data (cədvəlin məlumatları) ifadəsinin qısaltmasıdır. Məlumatlar <td></td> teqlərinin içərisinə əlavə edilir. Üç sətir və hər sətirdə üç xanadan ibarət olan cədvəl yaradırıq:

<table>
    <tr>
        <td>Nil</td>
        <td>6992</td>
        <td>Aralıq dənizi</td>
    </tr>
    <tr>
        <td>Amazon</td>
        <td>6852</td>
        <td>Atlantik okean</td>
    </tr>
    <tr>
        <td>Missisipi çayı</td>
        <td>6275</td>
        <td>Meksika körfəzi</td>
    </tr>
</table>

Düşünürəm ki, HTML-də cədvəl barədə artıq anlayışınız var. İndi isə ilk cədvəli yaradaq. Aşağıdakı addımları ardıcıllıqla yerinə yetiririk:

  • html qovluğunun içərisində tables qovluğu yaradırıq
  • tables qovluğunda simple_table.html faylı yaradırıq

Redaktorda simple_table.html faylına cədvəlin kodunu əlavə edib yadda saxlayırıq:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sadə cədvəl</title>
    <link href="minimal_table.css" rel="stylesheet" type="text/css">
</head>

<body>

    <table>
        <tr>
            <td>Nil</td>
            <td>6992</td>
            <td>Aralıq dənizi</td>
        </tr>
        <tr>
            <td>Amazon</td>
            <td>6852</td>
            <td>Atlantik okean</td>
        </tr>
        <tr>
            <td>Missisipi çayı</td>
            <td>6275</td>
            <td>Meksika körfəzi</td>
        </tr>
    </table>

</body>
</html>

simple_table.html faylını brauzerdə açırıq:

ilk cədvəl

Göründüyü kimi cədvəl üç sətirdən ibarətdir və hər bir sətirdə üç xana vardır. Lakin cədvəlin görünüşü ürəkaçan deyil. Məsələn, cədvəlin çərçivəsi yoxdur, mətn ətrafında lazımi boşluq qoyulmayıb. Bütün bunlar informasiyanın qəbulunu çətinləşdirir.

Əvvəlki dərsdə CSS-in əsaslarını öyrəndik. Gəlin CSS kodun köməyilə cədvəlin dizaynını yaxşılaşdıraq. tables qovluğunda minimal_table.css faylı yaradıb ona aşağıdakı kodu əlavə edirik və yadda saxlayırıq:

html {
    font-family: sans-serif;
}

table {
    border-collapse: collapse;
    font-size: 1rem;
}

td {
    background-color: #f8f9fa;
    border: 1px solid #333;
    padding: 10px 20px;
}

simple_table.html faylını yenidən brauzerdə açırıq:

cədvəlin dizaynını yaxşılaşdırdıq

Göründüyü kimi, artıq cədvəl çərçivəyə "malikdir", həmçinin hər bir xanada mətnin ətrafında boşluq təyin edilib. İndi cədvəldəki informasiyanın qəbulu daha rahatdır.

<th> elementinin köməyilə cədvəl başlıqları əlavə edirik

Cədvəl başlıqlarından istifadə cədvəldə məlumatları daha yaxşı strukturlaşdırmağa imkan verir. Məsələn, yuxarıdakı şəkildə ilk baxışdan 6992, 6852 və 6275 ədədlərinin nə ifadə etdiyini başa düşmək çətindir. Cədvəl başlıqları hər sütun üzrə məlumatları qruplaşdırır.

Cədvəl başlığı <th> elementinin (<th> ... </th>) köməyilə yaradılır. <th> - table header ifadəsinin qısaltmasıdır. Cədvəl üç sütundan ibarət olduğu üçün üç cədvəl başlığı əlavə edirik. simple_table.html faylına aşağıdakı kimi dəyişiklik edirik:

<!DOCTYPE html>
<html lang="az">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sadə cədvəl</title>
    <link href="minimal_table.css" rel="stylesheet" type="text/css">
</head>

<body>

    <table>
        <th>Çay</th>
        <th>Uzunluğu (km)</th>
        <th>Aid olduğu hövzə</th>

        <tr>
            <td>Nil</td>
            <td>6992</td>
            <td>Aralıq dənizi</td>
        </tr>
        <tr>
            <td>Amazon</td>
            <td>6852</td>
            <td>Atlantik okean</td>
        </tr>
        <tr>
            <td>Missisipi çayı</td>
            <td>6275</td>
            <td>Meksika körfəzi</td>
        </tr>
    </table>

</body>
</html>

simple_table.html faylını brauzerdə açırıq:

cədvəl başlıqları

Cədvəl başlıqlarına standart stil tətbiq edilir: mətn qalın şriftlə yazılır və mərkəzdə yerləşir. Bu, onu digər cədvəl məlumatlarından fərqləndirməyə imkan verir.

Lakin CSS kodun köməyilə cədvəl başlığını daha nəzərəçarpan edə bilərik. minimal_table.css faylındakı digər qaydaları saxlamaqla, th selektoru üçün qaydalar yazırıq:

td, th {
    background-color: #f8f9fa;
    border: 1px solid #333;
    padding: 10px 20px;
}

th {
    background-color: rgb(235, 235, 235);
}

simple_table.html faylını yenidən brauzerdə açırıq:

cədvəl başlıqları

Cədvəldə xanaların birləşdirilməsi

Bəzən bir neçə xananı birləşdirmək lazım olur. Həm sətir, həm də sütun üzrə birləşdirmək mümkündür.

Xanaları üfüqi xətt üzrə birləşdiririk

Xanaları üfüqi xətt üzrə birləşdirmək üçün colspan atributundan istifadə edilir. Əgər iki xananı birləşdirmək istəyiriksə, colspan atributuna iki qiymətini veririk. Üç xananı birləşdirmək istəyiriksə, colspan atributunun qiyməti üç olmalıdır. Aşağıdakı cədvələ diqqət yetirək:

colspan atributu

Göründüyü kimi cədvəlin birinci sətrində iki xana, ikinci sətrində isə üç xana vardır. Birinci sətirdə içərisində 1 yazısı olan xanadan sonra gələn iki xananı birləşdirmək üçün colspan="2" atributundan istifadə etmək lazımdır.

tables qovluğunda colspan.html faylı yaradırıq, aşağıdakı kodu ona əlavə edib yadda saxlayırıq:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colspan</title>
    <link href="minimal_table.css" rel="stylesheet" type="text/css">
</head>

<body>
     
    <h1>Colspan atributu</h1>

    <table>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>

</body>
</html>

colspan.html səhifəsini brauzerdə açırıq:

colspan atributu

Xanaları şaquli xətt üzrə birləşdiririk

Xanaları şaquli xətt üzrə birləşdirmək üçün rowspan atributundan istifadə edilir. Eynilə colspan atributu kimi işləyir, yalnız xanaları şaquli xətt üzrə birləşdirir. Aşağıdakı cədvələ diqqət yetirək:

rowspan atributu

Göründüyü kimi, cədvəl iki sətirdən ibarətdir. Birinci sətirdəki 1 yazısı olan xanaya rowspan="2" atributunu tətbiq etməklə, bu xananı ikinci sətirdəki xana ilə şaquli xətt üzrə birləşdirmiş oluruq. Sonra ilk sətirdə digər, içərisində 2 yazısı olan xana əlavə edirik. İkinci sətrə keçirik. Burda birinci xananın yeri birinci sətrin xanası tərəfindən "zəbt edilib."  Ona görə içərisində 3 yazısı olan xana ikinci xanadan başlayır.

tables qovluğunda rowspan.html faylı yaradırıq, aşağıdakı kodu ona əlavə edib yadda saxlayırıq:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rowspan</title>
    <link href="minimal_table.css" rel="stylesheet" type="text/css">
</head>

<body>
	
	<h1>Rowspan atributu</h1>
	
    <table>
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

</body>
</html>

rowspan.html səhifəsini brauzerdə açırıq:

rowspan atributu

Dərsin kodlarını github-dan yükləyə bilərsiniz.

0

Şərh yazmaq üçün hesabınıza daxil olun.