Cədvəl xüsusiyyətlərini öyrənməklə HTML masalarından ən çox faydalanmaq
HTML masa atributları HTML masalar üzərində daha çox nəzarət verir. Onlara daha maraqlı və səhifənin görünüşünü dəyişdirmək üçün masalara aid bir çox xüsusiyyət var.
HTML TABLE Element xüsusiyyətləri
HTML5-də element qlobal atributları və bir başqa xüsusiyyətdən istifadə edir:. Və yalnız 1 və ya boş dəyəri var (yəni border = "") dəyişdi. Sərhəd genişliyini dəyişdirmək istəyirsinizsə, sərhəd genişliyi CSS xüsusiyyətindən istifadə etməlisiniz.
Müvafiq HTML5 masa xüsusiyyətləri haqqında məlumat almaq üçün aşağıya baxın.
HTML5-də köhnəlmiş HTML 4.01 spesifikasiyasının bir hissəsi olan bir neçə atribut var:
- Cədvəlin TD və TH elementlərində CSS padding mülkiyyətindən istifadə edin.
- Cədvəldə CSS mülk sərhəd aralığından istifadə edin.
- -CSS üslublarından istifadə sərhəd rəngli: qara; və masa üzərində sərhəd tərzi.
- -CSS üslublarından istifadə sərhəd rəngli: qara; və masanın müvafiq elementləri üzərində sərhəd tərzi.
- Bunun əvəzində cədvəlin strukturunu CAPTION-da təsvir etməli və bütün masanın bir şablonda yerləşdirilməsi və bir təsvirdə təsvir etməsi lazımdır. Alternativ olaraq, heç bir izahat lazım deyil ki, masanın strukturunu asanlaşdırsın.
- CSS-in genişlik xüsusiyyətini istifadə edin.
Və HTML 4.01-də qadağan edilmiş və HTML5-də köhnəlmiş bir xüsusiyyət.
HTML 4.01 TABLO Öznitelikleri haqqında daha çox məlumat əldə edin.
- hizalanma - Bunun yerine CSS margin mülkünü istifadə edin.
Hər hansı bir HTML spesifikasiyasının bir hissəsi olmayan bir neçə atribut var.
Siz dəstəkləyən brauzerlərin onları idarə edə biləcəyini bildiyiniz halda bu xüsusiyyətləri istifadə edin və etibarlı HTML haqqında düşünməyin.
- Bunun əvəzinə CSS mülkiyyət fon rəngini istifadə edin.
- bordercolor - CSS mülkiyyətinin sərhəd rəngini istifadə edin.
- borderkolorlight - CSS mülkiyyətinin sərhəd rəngini istifadə edin.
- bordercolordark-CSS-in əmlak sərhəd rəngini istifadə edin.
- cols - Bu xüsusiyyətə alternativ yoxdur.
- hündürlüyü-CSS xüsusiyyət hündürlüyünü istifadə edin.
- Bunun əvəzinə CSS əmlak marjını istifadə edin.
- Bunun əvəzinə CSS əmlak marjını istifadə edin.
- Bunun əvəzinə CSS mülkiyyətini ağ-boşluqdan istifadə edin.
- CSS əmlakını əvəzinə şaquli-align istifadə edin.
Brauzerin Xüsusi TABLO xüsusiyyətləri haqqında daha çox məlumat əldə edin.
HTML5 TABLE Element Xüsusiyyətləri
Yuxarıda qeyd etdiyimiz kimi, HTML5 TABLE elementində etibarlı olan qlobal atributlardan kənarda yalnız bir xüsusiyyət var: border.
Sərhəd atributu bütün masanın ətrafında bir sərhəd və onun içərisində olan bütün hüceyrələri müəyyən etmək üçün istifadə olunur. HTML5 spesifikasiyasına daxil ediləcəyinə dair bir sual var idi, amma sadəcə stil təsiri ilə müqayisədə masa strukturu haqqında məlumat verdiyindən qaldı.
Sərhəd atributunu əlavə etmək üçün sərhəd və boşluq varsa (və ya özəlliyi tərk etməsə) dəyəri 1-ə təyin edərsiniz. Çox brauzerlər də sərhəd üçün heç bir sərhəd və hər hansı digər tam dəyər (2, 3, 30, 500, və s.) Sərhəd genişliyini pikseldə elan etməyə dəstək verəcək, lakin bu HTML5-də köhnəlmişdir. Bunun yerinə, sərhəd genişliyi və digər üslubları müəyyən etmək üçün CSS sərhəd stilinin xüsusiyyətlərini istifadə etməlisiniz.
Sərhədi olan bir masa yaratmaq üçün yaz:
border = "1" >
Bu bir sərhədi olan bir masa
HTML5-də köhnəlmiş HTML 4.01 xüsusiyyətləri var. HTML 4.01 sənədlərini yazmağı planlaşdırırsanız, onları öyrənə bilərsiniz, əksinə onları göz ardı edə bilərsiniz. Bu xüsusiyyətlərin əksəriyyəti yuxarıda təsvir olunan alternativlərə malikdir.
HTML5-də (və HTML 4.01) etibarlı olan elementin xüsusiyyətlərini təsvir edirik. Bu, HTML 4.01-də etibarlı olan HTML5-də köhnəlmiş TABLO xüsusiyyətlərini təsvir edir. HTML 4.01 sənədlərini hələ də yazarsanız, bu xüsusiyyətləri istifadə edə bilərsiniz, lakin onların əksəriyyətinin HTML5-ə keçirdiyiniz zaman səhifələrinizin gələcəklə müqayisə olmasını təmin edən alternativlər var.
Valid HTML 4.01 öznitelikleri
Yuxarıda təsvir etdiyimiz xüsusiyyət.
HTML5-dən HTML 4.01-də olan fərq yalnız pikselin sərhədinin genişliyini müəyyən etmək üçün hər hansı bir tam ədədi (0, 1, 2, 15, 20, 200, və s.) Müəyyən edə bilərsiniz.
5px sərhədi olan bir masa qurmaq üçün yaz:
border = "5" >
Bu cədvəldə 5px sərhəd var.
Sərhədləri olan iki masa nümunəsinə baxın.
Atribut hüceyrə sərhədləri və hüceyrənin məzmunu arasında yer məbləğini müəyyənləşdirir. Varsayılan iki pikseldir. Məzmun və sərhədlər arasında boşluq yoxdursa, cellpadding'i 0-ə təyin edin.
20-ə qədər hüceyrə doldurulması üçün yaz:
cellpadding = "20" >
Bu cədvəldə bir cellpadding var.
Hücre sərhədləri 20 piksel ilə ayrılır.
Mobil masaüstü ilə bir masa örneğine bax
Atribut masa hüceyrələri və hüceyrə məzmunu arasındakı boşluq məbləğini müəyyənləşdirir. Hücre pəncərəsi kimi, u mənim iki pikselə bərabərdir, belə ki, heç bir hüceyrə aralığını istəmirsinizsə, onu 0-ə təyin etməlisiniz.
Cədvəlin hüceyrə aralığını əlavə etmək üçün aşağıdakıları yazın:
cellspacing = "20" >
Bu cədvəldə 20 ədəd bir hüceyrə sahəsi var.
Hücrelər 20 piksel ilə ayrılacaq.
Cellspacing ilə bir masaya baxın
Atribut, bir masanın kənarını əhatə edən sərhədin hansı hissələrinin görünəcəyini müəyyən edir. Masanızın dörd tərəfi, hər tərəfi, yuxarı və aşağı, sol və sağa və ya heç birinə çərçivə düzəldə bilərsiniz.
Yalnız sol tərəfi sərhədi olan bir masa üçün HTML:
frame = "lhs" >
Bu masa
olacaq
yalnız
sol tərəfli çərçivə.
Alt çərçivədə başqa bir nümunə:
frame = "aşağıda" >
Bu masanın altındakı bir çərçivə var.
Çərçivələri olan bəzi masaları yoxlayın
Öznitelik, çərçivə xüsusiyyətinə bənzəyir, yalnız masanın hüdudları ətrafındakı sərhədləri təsir göstərir. Bütün hüceyrələrdə, sütunlar arasında, TBODY və TFOOT və ya heç kimi qruplar arasında qaydalar təyin edə bilərsiniz.
Yalnız satırlar arasında xətləri olan bir masa qurmaq üçün yaz:
qaydaları = "satırlar" >
Bu 4x4 masa
satırlar deyil sütunlar
ilə təsvir edilmişdir
qaydaları öznitəsidir.
Sütunlar arasında isə başqa bir xətt var:
qaydaları = "cols" >
Bu
bir masa
burada
sütunlar
vurğulandı
Burada qaydaları olan bir masa nümunəsi
Atribut ekran oxucuları və digər istifadəçi agentləri üçün cədvəl haqqında məlumat verir. Xülasə xüsusiyyətindən istifadə etmək üçün, cədvəlin qısa təsviri yazmaq və bu xüsusiyyətin dəyəri olaraq qoyursunuz. Xülasə ən standart veb brauzerlərdə veb səhifəsində görünməyəcək.
Xülasə ilə sadə bir masanın yazılması necədir:
summary = "Bu doldurucu məlumatı ehtiva edən nümunə bir masa. Bu cədvəlin məqsədi xülasə göstərməkdir." >
sütun 1 satır 1
sütun 2 satır 1
sütun 1 satır 2
sütun 2 satır 2
Xülasə ilə bir masa baxın
Öznitelik, masanın genişliğini piksel olaraq ya da konteyner elementinin yüzdesi olaraq müəyyən edir. Genişlik müəyyən edilmədikdə, masa maksimal genişliyi ana elementin eni ilə eyni olan məzmunu göstərmək üçün lazım olduğu qədər çox yer tutur.
Pikslərdə müəyyən bir eni olan bir masa qurmaq üçün yaz:
width = "300" >
Bu masa, konteynerin eni 80% -dir.
Ana elementin bir payı olan genişliyi olan bir masa qurmaq üçün yaz:
width = "80%" >
Bu masa, konteynerin eni 80% -dir.
Genişliklə bir masa nümunəsinə baxın
HTML 4.01 TABLO xüsusiyyətindən kənar qaldırıldı
HTML 4.01-də qadağan edilmiş və HTML5-də köhnəlmiş olan TABLE elementinin bir xarakteri var: align . Bu xüsusiyyət, masanın yanında olan mətnə görə səhifənin yerləşdiyi yerləri təyin etməyə imkan verir. Bu xüsusiyyət HTML 4.01'de qadağan edilmiş və onu istifadə etməməlisiniz. Bunun əvəzinə CSS xüsusiyyətini və ya margin-left istifadə etməlisiniz: auto; və margin-right: auto; üslublar. Float özelliği, align özniteliğinin ne olduğuna daha yaxın bir nəticə verir, lakin sayfanın içeriğinin görüntülenme şeklini etkileyebilir. Margin-right: avtomatik; margin-left: avtomatik; W3C alternativ olaraq tövsiyə edir.
Align xassəsini istifadə edərək, köhnəlmiş bir nümunə:
align = "sağ" >
Bu masa düzgün hizalı
Mətn ətrafındakı sola axır
Align xassəsini istifadə edərək köhnəlmiş bir nümunəyə baxın.
Və eyni təsiri (etibarsız) olan HTML ilə əldə etmək üçün yaz:
style = "float: sağ;" >
Bu masa düzgün hizalı
Mətn ətrafındakı sola axır
Aşağıdakı hər hansı bir HTML spesifikasiyasının bir hissəsi olmayan TABLE funksiyalarını izah edir.
Əvvəlki məlumat HTML 4.01-də etibarlı, lakin HTML5-də köhnəlmiş olan HTML elementinin xüsusiyyətlərini təsvir edir.
Aşağıdakı hər hansı bir hazırkı dəqiqədə etibarlı olmayan TABLE funksiyalarını təsvir edir. Sayfalarınızın doğrulaması və istifadəçilərinizin bu elementləri dəstəkləyən bir brauzer istifadə etməməsi barədə qayğı yoxdur, bu elementləri istifadə edə bilərsiniz. Amma onların əksəriyyəti ya müasir brauzerlərdə dəstəklənmir, ya da daha çox standartlara uyğun alternativlər var.
Bu xüsusiyyətləri HTML masalarından istifadə etməyi məsləhət görmürük .
Öznitelik CSS-nin geniş dəstəklənməsindən əvvəl daxil edilmiş köhnə bir xüsusiyyətdir. Masanın arka plan rəngini dəyişməyə imkan verir. Bir rəng adını və ya hexadecimal kodunu təyin edə bilərsiniz. Bu xüsusiyyət hələ də bir çox brauzerdə işləyir, lakin gələcəkdə işləyən HTML üçün siz onu istifadə etməməlisiniz və bunun yerine CSS-ni istifadə etməlisiniz.
Bu xüsusiyyətə daha yaxşı alternativ stil mülkiyyətidir.
Bir masanın arka plan rengini dəyişdirmək üçün yaz:
style = "background-color: #ccc;" >
Bu cədvəldə gümüş bir fon var
Bgcolor xüsusiyyətinə bənzər, bordercolor xüsusiyyət özniteliğin rəngini dəyişməyə imkan verir. Bu xüsusiyyət yalnız Internet Explorer tərəfindən dəstəklənir. Bunun əvəzində sərhəd rəngli stil mülkiyyətindən istifadə etməlisiniz.
Masanızın sərhədinin rəngini dəyişdirmək üçün yaz:
style = "border-color: red;" >
Bu cədvəldə qırmızı sərhəd var.
Bordercolorlight və bordercolordark atributları, masa ətrafında bir 3D sərhəd yaratmağa imkan verən Internet Explorer-a daxil edilmişdir. Lakin, IE8 və yuxarı vəziyyətdə olduğu kimi, bu yalnız IE7 Standartları Modu və Quirks rejimində dəstəklənir . Microsoft bu xüsusiyyətlərin artıq dəstəklənməyəcəyini bildirir.
Qısa bir müddətdə, TABLE elementindəki cols xüsusiyyətləri brauzerlərə bir masanın neçə sütunun olduğunu bilmək üçün təklif olundu. Buraya böyük masaların göstərilməsini sürətləndirmək kömək edərdi. Bununla belə, yalnız Internet Explorer tərəfindən və IE8 və yuxarı səviyyədə olduğu kimi, bu yalnız IE7 Standartları Modu və Quirks Mode'da dəstəklənir.
Bir genişlik özniteliğinin (HTML5-də köhnəlmiş) olduğu üçün bir çox insanın da masalar üçün bir boyun atributu olduğu varsayılıyor. Cədvəllərin genişliyi və ya CSS və ya genişlik xüsusiyyətində müəyyən genişliklərə uyğun olduğundan, hündürlüyü məhdudlaşdırıla bilməz. Bunun əvəzinə brauzerlər hündürlüyü atributu masanın minimum hündürlüyünü müəyyən etməyə imkan verdi. Cədvəl həmin hündürlükdən daha uzun olsaydı, daha uzun görünürdü. Amma əmlakı istifadə etməlisiniz
CSS hündürlüyünün xüsusiyyətləri ilə CSS xüsusiyyətini istifadə edərkən hündürlüyü qadağan edə bilərsiniz.
Bir masada minimum hündürlüyü təyin etmək üçün yaz:
style = "height: 30em;" >
Bu masa ən azı 30 ems.
Cədvəlin sol və sağ tərəfləri (hspace) və üst / alt (vspace) ətrafında iki xüsusiyyət və əlavə yer. Bunun yerinə stil mülkiyyətindən istifadə etməlisiniz.
Dikey sahəni 20 pikselə və üfüqi yerə 40 pikselə qurmaq üçün yaz:
style = "margin: 20px 40px;"
Bu cədvəldə 20 piksel vspace və 40 piksel hspace var.
Öznitelik, masanın məzmunu üst elementin və ya pəncərənin kənarında sarılmadığını və ya üfüqi kaydırmayı dayandırmadığını müəyyən edən bir boolean atributudur. Bunun yerine, hər bir masa hücresinin CSS xüsusiyyətini istifadə edərək, sarma xüsusiyyətlərini müəyyənləşdirməlisiniz.
Mətnin bir çox sütununu sarmamaq üçün yaz:
style = "white-space: nowrap;" > Bu, bir tonluq məzmunlu sütundur. Lakin konteynerdən daha geniş olsa da, mətn sonrakı xəttə keçməməlidir, lakin brauzerin bütün görünüşünü görmək üçün brauzer pəncərəsini üfüqi hərəkət etmək məcburiyyətindədir.
Nəhayət, atribut hər hüceyrənin məzmunu hüceyrə daxilində dikey olaraq hizalanmalıdır. Bu etibarsız atributu əvəzinə, həndəsi dəyişdirmək istədiyiniz hər bir hüceyrədə CSS xüsusiyyətindən istifadə etməlisiniz. Hüceyrənin məzmunu digər, daha böyük hüceyrələr tərəfindən yaradılan mövcud məkandan daha az olmadıqda, bu üslubun təsirlərini görməyəcəksiniz.
Bir hüceyrənin altına (orta deyil, default kimi) hizalanmasına məcbur etmək üçün yaz:
Bu hüceyrə qalanlardan daha uzundur və hündürlüyü daha uzun olmağa məcbur edəcəkdir. Beləliklə, şaquli hizalı hücrenin altındakı hizaya uyğun olduğunu görəcəksiniz.
style = "vertical-align: bottom;" > Altındakı məzmun.
İçindəki məzmun.