Cədvəllər müxtəlif məlumatların təqdimatlarda, mühazirələrdə, flayerlərdə və sairdə təqdim edilməsi üçün geniş istifadə olunan elementdir. Cədvəllər öz aydınlığına, çoxşaxəliliyinə və sadəliyinə görə lazımi materialı oxucuya daha yaxşı çatdırmaq üçün internet saytlarında da geniş istifadə olunur. Cədvəllərə üslubların tam gücünü əlavə etməklə siz cədvəlləri veb-sayt dizaynına çox uğurla uyğunlaşdıra və cədvəl məlumatlarını aydın və gözəl təqdim edə bilərsiniz.
Cədvəlin eni
Varsayılan olaraq, cədvəlin eni, içindəki cədvəl məlumatlarının həcminə əsasən brauzerin özü tərəfindən təyin olunur. Hüceyrələrdə çoxlu mətn varsa, cədvəl onun üçün mövcud olan bütün genişliyi tutacaq və kifayət qədər mətn yoxdursa, cədvəlin eni avtomatik olaraq azalacaq. Bir səhifədə bir neçə cədvəl varsa, onların müxtəlif genişlikləri bəzən diqqətsiz görünür. Beləliklə, 1-ci Nümunədə göstərildiyi kimi cədvəlin enini faizlər, piksellər, ems və ya hər hansı digər CSS vahidləri ilə açıq şəkildə təyin etmək daha yaxşıdır.
Misal 1: Cədvəl eni faizlə
Cədvəl ( en: 100%; ) .tbl-orta ( en: 60%; ) .tbl-kiçik ( en: 200px; )
Bu nümunədə bütün cədvəllərə 100% eni tətbiq olunur. Yenə də siniflər əvvəlcədən yaradılmış sinifdən istifadə edərək seçilmiş cədvəllər üçün eni təyin etməyə kömək edir. Cədvəl enini 200 piksel təyin etmək üçün elementə əlavə etməlisiniz
Bu nümunədə, səhifədəki bütün cədvəllər mərkəzə uyğunlaşdırılıb.
Fon rəngi
Bütün cədvəl hüceyrələrinin fon rəngi eyni zamanda cədvəl seçicisinə tətbiq olunan fon xüsusiyyəti vasitəsilə təyin olunur. Bu vəziyyətdə üslublardan istifadə qaydalarını, xüsusən də element xüsusiyyətlərinin miras qalmasını xatırlamalısınız. Cədvəllə eyni vaxtda td və ya ci seçici üçün rəng təyin etmisinizsə, o zaman fon kimi təyin olunacaq (nümunə 3).
Misal 3: Fon rəngi
| Bağlantı növü | ||
|---|---|---|
| mil | qol | |
| Pulsuz | H9 | D10 |
| Normal | N9 | I s 9 |
| Sıx | P9 | |
Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 1.
düyü. 1. Fon rəngini dəyişdirin
Əgər biz zebra naxışını düzəltmək istəyiriksə, bu, müxtəlif rəngli sətirlərə verilən addır, onda tr seçicisinə əlavə edərək :nth-child psevdo-sinifindən istifadə etməliyik. Zebranın başlığına deyil, yalnız masanın gövdəsinə uzanması üçün elementlərdən istifadə edərək onları bir-birindən ayırırıq. Və
(misal 4).Nümunə 4: Zebra yaratmaq
| Ölçü intervalları, mm | İT tolerantlığı, µm, ixtisaslar üçün | |||
|---|---|---|---|---|
| 5 | 6 | 7 | 8 | |
| 3-ə qədər | 4 | 6 | 10 | 14 |
| 3-dən 6-ya qədər | 5 | 8 | 12 | 18 |
| 6-dan 10-a qədər | 6 | 9 | 15 | 22 |
| 10-dan 18-ə qədər | 8 | 11 | 18 | 27 |
| 18-dən 30-a qədər | 9 | 13 | 21 | 33 |
| 30-dan 50-yə qədər | 11 | 16 | 25 | 39 |
| 50-dən 80-ə qədər | 13 | 19 | 30 | 46 |
Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 2.
düyü. 2. Zebra
:nth-child seçicisinin cüt dəyəri bütün cüt nömrəli sətirlərə üslubu tətbiq edir və onların fon rəngini təyin edir. Siz həmçinin onu təkə dəyişə bilərsiniz boz Tək sıralar vurğulanacaq.
Eynilə, sətirlər deyil, sütunlar rənglə vurğulanır.
Hüceyrələrin daxili kənarları
Margin xananın sərhədi ilə onun məzmunu arasındakı məsafədir. Haşiyələr olmadan, cədvəldəki mətn çərçivəyə "yapışır" və bununla da onun qavranılmasını pisləşdirir, lakin kənarların əlavə edilməsi mətnin oxunuşunu yaxşılaşdırır. Bu məqsədlə yuxarıda 3 və 4-cü misallarda göstərildiyi kimi td və ya th seçicisi ilə işləyən doldurma stili xassəsindən istifadə olunur. Adətən, tək dəyər təyin edilir, sonra isə xananın məzmunu ətrafında boş yeri təyin edir. bir anda bütün tərəflər. Fərqli sahələri şaquli (birinci dəyər) və üfüqi (ikinci dəyər) təyin etmək lazım olduqda iki dəyər yazılır.
Hüceyrələr arasındakı məsafə
Hüceyrələr üçün haşiyə və ya fon rəngi təyin etmədiyiniz halda görünməyən xanalar arasında az miqdarda boş yer var. Bu interval ilkin olaraq 2px təşkil edir və onu cədvəl seçicisinə əlavə etməklə haşiyə aralığı xassəsindən istifadə etməklə dəyişdirilə bilər (Nümunə 5).
Misal 5: Sərhəd aralığından istifadə
Cədvəl ( haşiyə aralığı: 3px; /* Hüceyrələr arasındakı məsafə */ ) ad th ( fon: #e08156; /* Başlığın fon rəngi */ rəng: #333; /* Mətn rəngi */ ) td, th ( doldurma: 5px ; /* Hüceyrələrdəki sahələr */ fon: #4c715b /* Hüceyrələrin fon rəngi */ color: #f5e8d0;
Bu üslubu hər hansı bir cədvələ əlavə etməklə Şəkildə göstərilən nəticəni alırıq. 3.
düyü. 3. Hüceyrələr arasındakı məsafə ilə cədvəl görünüşü
Sərhəd-daralma xassəsi collapse dəyəri ilə cədvələ əlavə olunarsa, hüdudlar arası boşluq nəzərə alınmır, çünki xanalar arasında artıq məsafə yoxdur.
Sərhədlər və çərçivələr
Bir hüceyrənin məzmununu digərindən aydın şəkildə ayırmaq üçün xanalara sərhədlər əlavə edilir. Onlar elementlərə tətbiq olunan sərhəd stili xüsusiyyəti ilə yaradılmışdır (
Nümunə 6: Cədvəl haşiyələri yaratarkən border-collapse xassəsindən istifadə
| O | X | X |
| O | O | X |
| X | X | O |
Sərhəd-yıxılma xassəsi olan və olmayan cədvəl haşiyələri arasındakı fərq Şəkil 1-də göstərilmişdir. 4.
düyü. 4. Sərhəd-daralmadan istifadə edərkən cədvəl görünüşü
Şəkildə. Şəkil 4a standart cədvəl çərçivəsini göstərir. Nəzərə alın ki, cədvəlin içərisində bütün xətlər ikiqat qalınlığa malikdir. Haşiyə-daralma əlavə etməklə bu xüsusiyyət aradan qaldırılır və bütün xətlərin qalınlığı eyni olur (şəkil 4b).
Xətlərin xanaların hər tərəfində olması lazım deyil, lakin bir sıra və ya sütunu digərindən ayırmaq üçün tərtib edilə bilər. Bunun üçün biz border-bottom , border-left və digər oxşar xassələrdən istifadə edirik. Elementlərə sərhədlər tətbiq edin
Misal 7. Sətirlər arasındakı xətlər
| Bağlantı növü | Açar yolunun eni üçün tolerantlıq sahələri | |
|---|---|---|
| mil | qol | |
| Pulsuz | H9 | D10 |
| Normal | N9 | I s 9 |
| Sıx | P9 | |
Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 5.
düyü. 5. Üfüqi xətləri olan cədvəl
Varsayılan olaraq, cədvəl xanasındakı mətn sola düzülür və mərkəzə düzülür. İstisna elementdir
Nümunə 8: Hüceyrə məzmununun üfüqi olaraq hizalanması
| Başlıq 1 | Hüceyrə 1 | Hüceyrə 2 |
|---|---|---|
| Başlıq 2 | Hüceyrə 3 | Hüceyrə 4 |
Bu nümunədə məzmun
düyü. 6. Hüceyrələrdə mətnin düzülməsi
Hüceyrədəki şaquli düzülmə, başqa cür qeyd edilmədiyi təqdirdə həmişə mərkəzdədir. Bu, hər zaman əlverişli deyil, xüsusən də hündürlüyü hündürlüyə görə dəyişən cədvəllər üçün. Bu halda, 9-cu nümunədə göstərildiyi kimi, üst dəyəri ilə şaquli align xassəsindən istifadə edərək düzülmə xananın yuxarı kənarına təyin edilir.
Nümunə 9. Hüceyrə məzmununun şaquli düzülüşü
| Bağlantı növü | Açar yolunun eni üçün tolerantlıq sahələri | |
|---|---|---|
| mil | qol | |
| Pulsuz | H9 | D10 |
| Normal | N9 | I s 9 |
| Sıx | P9 | |
Bu nümunədə mətn yuxarı kənara düzülür. Nümunənin nəticəsi Şəkildə göstərilmişdir. 7.
Cədvəllər hipermətn dilinin ayrılmaz elementidir HTML işarələmə, müxtəlif məlumatların strukturlaşdırılması və rahat təqdimatı üçün hələ də aktual olaraq qalır.
Uzun müddət əvvəl, veb-saytlar ilk növbədə cədvəl şəklində tərtib edildikdə, cədvəllər çox tələb olunurdu və yeni resursun demək olar ki, bütün çərçivəsini təşkil edirdi. Daha sonra elementin əhəmiyyəti bloklara (div) nisbətən populyarlıqda azaldı, onun köməyi ilə layout imkanları həm masaüstü, həm də kompüterlər üçün daha genişləndi. mobil versiyaları saytlar.
Hal-hazırda cədvəllər, məsələn, qiymət siyahıları, siyahılar, xarakteristikalar, anketlər və daha çox şey üçün istifadə olunur və Cascading Style Sheets (CSS) istifadə edərək, biz sənəddə cədvəllərin vizual təqdimatını yaxşılaşdıra bilərik. Burada mən HTML cədvəllərinin mənbə kodu ilə dizayn edilməsinə dair bir neçə nümunə təqdim edəcəyəm, sonradan layihənizi inkişaf etdirərkən istifadə edə bilərsiniz.
CSS ilə Styling Cədvəlləri
Cədvəl üslubu müəyyən teqlər üçün təyin edilmiş CSS xüsusiyyətləri ilə HTML-də qurulmuş hazır cədvəldir. Ümid edirəm ki, alınanı necə və hara yapışdıracağınızı bilirsiniz mənbə kodu nəticəni ekranda göstərmək üçün.
Əvvəlcə cədvəlin ümumi HTML kodunu verəcəyəm, sonra onu stilləşdirəcəyik.
| ad | Təsvir | Qiymət |
| ad | Xüsusiyyətlər | Qiymət |
| Ad #2 | Xüsusiyyətlər | Qiymət |
| Ad #3 | Xüsusiyyətlər | Qiymət |
CSS Şablonları
Şablonlar orijinal olduqlarını iddia etmir, lakin çoxları üçün faydalı ola bilər.
Cədvəl (en: 100%; haşiyə-daralma: yıxılma;) cədvəl td (doldurma: 12px 16px;) cədvəl başlığı tr (şrift-ağırlıq: qalın; haşiyə-yuxarı: 1px bərk #e8e9eb;) cədvəl tr (sərhəd-alt: 1px bərk #e8e9eb;) masa tbody tr:hover (fon: #e8f6ff;)
Yeri gəlmişkən, etiketdən istifadə etməsəydik , sonra psevdo-class:nth-child(1) istifadə edərək birinci sıra üçün öz üslublarınızı təyin edə bilərsiniz. Cədvəl (en: 100%; haşiyə-daralma: çökmə;) cədvəl başlığı tr (rəng: #ffffff; şrift-ağırlıq: qalın; fon: #00bf80;) masa başlığı tr td (sərhəd: 1px bərk #01ab73;) cədvəl tbody tr td (sərhəd: 1px bərk #e8e9eb;) cədvəl tbody tr:nth-child(2n) (fon: #f4f4f4;) masa tbody tr:hover (fon: #ebffe8;) Cədvəl (en: 100%; haşiyə-daralma: ayrı; haşiyə aralığı: 4px;) masa başlığı tr (rəng: #ffffff; şrift-çəkisi: qalın;) cədvəl başlığı tr td (sərhəd-radius: 4px 4px 0 0; fon: #2e82c3;) cədvəl tbody tr td (sərhəd: 1px bərk #2e82c3; haşiyə radiusu: 4px; fon: #cbdfef;) cədvəl tbody tr td: hover (fon: #a2c3dd; keçid müddəti: 0.2s;) Cədvəl (en: 100%; mətnin düzülməsi: mərkəz; haşiyə-alt: 2px bərk #dfdfdf; haşiyə-radius: 6px; haşiyə-daralma: ayrı; sərhəd aralığı: 0px;) masa başlığı tr (rəng: #ffffff; font-weight: qalın; fon: #c83240;) cədvəl tr td (sərhəd-sağ: 1px bərk #dfdfdf;) cədvəl tr td:sonuncu uşaq (sərhəd-sağ: 0px;) cədvəl tbody tr:nth-child(1n) ) (fon: #f6f6f6;) cədvəl tbody tr:nth-child(2n) (fon: #e6e6e6;) table tbody tr:hover (fon: #ffe8e8; keçid müddəti: 0.6s;) Şablonlarda istifadə olunan CSS xüsusiyyətləri nə deməkdir: Cədvəl məlumatları- cədvəldə göstərilə bilən və məntiqi olaraq sütun və sətirlərə bölünə bilən məlumatlar. Veb səhifələrdə cədvəl məlumatlarını göstərmək üçün istifadə olunur. HTML etiketi Bir etiketin içərisində Varsayılan olaraq, cədvələ, eləcə də bütün digər elementlərə haşiyə əlavə etmək üçün veb-səhifədəki HTML cədvəli sərhədsiz göstərilir; CSS mülkiyyəti sərhəd. Ancaq yalnız bir elementə bir çərçivə əlavə etsəniz, buna diqqət yetirməyə dəyər Cədvəl, th, td ( haşiyə: 1px bərk qara; ) Sınayın » İndi həm cədvəlin, həm də xanaların sərhədləri var və hər bir xana və cədvəlin öz sərhədləri var. Nəticədə, çərçivələr arasında boş yer yarandı, bu boşluğun ölçüsü bütün cədvəl üçün təyin olunan sərhəd aralığı xüsusiyyəti ilə idarə oluna bilər; Başqa sözlə, siz ayrı-ayrılıqda müxtəlif hüceyrələr arasındakı məsafəni idarə edə bilməzsiniz. Sərhəd aralığı xassəsinin dəyəri 0-dan istifadə edərək hüceyrələr arasındakı boşluqları aradan qaldırsanız belə, hüceyrələrin sərhədləri bir-birinə toxunaraq ölçüsü ikiqat artıracaq. Hüceyrə sərhədlərini birləşdirmək üçün border-collapse xüsusiyyətindən istifadə edin. Bunun iki mənası ola bilər: Cədvəl xanalarına sərhədlər əlavə edildikdən sonra xanaların məzmununun kənarlara çox yaxın olduğu nəzərə çarpdı. Əlavə etmək üçün boş yer Hüceyrələrin kənarları və onların məzmunu arasında doldurma xüsusiyyətindən istifadə edə bilərsiniz: Th, td ( padding: 7px; ) cəhd edin » Cədvəlin ölçüsü onun məzmunundan asılıdır, lakin tez-tez masa çox dar olduqda və onu uzatmaq lazım olduqda vəziyyətlər yaranır. Cədvəlin eni və hündürlüyü genişlik və hündürlük xassələrindən istifadə edərək dəyişdirilə bilər, istədiyiniz ölçüləri cədvəlin özünə və ya xanalara təyin edir: Cədvəl (en: 70%; ) ci (hündürlük: 50px; ) Sınayın » Varsayılan olaraq, cədvəl başlıq xanalarındakı mətn mərkəzə düzülür, adi xanalardakı mətn isə sola düzülür, mətnin üfüqi düzülməsinə nəzarət edə bilərsiniz; Vertikal align CSS xüsusiyyəti mətn məzmununun şaquli düzülməsinə nəzarət etməyə imkan verir. Varsayılan olaraq, mətn xanaların mərkəzinə şaquli olaraq düzülür. Şaquli düzülmə şaquli hizalama xassə dəyərlərindən birini istifadə edərək ləğv edilə bilər: Çoxlu məlumatı olan çoxlu sətirlərdən ibarət böyük cədvəllərə baxarkən, hansı verilənlərin müəyyən bir sıraya aid olduğunu izləmək çətin ola bilər. İstifadəçilərə yol tapmaqda kömək etmək üçün növbə ilə iki fərqli fon rəngindən istifadə edə bilərsiniz. Təsvir edilən effekti yaratmaq üçün sinif seçicisindən istifadə edərək onu cədvəlin hər ikinci sırasına əlavə edə bilərsiniz:
Hər digər sətirə sinif atributunun əlavə edilməsi olduqca yorucudur. Pseudo-class:nth-child bu problemin alternativ həllini təmin etmək üçün CSS3-ə əlavə edildi. İndi alternativ effekt yalnız əldə edilə bilər CSS istifadə edərək sənədin HTML işarələməsini dəyişdirmədən. Pseudo-class:nth-child istifadə edərək, aşağıdakılardan birini istifadə edərək cədvəlin bütün cüt və ya tək sıralarını seçə bilərsiniz. açar sözlər: cüt (cüt) və ya tək (tək): Tr:nth-child(tək) ( fon rəngi: #EAF2D3; ) Sınayın » Cədvəl məlumatlarının oxunaqlılığını yaxşılaşdırmağın başqa bir yolu, siçanınızı onun üzərinə gətirdiyiniz zaman cərgənin fon rəngini dəyişdirməkdir. Bu, cədvəlin istədiyiniz məzmununu vurğulamağa və məlumatların vizual qavrayışını artırmağa kömək edəcəkdir. Belə bir effekti həyata keçirmək çox sadədir, bunu etmək üçün psevdo-sinif əlavə etməlisiniz: masanın sıra seçicisinə hover və istədiyiniz fon rəngini təyin etməlisiniz: Tr:hover ( fon rəngi: #E0E0FF; ) Sınayın » HTML uyğunlaşdırılması Cədvəlin mərkəzləşdirilməsi yalnız cədvəlin eni onun əsas elementinin enindən kiçik olduqda mümkündür. Cədvəli mərkəzə uyğunlaşdırmaq üçün ona ən azı iki dəyər verərək margin xassəsindən istifadə etməlisiniz: birinci dəyər cədvəlin yuxarı və aşağı hissəsindəki xarici haşiyə üçün cavabdeh olacaq, ikinci dəyər isə mərkəzə avtomatik hizalanma: Cədvəl ( kənar: 10px avtomatik; ) Sınayın » Cədvəlin yuxarı və aşağı hissəsində fərqli kənarlara ehtiyacınız varsa, marja xassəsini üç dəyərə təyin edə bilərsiniz: birincisi yuxarı kənar üçün, ikincisi üfüqi düzülmə üçün, üçüncüsü isə aşağı kənar üçün cavabdeh olacaq: Cədvəl ( kənar: 10px avtomatik 30px; ) Cədvəllərin özləri olduqca zəif görünür və brauzerlər bəzi cədvəl xüsusiyyətlərini, xüsusən də çərçivələri özünəməxsus şəkildə göstərirlər. Eyni zamanda üslubların gücündən istifadə etməklə bu çatışmazlıqlar asanlıqla düzəldilə bilər. Eyni zamanda, cədvəllərin dizaynı üçün vasitələr xeyli genişləndirilir ki, bu da cədvəlləri saytın dizaynına uğurla uyğunlaşdırmağa və cədvəl məlumatlarını daha aydın təqdim etməyə imkan verir. Bütün cədvəl hüceyrələrinin fon rəngi eyni zamanda TABLE seçicisinə tətbiq olunan fon xüsusiyyəti vasitəsilə təyin olunur. Bu vəziyyətdə üslublardan istifadə qaydalarını, xüsusən də element xüsusiyyətlərinin miras qalmasını xatırlamalısınız. Fon xassəsi miras alınmasa da, hüceyrələr üçün standart fon dəyəri şəffafdır, yəni. şəffaflıq, buna görə də hüceyrələr üçün fon doldurma effekti əldə edilir. TABLE ilə eyni vaxtda TD və ya TH seçicisinin rəngini təyin etsəniz, bu rəng xananın fonu kimi təyin olunacaq (nümunə 2.3). Misal 2.3. Fon rəngi
Bu nümunədə hüceyrələr üçün mavi fon rəngi alırıq (tag Və TD seçicisinin rəngi açıq şəkildə göstərilmişdir, buna görə də hüceyrələr mavi ilə "doldurulur". Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 2.4. düyü. 2.4. Fon rənginin dəyişdirilməsi . Hüceyrənin hər tərəfindəki piksellərlə sərhəd dəyərini təyin edir. Nümunə 2.4-də göstərildiyi kimi, doldurma stili xassəsini TD seçicisinə əlavə etməklə istifadə etmək mümkündür. Misal 2.4. Cədvəllərdəki sahələr
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Bu misalda seçiciləri qruplaşdırmaqla sahələr TD və TH seçiciləri üçün eyni vaxtda təyin edilir. Nümunənin nəticəsi Şəkildə göstərilmişdir. 2.5. düyü. 2.5. Hüceyrələrdəki sahələr Hüceyrələr arasındakı məsafə . Bu atributun təsiri xanaların ətrafındakı haşiyələrdən istifadə etdikdə və ya xanaları səhifənin fonundan fərqlənən rənglə doldurarkən aydın görünür. Stil xassəsi haşiyə aralığı hüceyrələrin hüdudları arasındakı məsafəni təyin edir; Bir dəyər xana sərhədləri arasında həm şaquli, həm də üfüqi məsafəni təyin edir. Bu xassə iki dəyərə malikdirsə, onda birincisi üfüqi məsafəni (yəni xananın soluna və sağına), ikincisi isə şaquli məsafəni (yuxarıda və aşağıda) təyin edir. Sərhəd aralığı xassəsi yalnız o halda qüvvəyə minir ki, TABLE selektorunda yığışdırılmaq üçün təyin edilmiş sərhəd-daralma xassəsi yoxdur (Nümunə 2.5). Misal 2.5. Hüceyrə sərhədləri arasındakı məsafə
Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 2.6. düyü. 2.6. Sərhəd aralığından istifadə edərkən cədvəl görünüşü İnternet brauzeri Explorer-in 7 və yuxarı versiyaları haşiyə aralığı xassəsini dəstəkləmir, ona görə də bu brauzerdə cədvəllər üçün standart hüceyrə məsafəsi dəyərindən (adətən 2px) istifadə olunacaq. CƏDVƏL seçicisinə çökmə dəyəri olan sərhəd-daralma xassəsini əlavə edərkən hüceyrələr arası atributuna məhəl qoyulmur və sərhəd aralığı dəyəri sıfıra sıfırlanır. Varsayılan olaraq, cədvəldə əvvəlcə sərhəd yoxdur və onun əlavə edilməsi etiketin sərhəd atributundan istifadə etməklə baş verir Məlumdur ki, etiketin hüceyrə boşluq atributu Qeyd edək ki, bu tamamilə deyil rahat yol məhdud əhatə dairəsinə malik olduğu üçün sərhədlər yaradır. Beləliklə, düzgün yerlərdə şaquli və ya üfüqi xətləri deyil, yalnız tək rəngli bir şəbəkə əldə edə bilərsiniz. Haşiyə stili xüsusiyyəti eyni zamanda element ətrafında haşiyə rəngini, üslubunu və qalınlığını təyin edir. Fərqli tərəflərdə ayrı-ayrı xətlər yaratmağınız lazım olduqda, törəmələrdən istifadə etmək daha yaxşıdır - sərhəd-sol , sərhəd-sağ , sərhəd-yuxarı və sərhəd-alt , bu xüsusiyyətlər müvafiq olaraq sol, sağ, yuxarı və aşağı sərhədi müəyyənləşdirir. . CƏDVƏL seçicisinə sərhəd xassəsini tətbiq etməklə biz bütövlükdə cədvəlin ətrafına, TD və ya TH seçicisinə isə xanaların ətrafına haşiyə əlavə edirik (Nümunə 2.6). Misal 2.6. İkiqat çərçivənin əlavə edilməsi Misal 2.4. Cədvəllərdəki sahələr
Bu nümunədə cədvəlin özünün ətrafında qara ikiqat haşiyə və hər bir xana ətrafında möhkəm ağ haşiyə istifadə olunur. Nümunənin nəticəsi Şəkildə göstərilmişdir. 2.7. düyü. 2.7. Cədvəl və hüceyrələr ətrafında sərhəd Nəzərə alın ki, hüceyrələrin birləşdiyi yerlərdə qoşa xətlər əmələ gəlir. Onlar teqin hüceyrə boşluq atributunun hərəkəti sayəsində yenidən əldə edilir Misal 2.7. Tək Çərçivənin yaradılması Misal 2.4. Cədvəllərdəki sahələr
Bu nümunə hüceyrələr arasında möhkəm yaşıl xətt və masanın ətrafında qara xətt yaradır. Cədvəl daxilindəki bütün haşiyələr eyni qalınlığa malikdir. Nümunənin nəticəsi Şəkildə göstərilmişdir. 2.8. düyü. 2.8. Masanın ətrafında sərhəd Varsayılan olaraq, cədvəl xanasındakı mətn sola düzülür. Bu qaydanın istisnası etiketdir Misal 2.8. Hüceyrə məzmununu üfüqi olaraq hizalayın Misal 2.4. Cədvəllərdəki sahələr
Bu nümunədə etiketin məzmunu düyü. 2.9. Hüceyrələrdə mətnin hizalanması Hüceyrədəki şaquli düzülmə, başqa cür qeyd edilmədiyi təqdirdə həmişə mərkəzdədir. Bu, hər zaman əlverişli deyil, xüsusən də hündürlüyü hündürlüyə görə dəyişən cədvəllər üçün. Bu halda düzülmə xananın yuxarı kənarına Misal 2.9-da göstərildiyi kimi şaquli align xassəsindən istifadə etməklə təyin edilir. Misal 2.9. Hüceyrə məzmununu şaquli olaraq hizalayın Misal 2.4. Cədvəllərdəki sahələr
Bu nümunə başlığın hündürlüyünü təyin edir düyü. 2.10. Hüceyrələrdə mətnin düzülməsi Brauzerlər içərisində heç bir şey olmayan xananı fərqli şəkildə göstərir. Bu halda “heç nə” o deməkdir ki, xanaya nə şəkil, nə də mətn əlavə olunmayıb və boşluq nəzərə alınmayıb. Təbii ki, hüceyrələrin görünüşü yalnız onların ətrafında bir sərhəd qoyulduqda fərqlənir. Görünməz bir haşiyədən istifadə edərkən, içərisində bir şey olub-olmamasından asılı olmayaraq, hüceyrələrin görünüşü eynidir. Köhnə brauzerlər boş görünüş xanalarının fon rəngini göstərmirdi Xoşbəxtlikdən, tək pikselli rəsmlər və onlara əsaslanan hər cür boşluqlar dövrü keçdi. Brauzerlər hüceyrə məzmunu olmadan da cədvəllərlə olduqca düzgün işləyir. Boş xanaların görünüşünü idarə etmək üçün, gizlətməyə təyin edildikdə emp-cells xüsusiyyətindən istifadə edin, sərhəd və fon boş xanalarda göstərilmir. Bir sıradakı bütün xanalar boşdursa, bütün cərgə gizlənir. Hüceyrə aşağıdakı hallarda boş sayılır: Qırılmayan bir boşluq əlavə etmək görünən məzmun kimi qəbul edilir, yəni. xana artıq boş olmayacaq (nümunə 2.10). Misal 2.10. Boş hüceyrələr Misal 2.4. Cədvəllərdəki sahələr
Cədvəl görünüşü Safari brauzeriŞəkildə göstərilmişdir. 2.11a. IE7 brauzerindəki eyni cədvəl Şek. 2.11b. A. Brauzerdə Safari, Firefox, Opera, IE8, IE9 b. IE7 brauzerində düyü. 2.11. Boş xanaları olan cədvəlin görünüşü Və bu yazıda onların dizaynı haqqında danışacağam CSS istifadə edərək. Kaskad üslubları cədvəlləri formatlaşdırmaq üçün aşağıdakı xüsusiyyətlərdən istifadə edir: Cədvəlin genişliyini və hündürlüyünü müvafiq olaraq təyin edin. Bu xüsusiyyətlər olmadan parametrlər avtomatik olaraq müəyyən edilir və konteynerin məzmunundan asılıdır Cədvəl (eni: 450px; hündürlük: 80%;) Teq tərəfindən təsvir edilən cədvəl başlığının harada yerləşdiriləcəyini müəyyənləşdirir üçün eksklüziv Firefox brauzeri dəyərlər mövcuddur sol(solda başlıq) və sağ(cədvəlin sağında), lakin digər brauzerlər onları başa düşmür. Cədvəl (başlıq tərəfi: yuxarı;) Hüceyrə sərhədlərinin ikiqat sərhədləri meydana gətirdiyi vəziyyətlərdən qaçmağa kömək edir. Aşağıdakı rəqəm məhz belə bir halı göstərir. Hüceyrə çərçivələri standart olaraq belə göstərilir. Qayda sərhəd-dağılması: ayrı; eyni effekti verir. Problemi həll etmək üçün bəyan etmək lazımdır sərhəd-dağılma: dağılma;(nəticə aşağıdakı şəkildə göstərilmişdir). Hüceyrə sərhədləri arasındakı məsafəni təyin edir. Qayda bir anda bütün masa üçün müəyyən edilir. Bir dəyər varsa, o, məsafəni həm üfüqi, həm də şaquli olaraq təyin edəcəkdir. İki dəyər varsa, birincisi üfüqi məsafəni təyin edəcək, ikincisi - şaquli. Mülkiyyət qayda ilə uyğun gəlmir cədvəl (sərhəd dağılması: dağılması;). Cədvəl ( haşiyə: 4px ikiqat #FCA360; haşiyə-daralma: ayrı; sərhəd aralığı: 10px 20px; ) td ( dolgu: 3px; haşiyə: 1px bərk #FCA360; ) Cədvəl aşağıdakı görünüşü verir: Boş olduqda xananın fonunun və sərhədlərinin göstərilib-göstərilməyəcəyini müəyyən edir. Mülk iki dəyərdən birinə malik ola bilər: Brauzerə məzmununa əsasən cədvəl hüceyrələrinin enini necə təyin edəcəyini söyləyir. Unutmayın ki, masaya başqa universal qaydalar qoya bilərsiniz, məsələn, hündürlüklə etdiyimiz kimi ( hündürlük) və eni ( eni). Bunu nəzərə alaraq, kodu qismən şərh edərək sadə bir cədvəl yaradaq.
Brauzerdə cədvəl aşağıdakı kimi görünəcək. eni: 50%; Cədvəlin enini ana cədvəlin eninin yarısına təyin edin. 50% qabın enindən götürülür
çünki onun başqa valideynləri yoxdur. Yəni, cədvəl brauzer pəncərəsinin tam yarısını tutacaq. başlıq tərəfi: alt; Başlığı aşağıya, masanın altına qoyuruq. haşiyə: 4px bərk #006400; Cədvələ 4 piksel qalınlığında rəngli çərçivə verin. sərhəd-dağılma: dağılma; Hüceyrə sərhədlərini birləşdirin. masa düzeni: sabit; Brauzerin cədvəlin enini təyin etməsini konfiqurasiya edirik. şrift ölçüsü: 13px; Başlıq hüceyrələrinin şrift ölçüsünü təyin edin. şrift çəkisi: qalın; Onların içindəki mətni qalın edin. fon: #ADFF2F; Hüceyrələrin fon rəngini təyin edin. haşiyənin üstü: 4px bərk #006400; haşiyə-alt: 3px bərk #FF8C00; Üst və alt çərçivələrin tənzimlənməsi. rəng: #039; Mətnin rəngini müəyyənləşdirin. doldurma: 8px; Hüceyrələrin məzmunundan sərhədlərinə qədər olan məsafəni səkkiz pikselə təyin edin.ad Təsvir Qiymət
Samsung Galaxy S8, S8 Plus 2400 ₽
Xiaomi Redmi 4A, 4X 520 ₽
Meizu M3S, M5S 720 ₽
CSS Xüsusiyyətləri
, cədvəlin məzmunu ilə konteynerdir. Məzmun HTML cədvəlləri sətir-sətir təsvir, hər sətir açılış etiketi ilə başlayır
və bağlanış etiketi ilə bitir .
teqlərlə təmsil olunan cədvəl xanaları yerləşir və ya . Veb səhifəsində göstərilən bütün cədvəl məzmununu ehtiva edən xanalardır.
Masa çərçivəsi
, sonra bütün masanın ətrafında göstəriləcək. Cədvəl hüceyrələrinin də haşiyəsi olması üçün elementlər üçün sərhəd xassəsini təyin etməlisiniz
Və .
ad soyad Homer Simpson Marge Simpson
cəhd edin » ad soyad Homer Simpson Marge Simpson Cədvəl ölçüsü
Mətnin uyğunlaşdırılması
cəhd edin » ad soyad Homer Simpson Marge Simpson Cədvəl sıralarının fon rənginin dəyişdirilməsi
cəhd edin »ad soyad Vəzifə Homer Simpson ata Marge Simpson ana Bart Simpson oğlum Lisa Simpson qızı Hoverdə cərgə fonunu dəyişdirin
Masanın mərkəzə düzülməsi
Hüceyrə fonunun rəngi
Başlıq 1 Başlıq 2 Hüceyrə 3 Hüceyrə 4 ) və başlıqda qırmızı (etiket ). Bunun səbəbi, TH seçicisi üçün üslubun müəyyən edilməməsidir, ona görə də valideynin fonu, bu halda TABLE seçicisi "göstərilir".
Hüceyrələrin daxili kənarları
Margin hüceyrənin məzmununun kənarı ilə onun sərhədi arasındakı məsafədir. Tipik olaraq bu məqsəd üçün etiketin hüceyrə doldurma atributundan istifadə olunur.
Başlıq 1 Başlıq 2 Hüceyrə 3 Hüceyrə 4 
Doldurma stili xüsusiyyəti cədvəl xanalarına tətbiq edilirsə, teqin hüceyrə doldurma atributunun təsiri
nəzərə alınmadı.
Hüceyrələr arasındakı məsafəni dəyişdirmək üçün etiketin hüceyrələrarası məsafəni təyin etmə atributundan istifadə edin
Leonardo 5 8 Rafael 4 11 Mikelancelo 24 9 Donatello 2 13 
Sərhədlər və çərçivələr
. Brauzerlər belə bir haşiyəni fərqli şəkildə göstərirlər, ona görə də bu atributu ümumiyyətlə qeyd etməmək və haşiyələrin rəsmini üslublara buraxmaq daha yaxşıdır. Birbaşa üslublarla əlaqəli iki üsula baxaq.
Hüceyrə boşluğu atributundan istifadə
cədvəl hüceyrələri arasındakı məsafəni təyin edir. Cədvəl və xanalar üçün müxtəlif fon rənglərindən istifadə etsəniz, o zaman xanalar arasında rəngi cədvəlin rənginə uyğun gələn, qalınlığı isə hüceyrələrin boşluq atributunun pikseldəki dəyərinə bərabər olan xətlər toru görünəcək. Yuxarıdakı misal 2.3 bu effekti göstərir, ona görə də təkrar etməyəcəyəm.
Sərhəd əmlakından istifadə
Başlıq 1 Başlıq 2 Hüceyrə 3 Hüceyrə 4 
. Bu atribut nümunə kodun heç bir yerində görünməsə də, brauzer standart olaraq ondan istifadə edir. Əgər təyin etsəniz
, onda biz ikiqat deyil, tək xətlər, lakin ikiqat qalınlıq alırıq. Bu xüsusiyyəti dəyişmək üçün CƏDVƏL seçicisinə əlavə edilən dəyər yıxılma ilə sərhəd-daraltma üslubu xüsusiyyətindən istifadə edin (nümunə 2.7).
Başlıq 1 Başlıq 2 Hüceyrə 3 Hüceyrə 4 
Hüceyrə məzmununun uyğunlaşdırılması
, mərkəzləşdirilmiş başlığı müəyyən edir. Hizalama metodunu dəyişdirmək üçün mətni düzənlə stil xüsusiyyətindən istifadə edin (nümunə 2.8).
Başlıq 1 Hüceyrə 1 Hüceyrə 2 Başlıq 2 Hüceyrə 3 Hüceyrə 4 sola və etiketin məzmununa uyğunlaşdırılır - mərkəzdə. Nümunənin nəticəsi aşağıda göstərilmişdir (Şəkil 2.9).
Başlıq 1 Başlıq 2 Hüceyrə 1 Hüceyrə 2 40 piksel kimi və mətn aşağı kənara düzülür. Nümunənin nəticəsi Şəkildə göstərilmişdir. 2.10.
Boş hüceyrələr
, beləliklə, xananı məzmunsuz tərk etmək, lakin fon rəngini göstərmək lazım olduqda, xananın içərisinə ayrılmamış boşluq () əlavə edildi. Boşluq həmişə uyğun deyil, xüsusən də hüceyrə hündürlüyünü 1-2 pikselə təyin etmək lazım olduqda, bir piksel şəffaf qrafika geniş yayılmışdır. Həqiqətən, belə bir şəkil sizin istəyinizlə ölçülə bilər, lakin heç bir şəkildə veb-səhifədə göstərilmir.
Leonardo 5 8
Rafael 11
Mikelancelo 24
Donatello 13
eni və hündürlüyü
. Dəyərlər istənilən CSS uzunluq vahidlərinə təyin edilir, lakin piksellər tez-tez istifadə olunur ( px) və faiz ( %
). Sonuncu əsas elementə nisbətən eni təyin edir, birincisi isə mütləq dəyəri təyin edir.
başlıq tərəfi
sərhəd-dağılması
sərhəd aralığı
boş hüceyrələr
masa tərtibatı
Masa dizaynının nümunəsi
Qiymətlər 2014
2015 2016
Çörək 16
18 21
Şəkər 35
44 50
duz 8
8,50 9
Siz də bəyənə bilərsiniz
MTS-dən mobil internet
Optik diskləri yandırmaq üçün on pulsuz proqram
Windows CD və ya DVD sürücüsünü görmür