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
. 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 | Və | Yox.
Misal 12.1. Cədvəlin yaradılması
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 olarHTML cədvəlləri dörd addımda yaradılır. 1. İlk addımda html kodunu istifadə edərək cüt etiket 2. İkinci mərhələdə biz formalaşdırırıq xətlər masalar, qoşalaşmış etiketlərin yerləşdirilməsi 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 4. Yaxşı, son mərhələdə biz onları elementlərin içərisinə yerləşdiririk 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 Cədvəllər yaradarkən bəzi qaydaları yadda saxlamaq lazımdır: Qoşalaşmış etiketlə başlayaq Ekran: Html cədvəlini məntiqi olaraq hissələrə - bölmələrə bölmək olar. Üç növ bölmə var: Cədvəl başlığı bölməsi qoşalaşmış etiketdən istifadə etməklə formalaşır . Ü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 Bədən bölməsi qoşalanmış etiketlə yaradılır Sonlandırma bölməsi qoşalaşmış etiketlə formalaşır Bütün bu qoşalaşmış teqlərdə teqlər olmalıdır 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 kolspan Və sıra aralığı etiketlər Nümunə nəticə: 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 Hüceyrələri birləşdirərkən səhv html koduna bir nümunə: 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. Bu yazıda biz artıq bir etiket atributuna rast gəldik Sərhəd atributuna əlavə olaraq, etiket tərəfindən dəstəklənən bir neçə vacib atribut da var 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: 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 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 ( 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 Əsas etiket atributları Əsas etiket atributlarının təyin edilməsi 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 yaratmaq üçün sizə lazım olan əsas elementlər bunlardır: HTML sənədi yaradın və ona aşağıdakı kodu kopyalayın:
Brauzerdə sənəd belə görünəcək: Hansı kod sətirlərinin nəyə cavabdeh olduğunu anlayaq. 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. 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 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. 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.ТR>. 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>ТD>. Teqlərin sayı<ТD>ТD>bir sıra xanaların sayını müəyyən edir
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>Т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>Т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.<ТН>.
Tag
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. 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.
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 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.
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. 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.
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.
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.
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 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.
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.
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. 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
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. |
---|