Yalnız beş dəqiqə ərzində CSS masası sərhədinin necə yaradılacağını öyrənin
CSS və HTML tablolarının qarışıq olmadığını eşitmiş ola bilərsiniz. Bu sadəcə doğru deyil. Bəli, layout üçün HTML masalar istifadə edərək artıq CSS tərtibatı üslubları ilə əvəz edilmiş veb dizayn ən yaxşı tətbiqdir, lakin cədvəllər bir veb səhifəsinə cədvəlli məlumatlar əlavə etmək üçün istifadə etmək üçün hələ düzgün işarədir.
Təəssüf ki, çox sayda veb mütəxəssisləri zəhər olduğuna inanmaqdan ötrü masalardan uzaqlaşdıqları üçün, bu peşəkarlar bir çoxu bu ümumi HTML elementi və bir veb səhifəsində işlədikləri zaman mübarizəsi ilə az təcrübəyə malikdirlər. Məsələn, bir səhifədə bir masa varsa və masa hüceyrələrinə daxili xətlər əlavə etmək istəyirsinizsə.
CSS Cədvəl Sərhədləri
Sərhədləri masalara əlavə etmək üçün CSS- dən istifadə edərkən, yalnız masanın kənarına sərhəd əlavə edir. Bu cədvəldə fərdi hüceyrələrə daxili xətlər əlavə etmək istəyirsinizsə, daxili CSS elementlərinə sərhədlər əlavə edin. Fərdi hüceyrələrin içərisində xətləri əlavə etmək üçün HR etiketini istifadə edə bilərsiniz.
Bu yazıda əhatə olunan üslubları tətbiq etmək üçün veb səhifəmizdə bir masa var. Daha sonra sənədinizin başında bir stil hesabatı yaratmaq lazımdır (ehtimal ki, "saytınız" tək bir səhifədirsə) və ya xarici stil hesabatı kimi sənədə əlavə olunacaq (bu sizin sitenizin birdən çox səhifəsidirsə, bütün səhifələri bir xarici səhifədən tərtib etməyə imkan verir). Siz üslubları bu üsluba daxil daxili xətləri əlavə edəcək.
Başlamadan əvvəl
Birincisi, xətlərin masada görünməsini istədiyiniz yerə qərar verməlisiniz. Aşağıdakılar daxil olmaqla bir neçə variantınız var:
- Bütün hüceyrələri bir grid yaratmaq ətrafında;
- Yalnız sütunlar arasında xətləri yerləşdirmək;
- Yalnız sıralar arasında; və ya
- Xüsusi sütunlar və ya satırlar arasında.
Fərdi hüceyrələr ətrafında və ya fərdi hüceyrələr daxilində xətləri yerləşdirə bilərsiniz.
Cədvəldə bütün hüceyrələr ətrafında xətləri əlavə etmək
Tablonuzdaki bütün hüceyrələrin ətrafında xətləri əlavə etmək üçün, bu grid kimi təsiri yaratmaq üçün stillərinizə aşağıdakıları əlavə edin:
td, th {
sərhəd: bərk 1px qara;
}
Bir cədvəldə yalnız sütunlar arasında xətlər əlavə etmək
Sütunlar arasında xətləri əlavə etmək üçün (bu, masanın sütunlarından yuxarıdan aşağıya doğru hərəkət edən şaquli xətlər yaradır) stilinizə aşağıdakıları əlavə edin:
td, th {
sərhəd-sol: solid 1px qara;
}
Sonra, ilk sütunda görünməsini istəmirsəniz, bu th və td hüceyrələrinə bir sinif əlavə etməlisiniz. Bu nümunədə, biz bu hüceyrələrə sərhədsiz bir sinif var və biz bu daha xüsusi CSS qayda ilə sərhəd çıxardıq. Beləliklə, istifadə etdiyimiz HTML kursu:
class = "no-border">
Sonra stilimizə aşağıdakı stil əlavə edə bilərik:
qeyri-sərhəd {
sərhəd-sol: heç biri;
}
Bir Tabloda Yalnız Satır Arasına Lines əlavə etmək üçün necə
Sütunlar arasında xətləri əlavə etməklə, bunu stilinizə əlavə edilən bir sadə stil ilə edə bilərsiniz. Aşağıdakı CSS bizim masanın hər bir sıra arasında şaquli xətləri əlavə edir:
tr {
sərhəd altındakı: 1px qara qara;
}
Sərhədi masanın altındakı yerdən çıxarmaq üçün bir dəfə daha o tr etiketinə bir sinif əlavə edərdiniz:
class = "no-border">
Stilinizə aşağıdakı stil əlavə edin:
qeyri-sərhəd {
sərhədsiz: heç biri;
}
Cədvəldə xüsusi sütunlar və ya satırlar arasında xətlər əlavə etmək
Yalnız xüsusi satırlar və sütunlar arasında xətləri istəsəniz, bu hüceyrələr və ya satırlar üzərində bir sinifdən istifadə etməlisiniz. Sütunlar arasında bir xətt əlavə etmək, sütundakı hər bir hüceyrəyə sinif əlavə etmək lazımdır, çünki sətirlərdən daha bir az çətindir. Cədvəliniz avtomatik olaraq bir növ CMS- dən yaradılıbsa, bu mümkün olmaya bilər, ancaq əl kodunu əlinizdə saxlasanız, bu təsirə nail olmaq üçün lazımi dərsləri əlavə edə bilərsiniz.
class = "yan sərhəd">
Satır arasına satır əlavə etmək çox asandır, çünki yalnız satırı istədiyiniz satırı əlavə edə bilərsiniz.
class = "border-bottom">
Sonra stilinizə CSS əlavə edin:
.border-side {
sərhəd-sol: solid 1px qara;
}
.border-bottom {
sərhəd altındakı: 1px qara qara;
}
Cədvəldə fərdi hüceyrələr ətrafında xətlər əlavə etmək
Fərdi hüceyrələrin ətrafında xətləri əlavə etmək üçün hüceyrənin ətrafında istədiyiniz hüceyrələrə bir sinif əlavə edin:
class = "border">
Və stilinizə aşağıdakı CSS əlavə edin:
.border {
sərhəd: bərk 1px qara;
}
Bir Cədvəldə Fərdi Hüceyrələrin içərisində Lines əlavə etmək
Bir hüceyrənin məzmununun içərisində xətləri əlavə etmək istəyirsinizsə, bunun ən asan yolu üfüqi qayda etiketi ilə (
).
Faydalı məsləhətlər
Sərhədlərinizdəki boşluqları görsəniz, sərhəd çökmə stilinin masanıza qoyulduğundan əmin olmalısan. Stilinizə aşağıdakıları əlavə edin:
cədvəl {
sərhəd çökməsi: çökmə;
}
Yuxarıda göstərilən CSS-nin hamısını qaçın və sərhəd nişanını masa etiketinizdən istifadə edə bilərsiniz. Bununla yanaşı, onun özniteliğinin qadağan edilmədiyi halda, CSS-dən əhəmiyyətli dərəcədə daha az çevik olduğunu, yalnız sərhəd genişliyini müəyyən edə biləcəyini və yalnız masanın bütün hüceyrələrinin ətrafında və ya heç birinə malik olmadığını anlayın.