Html-də cədvəllər nə üçün istifadə olunur? Misal: rowspan atributundan istifadə




Cədvəllərin çox yönlü olması və onların görünüşünü idarə edən çoxlu sayda parametrlər sayəsində cədvəllər çoxdan veb-səhifələrin tərtibatı üçün müəyyən standarta çevrilmişdir. Görünməz haşiyəsi olan cədvəl modul şəbəkəyə bənzəyir, onun bloklarında veb səhifə elementlərini yerləşdirmək rahatdır. Bununla belə, bu, tamamilə düzgün yanaşma deyil, çünki hər bir HTML obyekti öz məqsədləri üçün müəyyən edilir və təyinatı üzrə və hər yerdə istifadə olunmursa, bu, alternativlərin olmaması deməkdir. Bu, veb-sayt tərtibatında təbəqələr cədvəlləri əvəz edənə qədər uzun müddət idi. Bu o demək deyil ki, indi təbəqələr hər zaman istifadə olunur, lakin tendensiya artıq aydın şəkildə ortaya çıxıb - cədvəllər cədvəl məlumatlarını yerləşdirmək üçün, təbəqələr isə tərtibat və dizayn üçün istifadə olunur.

Cədvəlin yaradılması

Cədvəl mətn və şəkilləri ehtiva edə bilən xanaların sətir və sütunlarından ibarətdir. Cədvəllər adətən məlumatları təşkil etmək və təqdim etmək üçün istifadə olunur, lakin cədvəllər bununla məhdudlaşmır. Cədvəllərdən istifadə edərək mətn və şəkillərin fraqmentlərini istədiyiniz şəkildə düzərək səhifə tərtibatını tərtib etmək rahatdır.

Veb səhifəyə cədvəl əlavə etmək üçün etiketdən istifadə edin

. Bu element cədvəlin məzmununu təyin edən elementlər üçün konteyner kimi xidmət edir. İstənilən cədvəl sətirlərdən və xanalardan ibarətdir, bunlar müvafiq olaraq teqlərdən istifadə etməklə müəyyən edilir Və içəri
. Cədvəldə ən azı bir xana olmalıdır (misal 12.1). Etiket əvəzinə icazə verilir etiketdən istifadə edin . Teq ilə tərtib edilmiş xanadakı mətn , brauzer tərəfindən qalın şriftlə göstərilir və xananın mərkəzinə düzülür. Əks halda, hüceyrələr arasındakı fərqlər etiketlər vasitəsilə yaradılır Yox.

Misal 12.1. Cədvəlin yaradılması

TABLE etiketi

Hüceyrə 1 Hüceyrə 2
Hüceyrə 3 Hüceyrə 4

Hüceyrələrin sırası və onların görünüşü Şəkildə göstərilmişdir. 12.1.

Salam, əziz blog oxucuları! Çox vaxt veb səhifələrdə mətn və şəkillərlə yanaşı, müxtəlif məlumatların cədvəl şəklində nümayişinə ehtiyac var. Bəli, bu başa düşüləndir, cədvəl böyük miqdarda məlumat təqdim etməyin ən əlverişli yoludur. Beləliklə, sual yaranır "Cədvəlləri html-ə necə daxil etmək olar?". Bu yazıda mən bu suala cavab verəcəyəm və sizə müxtəlif html cədvəllərindən çoxlu nümunələr verəcəyəm.

HTML istifadə edərək necə cədvəl yaratmaq olar

HTML cədvəlləri dörd addımda yaradılır.

1. İlk addımda html kodunu istifadə edərək cüt etiket

brauzerə cədvəlin veb səhifəyə daxil edildiyini bildiririk:
. Cədvəl elementi veb səhifənin blok elementidir. Buna görə də, cədvəl həmişə bitişik elementlərdən şaquli olaraq girintili yeni bir sətirdə göstərilir, ona görə də onu paraqrafda yerləşdirməyə ehtiyac yoxdur.

2. İkinci mərhələdə biz formalaşdırırıq xətlər masalar, qoşalaşmış etiketlərin yerləşdirilməsi

. Hər bir element ayrı bir xətt yaradır:





3. Sonra, üçüncü addımda biz formalaşdırırıq hüceyrələr Cütlənmiş etiketlərdən istifadə edərək cədvəllər , elementin içərisinə yerləşdirilir . Tag yaradır müntəzəm hüceyrə və hüceyrə başlıq, yəni. müvafiq sütunun başlığı:











4. Yaxşı, son mərhələdə biz onları elementlərin içərisinə yerləşdiririk Və hüceyrə tərkibi. Veb səhifəyə cədvəl daxil etmək üçün HTML kodu belə görünür:











Sütun 1Sütun 2Sütun 3
Hüceyrə 1-1Hüceyrə 1-2Hüceyrə 1-3
Hüceyrə 2-1Hüceyrə 2-2Hüceyrə 2-3

Onlar sərhədlərin ekranını dəqiq tənzimləməyə kömək edəcəklər. Onun köməyi ilə siz çərçivələrin qalınlığını və rəngini dəyişdirə, həmçinin haşiyələrin növünü dəyişə bilərsiniz.

Hüceyrələrin içərisinə yerləşdirilməli olan mətnin əlavə edilməsinə ehtiyac yoxdur, lakin mətn böyükdürsə, etiketdən istifadə etməklə onu paraqraflara bölmək olar.

Daxil edilmiş mətni bir şəkildə formatlamağınız lazımdırsa, istifadə edə bilərsiniz.

Mətnə əlavə olaraq etiketdən istifadə edərək şəkilləri xanalara yerləşdirə bilərik :

Hüceyrənin məzmunu hətta başqa bir cədvəl ola bilər. Bu halda iç-içə cədvəl yaratmaq adi cədvəl yaratmaqdan heç də fərqlənmir. Yalnız etiketlər arasında Və teqlər daxil edilir

, və ona sətirlər və xanalar daxil edilir.

Cədvəllər yaradarkən bəzi qaydaları yadda saxlamaq lazımdır:

  • cədvəl yaratmaq üçün yalnız etiketdən istifadə olunur ;
  • etiket
  • yalnız etiketin içində ola bilər
    ;
  • etiketlər
  • , hər hansı digər etiket məzmunu brauzer tərəfindən nəzərə alınmır;
  • cədvəl məzmunu (mətn və ya şəkillər) yalnız teqlərdə ola bilər
  • yalnız etiketin içində ola bilər
    ;
  • cədvəl xanalarında ən azı müəyyən məzmun olmalıdır, əks halda brauzer onları ümumiyyətlə göstərməyə bilər, lakin hansısa xana boş olmalıdırsa, onda adətən orada qırılmayan boşluq (HTML hərfi) yerləşdirilir;
  • cədvəl veb səhifənin blok elementlərinə aiddir;
  • Cədvəlin və onun hüceyrələrinin ölçüləri məzmundan asılıdır, yəni. masa genişlik və hündürlükdə uzanır ki, hər şey uyğun olsun;
  • ayrı-ayrı hüceyrələrin sərhədləri arasında və hər bir hüceyrənin sərhədi ilə onun məzmunu arasında kiçik bir girinti edilir;
  • başlıq xanalarının mətni (üncü element) qalın və mərkəzləşdirilmiş şəkildə göstərilir;
  • Cədvəl və onun hücrələri ətrafında sərhədlər standart olaraq çəkilmir.
  • Cədvəl başlığı

    Qoşalaşmış etiketlə başlayaq

    , bu cədvələ başlıq verir. Başlıq mətni bu teqin içərisinə daxil olur, o, etiketin içərisində olmalıdır . Və etiketi cədvəlin html kodunun harasına yerləşdirməyinizin əhəmiyyəti yoxdur . Üstəlik, birdən çox elementdən istifadə etməyə icazə verilir eyni cədvəl daxilində və etiketdən dərhal sonra html koduna daxil olmalıdır
    , brauzer hələ də başlığı cədvəlin üstündə göstərəcək və onu mərkəzləşdirəcək. Amma adətən etiket açılış etiketindən dərhal sonra yerləşdirilir :









    Bu masadır
    Hüceyrə 1.1Hüceyrə 1.2
    Hüceyrə 2.1Hüceyrə 2.2

    Ekran:

    Cədvəl bölmələri

    Html cədvəlini məntiqi olaraq hissələrə - bölmələrə bölmək olar. Üç növ bölmə var:

    • başlıq bölməsi, cədvəl başlığını təşkil edən başlıq xanalarını ehtiva edir;
    • bədən bölməsi, əsas məlumatların yerləşdiyi xanalarda;
    • tamamlama bölməsi, xülasə məlumatları olan xanaların yerləşdirildiyi.

    Cədvəl başlığı bölməsi qoşalaşmış etiketdən istifadə etməklə formalaşır

    .

    Bədən bölməsi qoşalanmış etiketlə yaradılır

    . Bir html cədvəlində bir neçə bədən bölməsi ola bilər ki, bu da vahid dizayn üslublarının tətbiq oluna biləcəyi struktur bloklar yaratmağa imkan verir.

    Sonlandırma bölməsi qoşalaşmış etiketlə formalaşır

    və bir konteynerdə
    yalnız bir ola bilər.

    Bütün bu qoşalaşmış teqlərdə teqlər olmalıdır

    müvafiq bölmələrlə əlaqəli sətirləri təşkil edən:




















    Sütun 1Sütun 2Sütun 3
    Hüceyrə 1.1Hüceyrə 1.2Hüceyrə 1.3
    Hüceyrə 2.1Hüceyrə 2.2Hüceyrə 2.3
    Nəticə 1Nəticə 2Nəticə 3

    Cədvəl hüceyrələrinin birləşdirilməsi

    Cədvəllərin ən vacib xüsusiyyəti haqqında danışmaq qalır - hüceyrələrin birləşməsi. Atributlar bir neçə xananı bir yerə birləşdirmək üçün istifadə olunur kolspansıra aralığı etiketlər

    . Colspan atributu üfüqi, sıra aralığı isə şaquli olaraq birləşdirilən xanaların sayını təyin edir:













    1.11.2-1.3
    2.12.22.3
    3.1-4.13.23.3
    4.24.3

    Nümunə nəticə:

    1.1 1.2-1.3
    2.1 2.2 2.3
    3.1-4.1 3.2 3.3
    4.2 4.3

    Hüceyrələri birləşdirərkən xətaların olmaması üçün hər cərgədəki xanaların sayını yoxlamaq vacibdir. Bəli, dizayn

    iki xananı əvəz edir, ona görə də növbəti sətirdə iki teq olmalıdır , ya da eyni dizayn! Bütün sətirlərdəki xanaların sayı uyğun gəlmirsə, boş əlavə xanalar görünəcək.

    Hüceyrələri birləşdirərkən səhv html koduna bir nümunə:








    xana 1.1xana 1.2
    xana 2.1xana 2.2

    Və nəticə brauzerdə göstərilir:

    Bunlar. Html kodunu təhlil etsəniz, birinci sətirdə üç xana olduğunu, bunlardan ikisinin colspan atributundan istifadə edərək birləşdirildiyini və ikinci sətirdə yalnız iki xana əlavə olunduğunu görəcəksiniz. Beləliklə, ikinci sətirdə üçüncü boş xana görünür.

    Tag atributları

    Bu yazıda biz artıq bir etiket atributuna rast gəldik

    . Haşiyənin qalınlığını piksellərlə təyin edən sərhəd atributu ilə. Varsayılan olaraq 0-dır və buna görə də hüceyrələr standart olaraq sərhədsiz göstərilir.

    Sərhəd atributuna əlavə olaraq, etiket tərəfindən dəstəklənən bir neçə vacib atribut da var

    . Gəlin onlara baxaq.

    Atribut hizalayın- dəstlər hamarlama səhifədəki cədvəllər. Uyğunluğu sola, mərkəzə və sağa təyin edən sola, mərkəzə, sağa dəyərləri götürə bilər. Defoltlar sola.

    Atribut fon, hansı fon şəklini təyin edir masaya. Şəkil faylının ünvanını onun dəyəri kimi qəbul edir.

    bgcolor- dəstlər fon rəngi masalar. Fon atributu ilə birlikdə istifadə edilə bilər.

    Atribut haşiyə rəngi dəstləri çərçivə rəngi masalar.

    Cellpadding- müəyyən edir hüceyrə sərhədi və onun məzmunu arasındakı məsafə. Cədvəlin oxunuşunu yaxşılaşdırmağa imkan verir. Qiymət istənilən müsbət ədəd ola bilər.

    Hüceyrə boşluğu- dəstlər xarici hüceyrə sərhədləri arasındakı məsafə.

    Gəlin bu haqda danışaq html səhifəsinə cədvəli necə daxil etmək olar Mən yekunlaşdıracağam, sadəcə xülasə edirəm:

    • teqlər cədvəl daxil etmək üçün istifadə olunur
    - masa təyinatı, - xətt əlavə etmək və , tamamlama bölməsi və bədən bölməsi - ;
  • hüceyrələri birləşdirmək üçün etiket atributlarından istifadə edirik
  • .... Sıra hər iki teqdən istifadə etməklə müəyyən edilən xanalardan ibarətdir , əgər bu xanalarda sütun başlıqları və ya teqlər varsa . Başlıqlar qalın şriftlə göstərilir və xananın mərkəzində yerləşir. Məlumat normal şriftdədir və xananın sol tərəfinə düzülür. Teqlər bütün cədvəlin başlığını təyin etmək üçün istifadə olunur .

    Misal

    Hüceyrələrdə məlumatların olması lazım deyil. Boş hüceyrə yaratmağın iki yolu var: onun qabını heç nə ilə doldurmayın (

    ) və ya xüsusi simvol ardıcıllığı ilə müəyyən edilmiş kəsilməyən boşluq simvolu yerləşdirin -- (yəni, belə bir xana yaradın) ).

    Sətirdə qalan bütün hüceyrələrin doldurulmayacağını planlaşdırırsınızsa, ayrıca boş xanalar yaratmağa ehtiyac yoxdur. Etiketdən bəri

    yeni sətrin başlanğıcını bildirir, boş xanalar brauzer tərəfindən avtomatik olaraq əlavə olunacaq.

    Əsas etiket atributları

    - hüceyrə daxil edilməsi;
  • cədvəl veb səhifənin blok elementidir;
  • hüceyrələrin məzmunu yalnız mətn deyil, həm də şəkillər və digər cədvəllər ola bilər;
  • Cədvəldə üç növ bölmə ola bilər: başlıq bölməsi -
  • kolspan və sıra aralığı.

    Hamısı budur, növbəti yazıda html saytında naviqasiya alətləri haqqında danışacağam. Bu yazını qaçırmamaq üçün blog yeniləmələrimə abunə olun! Budur, bir daha görüşənədək!

    HTML cədvəl teqləri əvvəlcə cədvəlləşdirilmiş verilənlərin sətir və sütunlarını təmsil etmək üçün nəzərdə tutulmuşdu. Bununla belə, dizaynerlər onlardan Web-səhifələrin tərtibatını manipulyasiya etmək üçün istifadə etməyi öyrəniblər: mətn sütunları yaradın, elementlər arasında məsafə təyin edin və mətnin görünüşünü digər HTML formatlama teqlərinin edə bilməyəcəyi şəkildə dəyişdirin.

    HTML-də cədvəllər həmişə düzbucaqlıdır və sətirlərdən ibarətdir, onlar da öz növbəsində xanalardan ibarətdir. Yaradılan cədvəlin komponentlərini təsvir edən bütün dil konstruksiyaları teqlər arasında yerləşir

    .

    Cədvəl sətir-sətir doldurulur; sətri işarələmək üçün bir cüt teq istifadə olunur

    ......
    Cədvəl başlığı
    Başlıq 1Başlıq 2
    Hüceyrə 1Hüceyrə 2
    Hüceyrə 3Hüceyrə 4

    Əsas etiket atributlarının təyin edilməsi

    və ala biləcəkləri dəyərlər cədvəldə verilmişdir.

    Atribut

    Məqsəd

    Cədvəl haşiyəsinin enini (piksellə) müəyyən edir, məsələn, BORDER=1; sıfır dəyəri çərçivənin olmaması deməkdir

    Bütün cədvəlin enini piksellə və ya brauzer pəncərəsinin eninin faizi kimi müəyyən edir

    Bütün cədvəlin hündürlüyünü piksellərlə və ya brauzer pəncərəsinin hündürlüyünün faizi kimi müəyyən edir

    Brauzer pəncərəsində cədvəlin üfüqi düzülməsini təyin edir; sol, mərkəz və sağ dəyərlərə malikdir (defolt soldadır)

    Hüceyrə daxilində verilənlər və onun sərhədləri arasında boş yer əlavə edir; standart dəyər 2-dir

    Bütün cədvəl daxilində hüceyrələr arasında boş yer əlavə edir; standart dəyər 2-dir

    Cədvəlin solunda və sağında müəyyən genişlikdə (piksellə) boş yer sahələrini təyin edir

    Cədvəlin üstündə və altında verilmiş hündürlükdə (piksellə) boş yer sahələrini təyin edir

    BGCOLOR=rəng

    Bütün cədvəlin fon rəngini təyin edir

    Cədvəl üçün fon şəklini təyin edir, burada URL mənbə ünvanıdır (şəkil faylının adı)

    Misal BORDER və ALIGN atributlarını etiketə əlavə etməklə əvvəlki nümunədə yaradılmış sənədin məzmununu dəyişdirək.

    :

    İndi cədvəl xanaları çərçivəyə salınacaq və cədvəl brauzer pəncərəsinin mərkəzinə düzüləcək.

    HTML-dəki cədvəllər o qədər funksionaldır ki, onlardan bütün veb-saytları tərtib etmək üçün istifadə edə bilərsiniz (oxu). İndi biz sadə HTML cədvəllərini veb səhifəyə daxil etmək, yalnız işarələməni təhlil etmək, lakin dizayna toxunmamaq haqqında danışacağıq, çünki CSS üslublarından istifadə edərək cədvəlləri bəzəmək daha yaxşıdır.

    Cədvəl etiketləri və atributları

    Cədvəl yaratmaq üçün sizə lazım olan əsas elementlər bunlardır:

    - masanın yerləşdiyi konteyner (eyni
      işarələnmiş və ya üçün
        nömrələnmiş siyahılar üçün).
      1. sərhəd- çərçivələrin qalınlığını təyin edən atribut. Bunun əvəzinə sərhəd CSS xassəsindən istifadə etmək daha yaxşıdır.
    cədvəl imzasını müəyyən edir. Konteynerdən istifadə etmək məcburiyyətində deyilsiniz, lakin hələ də cədvələ başlıq vermək qərarına gəlsəniz, onu etiketdən dərhal sonra qoyun , xarici xanalar və sıralar.
  • - cədvəl cərgəsi olan qoşalaşmış etiket (eyni üfüqi səviyyədə yerləşən hüceyrələr).
  • , onda çoxlu hüceyrə olacaq: bir etiket - bir hüceyrə.
  • tez və kodu tıxanmadan sütunları qruplaşdırmağa, onlara ümumi xüsusiyyətlər təyin etməyə imkan verir. Konteynerdən istifadə edərək, cədvəlin məntiqi hissələrini bir-birindən ayıra bilərsiniz. Etiketdən sonra yerləşdirilir
    - cədvəl başlıq xanasını yaradan teq. Xarici olaraq onun məzmunu digər xanalardakı məzmundan - adətən içindəki mətndən fərqlənir Brauzer onu qalın hərflərlə vurğulayır və mərkəzə yerləşdirir.
  • - sadə bir hüceyrənin yaradıldığı konteyner. Bir sətirdə neçə belə teq olacaq (teq
    , orada deyilsə, sonra .
  • kimi eyni məqsədlə istifadə olunur . ehtiva edə bilər , lakin əksinə deyil.
  • qarış- konteyner xassələrinin tətbiq olunduğu sütunların sayını təyin edən atribut
  • .
  • , - cədvəli müvafiq olaraq yuxarı (başlıqlar), əsas (gövdə) və aşağı (son) hissələrə bölməyə imkan verən qablar. HTML cədvəlində bu teqlərin ardıcıllığı konteynerlərin ardıcıllığı ilə eynidir ,
    HTML sənədində.
  • kolspan cərgədə hüceyrələri birləşdirmək lazımdır. Atribut dəyəri birləşdiriləcək xanaların sayını təyin edən rəqəmi ehtiva edir.
  • sıra aralığı xanaları sütunlara birləşdirir.
  • Cədvəl yaratma nümunəsi

    HTML sənədi yaradın və ona aşağıdakı kodu kopyalayın:

    Nümunə cədvəli

    Veb sayt yaratma vasitələri
    MəqsədAlət
    İşarələməHTMLXHTML
    DekorCSS
    İnkişafPHPPython

    Brauzerdə sənəd belə görünəcək:

    Hansı kod sətirlərinin nəyə cavabdeh olduğunu anlayaq.

    • - çərçivələrin qalınlığını verərək masanı açdı.
    • - başlıq qoydular.
    • - xətti açdı.
    • - başlıq dizaynı olan bir hüceyrə yaratdı.
    • - cərgədə ikinci başlıq xanası yaratdı. Colspan parametri göstərirdi ki, bu hüceyrə iki üfüqi istiqamətdə olmalıdır.
    • - xətti bağladı. Qalan sətirlər də eyni şəkildə yaradılmışdır.
    • - başlıqdan daha çox adi xanalarla cədvəlin ikinci sırasını əlavə etdi. Sonrakı cərgələr və xanalar oxşar şəkildə daxil edildi.
    • Veb sayt yaratma vasitələri
      Məqsəd Alət
      İşarələmə HTML XHTML
      - masanı bağladı.

    Bu mühazirə HTML işarələməsində cədvəllərdən istifadə prinsiplərini ətraflı müzakirə edir. Buraya mətnin cədvəl təşkili, cədvəlli koordinatlar şəbəkəsi və cədvəllərdə təşkil olunmuş qrafiklər daxildir.

    HTML-də cədvəlləri təsvir etmək üçün alətlər

    WWW inkişaf etdikcə məlum oldu ki, HTML-də olan resurslar müxtəlif növ sənədlərin yüksək keyfiyyətli nümayişi üçün kifayət etmir. HTML-in dezavantajı cədvəlləri göstərmək üçün alətlərin olmaması idi. Bu məqsədlə əvvəlcədən formatlaşdırılmış mətn (teq

    ), burada cədvəl ASCII simvollarında təsvir edilmişdir.  Lakin cədvəllərin təqdim edilməsinin bu forması kifayət qədər yüksək keyfiyyətə malik deyildi və sənədin ümumi üslubundan fərqlənirdi.  HTML-də cədvəllərin tətbiqindən sonra Webmasters sadəcə mətn və ədədi məlumatların yerləşdirilməsi üçün alətə deyil, qrafik şəkilləri və mətni ekranda lazımi yerə yerləşdirmək üçün güclü dizayn alətinə malik idi.

    HTML-də cədvəllərin yaradılması

    Etiket cədvəlləri təsvir etmək üçün istifadə olunur<ТАВLЕ>. Tag<ТАВLЕ>, bir çox başqaları kimi, cədvəldən əvvəl və sonra sətri avtomatik olaraq tərcümə edir.

    Cədvəl sırasının yaradılması - etiket<ТR>

    Tag<ТR>(Cədvəl sırası) cədvəl cərgəsi yaradır. Bir sətirdə yerləşdirilməsi lazım olan bütün mətn, digər teqlər və atributlar lt;TR> teqləri arasında yerləşdirilməlidir..

    Cədvəl hüceyrələrinin müəyyən edilməsi - etiket<ТD>

    Məlumatları olan xanalar adətən cədvəl cərgəsinin içərisinə yerləşdirilir. Mətn və ya şəkil olan hər bir xana teqlərlə əhatə olunmalıdır<ТD>. Teqlərin sayı<ТD>bir sıra xanaların sayını müəyyən edir

    Cədvəl

    Cədvəldə iki TR teq varsa, onda iki sıra var.
    Bir sətirdə üç TD etiketi varsa, sonra onun içində üç sütun.

    Cədvəl sütun başlıqları - etiket<ТН>

    Cədvəl sütunları və sətirləri üçün başlıqlar başlıq teqindən istifadə etməklə təyin edilir<ТН>(Cədvəl başlığı, cədvəl başlığı). Bu etiketlər oxşardır<ТD>. Fərq ondadır ki, teqlər arasında mətn əlavə olunur<ТН>, avtomatik olaraq qalın hərflərlə yazılır və standart olaraq xananın ortasında yerləşdirilir. Siz mətnin mərkəzini aça və mətni sola və ya sağa uyğunlaşdıra bilərsiniz. İstifadə etsəniz<ТD>etiketi ilə<В>və atribut<АLIGN=center>, mətn də başlıq kimi görünəcək. Bununla belə, unutmayın ki, bütün brauzerlər cədvəllərdə qalın şrifti dəstəkləmir, ona görə də cədvəl başlıqlarını istifadə edərək təyin etmək daha yaxşıdır.<ТН>.

    Başlıq defolt olaraq mərkəzdədir Başlıq sütunları birləşdirə bilər
    Başlıq sütunlardan əvvəl yerləşdirilə bilər Mətn və ya məlumat Mətn və ya məlumat
    Başlıq xətləri birləşdirə bilər Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat

    Cədvəl başlıqlarından istifadə - etiket<САРТIОN>

    Tag

    cədvəl başlıqları yaratmağa imkan verir. Varsayılan olaraq, başlıqlar ortalanır və yuxarıda yerləşdirilir (<САРТION АLIGN=top>) və ya masanın altında (<САРТION ALIGN=bottom>). Başlıq istənilən mətn və şəkillərdən ibarət ola bilər. Mətn cədvəlin eninə uyğun sətirlərə bölünəcək. Bəzən tag<САРТION>şəkil imzalamaq üçün istifadə olunur. Bunun üçün sərhədsiz cədvəli təsvir etmək kifayətdir.

    Cədvəlin üstündəki başlıq
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Cədvəlin altındakı başlıq
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat

    NOWRAP atributu

    Tipik olaraq, cədvəl xanasının bir sırasına sığmayan hər hansı mətn növbəti sıraya keçir. Bununla belə, NOWRAP atributunu teqlərlə istifadə edərkən<ТН>və ya<ТD>Hüceyrənin uzunluğu genişləndirilir ki, içindəki mətn bir sətirə sığsın.

    COLSPAN atributu

    Teqlər<ТD>Və<ТН>COLSPAN atributundan istifadə edərək dəyişdirilmişdir (Sütun Aralığı, sütun bağlantısı). Hüceyrəni yuxarıdan və ya aşağıdan daha geniş etmək istəyirsinizsə, onu istənilən sayda normal xanaların üzərinə uzatmaq üçün COLSPAN atributundan istifadə edə bilərsiniz.

    Hər hansı bir hücrəni yuxarıdan və ya aşağıdan daha geniş etmək istəyirsinizsə, COLSPAN=2 atributundan istifadə edə bilərsiniz,
    onu istənilən sayda müntəzəm hüceyrələr üzərində uzatmaq üçün.

    ROWSPAN atributu

    ROWSPAN atributu teqlərdə istifadə olunur<ТD>Və<ТН>, COLSPAN= atributuna bənzəyir, yalnız xananın uzadıldığı sətirlərin sayını təyin edir. Əgər siz ROWSPAN=s atributunda birdən çox rəqəm göstərmisinizsə, o zaman müvafiq cərgə sayı uzanan xananın altında olmalıdır. Onu masanın altına qoymaq olmaz.

    WIDTH atributu

    WIDTH atributu iki halda istifadə olunur. Etiketə qoya bilərsiniz<ТАВLЕ>bütün cədvəlin enini vermək və ya etiketlərdə istifadə edilə bilər<ТD>və ya<ТН>hüceyrə və ya hüceyrələr qrupunun enini təyin etmək üçün. Genişlik piksel və ya faizlə göstərilə bilər. Məsələn, etiketdə təyin etsəniz<ТАВLЕ>WIDTH=250, siz monitorunuzdakı səhifənin ölçüsündən asılı olmayaraq 250 piksel enində cədvəl alacaqsınız. Teqdə WIDТН=50% təyin edərkən<ТАВLЕ>ekranda istənilən şəkil ölçüsündə cədvəl səhifənin eninin yarısını tutacaq. Beləliklə, cədvəlin enini faizlə göstərərkən nəzərə alın ki, əgər istifadəçinin baxış pəncərəsi dardırsa, səhifəniz bir az qəribə görünə bilər. Əgər piksellərdən istifadə edirsinizsə və cədvəl baxış sahəsindən daha genişdirsə, səhifə boyunca sola və sağa hərəkət etmək üçün aşağıda sürüşdürmə çubuğu görünəcək. Qarşıda duran vəzifələrdən asılı olaraq, masanın enini təyin etməyin hər iki üsulu faydalı ola bilər.

    Mətn və ya məlumat - eni 100%
    və ya
    Mətn və ya məlumat - eni 50%
    və ya
    Mətn və ya məlumat - 200 piksel genişlikdə
    və ya
    Mətn və ya məlumat - 100 piksel genişlikdə

    Boş hüceyrələrin tətbiqi

    Hüceyrədə heç bir məlumat yoxdursa, onun sərhədləri olmayacaqdır. Hüceyrənin haşiyələrə malik olmasını, lakin məzmununun olmaması istəyirsinizsə, ona baxıldıqda görünməyəcək bir şey qoymalısınız. Boş bir sətirdən istifadə edə bilərsiniz<ВR>. Siz hətta boş sütunları onların enini piksel və ya nisbi vahidlərlə müəyyən etməklə və nəticədə yaranan xanalara heç bir məlumat daxil etməməklə təyin edə bilərsiniz. Bu alət mətn və qrafikləri səhifəyə yerləşdirərkən faydalı ola bilər.

    CELLADDING atributu

    Bu atribut xananın məzmunu ilə onun sərhədləri arasındakı boşluğun enini təyin edir, yəni xana daxilində kənarları təyin edir.

    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat

    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat

    ALIGN və VALIGN atributları

    Teqlər<ТR>, <ТD>Və<ТН>ALIGN və VALIGN atributlarından istifadə etməklə dəyişdirilə bilər. ALIGN atributu mətn və qrafiklərin üfüqi, yəni sola və ya sağa, yaxud mərkəzə düzüldüyünü müəyyən edir. Üfüqi hizalama bir neçə yolla təyin edilə bilər:

    ALIGN=soldan qanaxma xananın məzmununu sol kənara yaxın sıxır.

    ALIGN=sol CELLPADDING atributu tərəfindən müəyyən edilmiş abzas nəzərə alınmaqla, xananın məzmununu sola uyğunlaşdırır.

    ALIGN=mərkəz Hüceyrənin məzmununu mərkəzləşdirir.

    ALIGN=sağ CELLPADDING atributu tərəfindən müəyyən edilmiş abzas nəzərə alınmaqla, xananın məzmununu sağa düzür.

    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat

    VALIGN atributu xana daxilində mətn və qrafikləri şaquli olaraq düzləşdirir. Şaquli hizalanma bir neçə yolla təyin edilə bilər:

    VALIGN=yuxarı Hüceyrənin məzmununu yuxarı sərhədinə uyğunlaşdırır.

    VALIGN=orta Hüceyrənin məzmununu şaquli olaraq mərkəzləşdirir.

    VALIGN=aşağı Hüceyrənin məzmununu onun alt sərhədinə uyğunlaşdırır.

    VALIGN atributu xana daxilində mətn və qrafikləri şaquli olaraq düzləşdirir. üst, orta, alt.
    VALIGN=yuxarı Hüceyrənin məzmununu yuxarı sərhədinə uyğunlaşdırır. üst, üst, üst.
    VALIGN=orta Hüceyrənin məzmununu şaquli olaraq mərkəzləşdirir. orta, orta, orta.
    VALIGN=alt Hüceyrənin məzmununu onun alt sərhədinə uyğunlaşdırır. alt, alt, alt.

    BORDER atributu

    Etiketdə<ТАВLЕ>tez-tez sərhədlərin, yəni cədvəl hüceyrələrini və cədvəlin özünü əhatə edən xətlərin necə görünəcəyini müəyyənləşdirir. Çərçivəni göstərməsəniz, xətləri olmayan bir cədvəl alacaqsınız, lakin onlar üçün yer ayrılacaq. Eyni nəticəni təyin etməklə əldə etmək olar<ТАВLЕ ВОRDER=0>. Bəzən haşiyəni daha qalın etmək istəyirsən ki, daha yaxşı seçilsin. Şəkil və ya mətnə ​​diqqəti cəlb etmək üçün yalnız qalın haşiyələr təyin edə bilərsiniz. İç-içə cədvəllər yaradarkən, onları ayırd etməyi asanlaşdırmaq üçün müxtəlif cədvəllər üçün müxtəlif qalınlıqda haşiyələr hazırlamalısınız.

    CELLSPACING atributu

    CELLSPACING atributu xanalar arasındakı boşluqların enini piksellə müəyyən edir. Bu atribut göstərilməyibsə, standart dəyər iki pikseldir. CELLSPACING= atributundan istifadə edərək, mətn və qrafikləri istədiyiniz yerdə yerləşdirə bilərsiniz. Boş yer qoymaq istəyirsinizsə, xanaya boşluq yaza bilərsiniz.

    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat

    BGCOLOR atributu

    Bu atribut fon rəngini təyin etməyə imkan verir. Hansı teqlə (TABLE, TR, TD) istifadə olunduğundan asılı olaraq, fon rəngi bütün cədvəl, sıra və ya fərdi xana üçün təyin oluna bilər. Bu atributun dəyəri RGB kodu və ya standart rəng adıdır.

    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat
    Mətn və ya məlumat Mətn və ya məlumat Mətn və ya məlumat

    BACKGROUND atributu

    Bu atribut cədvəllər üçün fon şəklini təyin edir. TABLE və TD teqlərinə aiddir. Onun dəyəri fon şəkli faylının URL-dir. Bu atributun istifadəsi aşağıda müzakirə olunur.

    Səhifə dizaynında cədvəllərdən istifadə

    Cədvəllərin yaxşı tərəfi ondan ibarətdir ki, istəsəniz onların sərhədlərini görünməz edə bilərsiniz. Bu etiketdən istifadə etməyə imkan verir<ТАВLЕ>mətn və qrafikləri səhifəyə gözəl yerləşdirin. Salam etiket<ТАВLЕ>HTML-də yeganə güclü formatlama vasitəsi olaraq qalır. Veb səhifə dizaynerləri indi çap səhifəsi dizaynerləri kimi ağ boşluqdan istifadə ilə bağlı demək olar ki, eyni sərbəstliyə malikdirlər. Cədvəllər mətnin Web səhifələrində iyerarxik yerləşdirilməsindən uzaqlaşmağın ən yaxşı yoludur.

    Brauzer cədvəlləri dəstəkləyirsə, adətən onlardan istifadə etməklə əldə edilən ən maraqlı effektləri düzgün göstərəcək

    Ural Dövlət Pedaqoji Universiteti

    Xoş gəldiniz!

    "WEB mənimsənilməsinin əsasları" təlim kursu

    Rəngarəng masaların yaradılması

    Bəzi brauzerlər rəngləri göstərməyə imkan verir. Əsasən istifadə etdiyiniz brauzerdən asılı olaraq cədvəli rəngləndirməyin bir neçə yolu var.

    Netscape Navigator-da rəngli haşiyələr. Masanı nəinki gözəl haşiyə ilə əhatə edə bilərsiniz, həm də onu mətn və fon rənglərindən fərqli bir rəngə təyin edə bilərsiniz. Sadə boz GIF (və ya fon kimi olmasını istədiyiniz hər hansı GIF) yaradın və onu etiketdə müəyyənləşdirin<ВODY>səhifə fonu kimi. Sonra səhifənin fon rəngini təyin edin. Nəticədə etiketiniz<ВОDY>bu kimi bir şey görünəcək:

    Siz ikiqat fon yaratmısınız - GIF və müəyyən bir rəng. Nəticədə, fon rəngi bütün masa haşiyələrində və üfüqi xətlərdə görünəcək (<НR>). Fon GIF-inizin boz olub-olmamasından asılı olmayaraq, rəngli xətlər və masa haşiyələri nəzərəçarpacaq dərəcədə fərqlənəcək. Fon GIF-i çox mürəkkəb deyilsə, səhifə yükləmə müddəti yalnız bir qədər artacaq.