td: first-child, table td: last-child seçici tablosunu kullanarak, tablonun ilk veya son sütununu biçimlendirebilirsiniz (tablo başlığının ilk hücresi hariç);
td: nth-child seçici (sütun seçim kuralı) tablosunu kullanarak tablodaki herhangi bir sütuna stil verebilirsiniz.
CSS seçicileri hakkında daha fazla bilgi edinebilirsiniz.
etiketini kullanarak bir tabloya başlık ekleyebilirsiniz.
, ve caption-side özelliği kullanılarak tablonun önüne veya altına yerleştirilebilir. Metin hizalama özelliği, başlık metnini yatay olarak hizalamak için kullanılır. Miras.
Tablo No. 1
| Şirket |
Q1 |
Q2 |
Q3 |
Q4 |
...
resim yazısı (başlık tarafı: alt; metin hizalama: sağa; dolgu: 10 piksel 0; yazı tipi boyutu: 14 piksel;) 
Pirinç. 2. Tablonun altındaki başlığın görüntülenmesine bir örnek 6. Hücre çerçeveleri arasındaki boşluk nasıl kaldırılır
Varsayılan tablo hücre sınırları küçük bir boşlukla ayrılır. Tablo için border-collapse: daraltmayı ayarlarsanız, boşluk kaldırılacaktır. Mülkiyet miras alınır.
Sözdizimi
Tablo (kenarlık-daralt: daralt;)
Pirinç. 3. Birleştirme ve bölme hücre kenarlıklarına sahip bir tablo örneği
7. Hücre sınırları arasındaki boşluk nasıl artırılır
border-spacing özelliğini kullanarak hücre sınırları arasındaki mesafeyi değiştirebilirsiniz. Bu özellik bir bütün olarak tablo için geçerlidir. Miras.
Sözdizimi
Tablo (border-collapse: ayrı; border-spacing: 10px 20px;) tablo (border-collapse: ayrı; border-spacing: 10px;)
Pirinç. 4. Hücre çerçeveleri arasında artan boşluklara sahip bir tablo örneği
8. Boş tablo hücreleri nasıl gizlenir
Boş hücreler özelliği, boş hücreleri gizler veya gösterir. Yalnızca herhangi bir içerik içermeyen hücreleri etkiler. Bir hücre için bir arka plan belirtilirse ve bir tablo için tablo (border-collapse: daralt;) belirtilirse, hücre gizlenmez. Miras.
| Şirket |
Q1 |
Q2 |
Q3 |
| Microsoft |
20.3 |
30.5 |
|
| Google |
50.2 |
40.63 |
45.23 |
tablo (kenarlık: 1px katı # 69c; border-collapse: ayrı; boş hücreler: hide;) th, td (kenarlık: 2px katı # 69c;) 
Pirinç. 5. Boş bir tablo hücresini gizleme örneği 9. Tablo düzeni özelliğini kullanarak düzen tablosu düzeni
Bir tablo düzeninin düzeni, iki yaklaşımdan biriyle belirlenir: sabit düzen veya otomatik düzen. Bu durumda düzen, tablonun genişliğinin hücrelerin genişliği arasında nasıl dağıtıldığı anlamına gelir. Mülkiyet miras alınmaz.
Sözdizimi
Tablo (masa düzeni: sabit;)
10. En İyi Masa Düzenleri
1. Yatay minimalizm
Yatay tablolar, metnin yatay olarak okunduğu tablolardır. Her varlık ayrı bir satırdır. Bu gibi tabloları, inci başlığın altına iki piksellik bir kenarlık yerleştirerek minimalist tarzda şekillendirebilirsiniz.
| Çalışan | Aylık maaş | Bonus | süpervizör |
|---|
| Stephen C. Cox | $300 | $50 | Bob |
| bronz ten | $150 | - | Annie |
| Joyce ming | $200 | $35 | Andy |
| James A.Pentel | $175 | $25 | Annie |
tablo (yazı tipi ailesi: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; yazı tipi boyutu: 14 piksel; arka plan: beyaz; maksimum genişlik: %70; genişlik: %70; kenarlık daraltma: daralt; metin -align: left;) th (yazı tipi ağırlığı: normal; renk: # 039; kenarlık-alt: 2px düz # 6678b1; dolgu: 10px 8px;) td (renk: # 669; dolgu: 9px 8px; geçiş: .3s doğrusal;) tr: vurgulu td (renk: # 6699ff;)Çok sayıda satırla, bu tablo tasarımı onları okumayı zorlaştırır. Bu sorunu çözmek için tüm td öğelerinin altına bir piksel kenarlık ekleyebilirsiniz.
Td (border-bottom: 1px solid #ccc; color: # 669; padding: 9px 8px; geçiş: .3s linear;) / * kodun geri kalanı yukarıdaki örnekteki gibidir * /
tr öğesine a: vurgulu efekti eklemek, minimalist tarzda tabloların okunmasını kolaylaştırır. Fareyi bir hücrenin üzerine getirdiğinizde, aynı satırdaki diğer hücreler aynı anda vurgulanır, bu da tablolarda birden fazla sütun varsa bilgileri izleme sürecini basitleştirir.
Th (yazı tipi ağırlığı: normal; renk: # 039; dolgu: 10 piksel 15 piksel;) td (renk: # 669; kenarlık üst: 1 piksel katı # e8edff; dolgu: 10 piksel 15 piksel;) tr: vurgulu td (arka plan: # e8edff ;)
2. Dikey minimalizm
Bu tür tablolar nadiren kullanılsa da, dikey olarak yönlendirilmiş tablolar, bir sütun tarafından temsil edilen nesnelerin açıklamalarını sınıflandırmak veya karşılaştırmak için kullanışlıdır. Sütunları ayıran bir boşluk ekleyerek bunları minimalist bir tarzda şekillendirebilirsiniz.
Th (yazı tipi ağırlığı: normal; kenarlık-alt: 2 piksel düz # 6678b1; sağ kenar: 30 piksel düz #fff; sol kenar: 30 piksel düz #fff; renk: # 039; dolgu: 8 piksel 2 piksel;) td (kenarlık- sağ: 30 piksel düz #fff; kenar-sol: 30 piksel düz #fff; renk: # 669; dolgu: 12 piksel 2 piksel;)
3. "Kutu" stili
Her türden masayı dekore etmek için en güvenilir stil, "kutu" tarzıdır. İyi bir renk şeması seçmek ve ardından tüm hücreler için arka plan rengini ayarlamak yeterlidir. Kenarları ayırıcı olarak ayarlayarak çizgiler arasındaki farkı vurgulamayı unutmayın.
Th (yazı tipi boyutu: 13 piksel; yazı tipi ağırlığı: normal; arka plan: # b9c9fe; kenarlık-üst: 4 piksel düz #aabcfe; kenarlık-alt: 1 piksel düz #fff; renk: # 039; dolgu: 8 piksel;) td (arka plan : # e8edff; kenarlık-alt: 1 piksel düz #fff; renk: # 669; kenarlık-üst: 1 piksel düz şeffaf; dolgu: 8 piksel;) tr: vurgulu td (arka plan: #ccddff;)
En zor kısım, sitenizle uyumlu bir şekilde uyum sağlayacak renk şemasını bulmaktır. Site grafik ve tasarım yüklüyse, bu stili kullanmanız oldukça zor olacaktır.
Tablo (yazı tipi ailesi: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; yazı tipi boyutu: 14 piksel; maksimum genişlik: %70; genişlik: %70; metin hizalama: merkez; kenarlık daralt: daralt ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid # 9baff1; border- sol: 1 piksel düz # 9baff1; renk: # 039; dolgu: 8 piksel;) td (arka plan: # e8edff; kenar-sağ: 1 piksel düz #aabcfe; sol kenar: 1 piksel düz #aabcfe; renk: # 669; dolgu: 8 piksel ;)
4. Yatay zebra
Zebra masa oldukça çekici ve kullanışlı görünüyor. Tamamlayıcı arka plan rengi, insanların tabloyu okuması için görsel bir ipucu işlevi görebilir.
Th (yazı tipi ağırlığı: normal; renk: # 039; dolgu: 10 piksel 15 piksel;) td (renk: # 669; kenarlık üst: 1 piksel katı # e8edff; dolgu: 10 piksel 15 piksel;) tr: nth-child (2n) ( arka plan: # e8edff;)
5. Gazete stili
Sözde gazete efektini elde etmek için tablo öğelerine kenarlıklar uygulayabilir ve içindeki hücrelerle oynayabilirsiniz. Hafif, minimal bir gazete stili şöyle görünebilir: renk şemasıyla oynayın, kenarlıklar, dolgu, farklı arka planlar ekleyin ve a: bir çizginin üzerinde gezinirken üzerine gelme efekti.
Tablo (kenarlık: 1 piksel düz # 69c;) th (yazı tipi ağırlığı: normal; renk: # 039; kenarlık-alt: 1 piksel kesikli # 69c; dolgu: 12 piksel 17 piksel;) td (renk: # 669; dolgu: 7 piksel 17 piksel; ) tr: vurgulu td (arka plan: #ccddff;)
Tablo (kenarlık: 1 piksel düz # 69c;) th (yazı tipi ağırlığı: normal; renk: # 039; dolgu: 10 piksel;) td (renk: # 669; kenarlık-üst: 1 piksel kesikli #fff; dolgu: 10 piksel; arka plan: #ccddff;) tr: vurgulu td (arka plan: #99bcff;)
Tablo (kenarlık: 1px katı # 6cf;) th (yazı tipi ağırlığı: normal; yazı tipi boyutu: 13px; renk: # 039; metin dönüşümü: büyük harf; kenar-sağ: 1px katı # 0865c2; kenarlık-üst: 1px katı # 0865c2; kenar-sol: 1px düz # 0865c2; kenar-alt: 1px düz #fff; dolgu: 20px;) td (renk: # 669; kenar-sağ: 1px kesikli # 6cf; dolgu: 10px 20px;)
6. Tablo arka planı
Masanızı şekillendirmenin hızlı ve benzersiz bir yolunu arıyorsanız, masanın temasıyla ilgili çekici bir resim veya fotoğraf seçin ve onu masanın arka planı olarak ayarlayın.
Png ") %98 %86 tekrarsız;) th (yazı tipi ağırlığı: normal; yazı tipi boyutu: 14 piksel; renk: # 339; dolgu: 10 piksel 12 piksel; arka plan: beyaz;) td (renk: # 669; kenarlık- üst: 1 piksel düz beyaz; dolgu: 10 piksel 12 piksel; arka plan: rgba (51, 51, 153, .2); geçiş: .3s;) tr: vurgulu td (arka plan: rgba (51, 51, 153, .1)); )
Herkese merhaba! Böylece, artık ihtiyacınız olduğu kadar çok satır ve sütundan oluşan temel tablolar oluşturabilirsiniz. Kötü kötü değil. Şimdi bu tabloların tasarımından bahsedelim.
Son derste tablolar kenarlıksız olarak gösterildi. Ve görüyorsun, öyle görünüyor ki, buna işaret bile diyemezsin. HTML'de tablo kenarlıkları yapmak için etikete ekleyin
bağlanmak sınır sıfırdan farklı bir değer vererek.
Öyleyse masa için kenarlıklar yapalım. Örneğin, zaten sahip olduğumuz için:
| Sol üst hücre | Sağ üst hücre |
| Sol alt hücre | Sağ alt hücre |
Tarayıcıda sonuç:
Tablo kenarlıkları nasıl kaldırılır
Sırayla, HTML tablosunun sınırlarını kaldırmak veya onları görünmez yapmak için de söyleyebilirsiniz, özniteliğe ihtiyacınız var. sınır değeri ayarla 0
... Bu basit işlemlerden sonra çerçeve kaldırılacaktır.
Öznitelik, sınırlar oluşturmanıza izin verir, ancak yönetmez. Sadece kalınlıklarını değiştirmenize izin verir.
Bu nedenle, şimdi konuşacağız CSSözellikleri ile mümkün kılan sınır bir bütün olarak masanın etrafında hem her hücrenin içinde hem de dışında farklı sınırlar oluşturun.
Bir tablonun dış ve iç kenarlıklarını oluşturmak için CSS'nin nasıl uygulanacağına bir göz atalım.
Bunu yapmak için tablomuzdan border niteliğini kaldırın ve stiller ekleyin:
Örnek tablo
| Sol üst hücre |
Sağ üst hücre |
| Sol alt hücre |
Sağ alt hücre |
Tarayıcıda sonuç:
Şimdi her hücre için de kenarlıklar ekleyelim. Bunu yapmak için stilleri eklemeniz yeterlidir:
Tarayıcıda sonuç:
HTML tablosundaki hücreler arasındaki dolgu nasıl kaldırılır
CSS ile tanımlanan bir kenarlığın istediğiniz görünüme sahip olmadığını kabul edin. Hiç kuşkusuz estetik açısından da yapılacak işler vardır. Tarayıcı sayfasında, varsayılan olarak tabloların ve hücrelerin sınırlarını ayrı ayrı görüntülediğini görebilirsiniz. Bir örnek bunu açıkça göstermektedir.
Ancak border-collapse CSS özelliğini kullanırsak double denilen bu tür kenarlıklardan kurtulmamız oldukça mümkün. Pratikte şöyle görünür:
Tablo (kenarlık: düz 1 piksel mavi; sınır-daralt: daralt;) ...
Sonuç olarak, hücreler arasındaki mesafe kaldırılır:
Border niteliğine atanan daraltma değeri, çift kenarlıkları kaldırır. Gördüğünüz gibi, sonuç, bitişik hücre sınırlarının yanı sıra hücre kenarlıklarının ve tablonun dış kenarlığının daraltılmasıdır. İkincisine gelince, tamamen kaldırılabilir. Ve sergileme ihtiyacı varsa, genişliğini arttırmanız gerekir. Böylece tablodaki ayırıcılardan kurtulmuş olduk. Ve bir sonraki derste dikey ve yatay sınırları nasıl ayarlayabileceğinizden bahsedeceğiz. Hepinize iyi şanslar!
tablo verileri- tablo şeklinde görüntülenebilen ve mantıksal olarak sütunlara ve satırlara bölünebilen bilgiler. HTML etiketi, web sayfalarındaki tablo verilerini görüntülemek için kullanılır
, tablonun içeriğini içeren bir kapsayıcıdır. HTML tablo içeriği satır satır açıklanır, her satır bir açılış etiketi ile başlar ve bir kapanış etiketi ile biter
.
etiketin içinde
tablo hücreleri bulunur, etiketlerle temsil edilir | veya | ... Web sayfasında görüntülenen tüm tablo içeriğini içeren hücrelerdir.
masa çerçevesi
Varsayılan olarak, bir web sayfasındaki bir HTML tablosu kenarlıksız olarak oluşturulur; tabloya kenarlık eklemek için diğer tüm öğelerde olduğu gibi border CSS özelliği kullanılır. Ancak, yalnızca öğeye bir kenarlık eklerseniz, , ardından tüm tablonun etrafında görüntülenecektir. Tablo hücrelerinin de bir kenarlığı olması için, elemanlar için border özelliğini ayarlamanız gerekir. | ve | . Tablo, th, td (kenarlık: 1px düz siyah;) Deneyin " Artık hem tablonun hem de hücrelerin sınırları var, her hücre ve tablonun kendi sınırları var. Sonuç olarak, çerçeveler arasında boş bir boşluk belirdi; border-spacing özelliği, tüm tablo için ayarlanan bu boşluğun boyutunu kontrol etmenizi sağlar. Başka bir deyişle, farklı hücreler arasındaki boşlukları tek tek kontrol edemezsiniz.
border-spacing özelliğinin 0 değerini kullanarak hücreler arasındaki boşlukları kaldırsak bile, hücrelerin sınırları birbirine değecek ve iki katına çıkacaktır. border-collapse özelliği hücre sınırlarını birleştirmek için kullanılır. İki değer alabilir:
- ayrı: varsayılandır. Hücreler birbirinden kısa bir mesafede görüntülenir, her hücrenin kendi sınırı vardır.
- daralt: bitişik çerçeveleri tek bir çerçeveye bağlar, hücreler arasındaki ve ayrıca hücreler ve tablo çerçevesi arasındaki tüm boşluklar yoksayılır.
Belgenin adı
| İsim | Soyadı |
|---|
| Homeros | Simpson |
| marj | Simpson |
| İsim | Soyadı |
|---|
| Homeros | Simpson |
| marj | Simpson |
Denemek " Masa boyutu
Tablo hücrelerine çerçeveler eklendikten sonra, hücrelerin içeriklerinin kenarlara çok yakın olduğu fark edildi. Hücrelerin kenarları ve içerikleri arasına beyaz boşluk eklemek için padding özelliğini kullanabilirsiniz: Th, td (dolgu: 7px;) Deneyin " Tablonun boyutu içeriğine bağlıdır, ancak genellikle tablo çok dar olduğunda ve onu germek gerektiğinde durumlar ortaya çıkar. Tablonun genişliği ve yüksekliği, genişlik ve yükseklik özellikleri kullanılarak değiştirilebilir, istenen boyutlar tablonun kendisine veya hücrelere göre ayarlanır: Tablo (genişlik: %70;) inci (yükseklik: 50px;) Deneyin " Metin hizalama
Varsayılan olarak, tablo başlığı hücrelerindeki metin ortaya hizalanır ve normal hücrelerdeki metin sola hizalanır; metin hizalama özelliğini kullanarak metnin yatay hizalamasını kontrol edebilirsiniz.
Dikey hizalama CSS özelliği, metin içeriğinin dikey hizalamasını kontrol etmenizi sağlar. Varsayılan olarak metin, hücrelerin ortasına dikey olarak hizalanır. Dikey hizalama, dikey hizalama özelliğinin değerlerinden biriyle geçersiz kılınabilir:
- top: metin hücrenin üstüne hizalanır
- orta: metni ortaya hizalar (varsayılan)
- alt: metin hücrenin altına hizalanır
Belgenin adı
| İsim | Soyadı |
|---|
| Homeros | Simpson |
| marj | Simpson |
Denemek " Tablo satırlarının arka plan rengini değiştirme
Çok fazla bilgi içeren çok sayıda satır içeren büyük tablolara bakıldığında, hangi verilerin belirli bir satıra ait olduğunu takip etmek zor olabilir. Kullanıcıların gezinmesine yardımcı olmak için dönüşümlü olarak iki farklı arka plan rengi kullanabilirsiniz. Tanımlanan efekti oluşturmak için sınıf seçiciyi tablonun her ikinci satırına ekleyerek kullanabilirsiniz:
Belgenin adı
| İsim | Soyadı | Konum |
|---|
| Homeros | Simpson | baba |
| marj | Simpson | anne |
| Bart | Simpson | oğul |
| Lisa | Simpson | kız evlat |
Denemek "Her ikinci satıra bir sınıf niteliği eklemek sıkıcı bir iştir. Bu sorunu alternatif bir şekilde ele almak için: nth-child sözde sınıfı CSS3'e eklendi. Artık serpiştirmenin etkisi, belgenin HTML işaretlemesini değiştirmeye başvurmadan yalnızca CSS aracılığıyla elde edilebilir. nth-child sözde sınıfı ile, çift (çift) veya tek (tek) anahtar kelimelerinden birini kullanarak bir tablodaki tüm tek veya çift satırları seçebilirsiniz: Tr: nth-child (tek) (arka plan rengi: # EAF2D3;) Deneyin " Fareyle üzerine gelindiğinde satır arka planını değiştir
Tablo verilerinin okunabilirliğini iyileştirmenin başka bir yolu, üzerine geldiğinizde satırın arka plan rengini değiştirmektir. Bu, istenen tablo içeriğini vurgulamaya ve verilerin görsel algısını geliştirmeye yardımcı olacaktır.
Bu efekti uygulamak çok basittir, bunun için tablo satırı seçicisine hover sözde sınıfını eklemeniz ve istediğiniz arka plan rengini ayarlamanız gerekir: Tr: üzerine gelin (arka plan rengi: # E0E0FF;) Deneyin " Tablonun merkez hizalaması
Bir HTML tablosunu ortaya hizalamak, yalnızca tablonun genişliği, üst öğesinin genişliğinden daha azsa mümkündür. Tabloyu ortaya hizalamak için, en az iki değer ayarlayarak kenar boşluğu özelliğini kullanmanız gerekir: ilk değer, tablonun üst ve alt kenar boşluklarından, ikincisi ise otomatik merkez hizalamadan sorumlu olacaktır: Tablo (kenar boşluğu: 10px otomatik;) Deneyin " Tablonun üstünde ve altında farklı kenar boşluklarına ihtiyacınız varsa, kenar boşluğu özelliğini üç değere ayarlayabilirsiniz: birincisi üst kenar boşluğundan, ikincisi yatay hizalamadan ve üçüncüsü alt kenar boşluğundan sorumludur: Tablo (kenar boşluğu: 10px otomatik 30px;)
Metin bilgileri, linkler, görseller, başlıklar gibi sayfadaki öğeleri styling için pek çok yöntem düşündük ancak tüm bunlar henüz yeterli değil. Makalelerimde genellikle tablolar gibi HTML öğeleri kullanırım çünkü çoğu durumda bunlar önemli bilgileri düzenlemeye ve sunmayı kolaylaştırmaya yardımcı olur.
Bu makalede, size HTML tablolarını stillendirmenin inceliklerini tanıtacağım ve bu hedeflere ulaşmak için tasarlanmış yeni CSS özelliklerini öğreneceksiniz.
Köprü metni biçimlendirme dili HTML bize CSS stillerini tablolarla çalışmak üzere tasarlanmış on benzersiz etikete bağlamak için çok sayıda fırsat sağladı, daha fazla çalışmadan önce bunları tekrarlamanızı öneririm:
| Etiket | Açıklama |
|---|
| Tablonun içeriğini tanımlar. |
|
| Tablonun adını belirtir. |
|
| Tablonun başlık hücresini tanımlar. |
|---|
|
| Tablodaki bir satırı tanımlar. |
|
| Tablonun veri hücresini tanımlar. |
| Tablodaki grup başlığını içermek için kullanılır (tablo başlığı). |
| |
Tablonun "gövdesini" içermek için kullanılır. |
|
Tablonun (altbilgi) "altbilgisini" içermek için kullanılır. |
|
| Bir etiket içindeki her sütun için belirtilen sütun özelliklerini tanımlar .
|
|
| Tablodaki bir sütun grubunu tanımlar. |
Tablo girintileriyle çalışma
Tabloda dolgu kullanma
Tablo girintileri
|
1 |
2 |
3 |
4 |
|
2 | | | |
|
3 | | | |
|
4 | | | |
Bu örnekte, biz:
- Dış dolgulu yatay merkezleme tekniğini kullanarak masayı ortaya yerleştirin (kenar boşluğu: 0 otomatik).
- Tablonun adı için (etiket ) alt dolguyu 19 piksele ayarladık. Umarım tek sayılarla kafanız karışmaz :)
Örneğimizin sonucu:
Hücreler arası boşluk
Yukarıdaki örnekten sonra, tablodaki tüm hücreler arasında bir boşluk olduğunu fark etmiş olabilirsiniz. Tablo hücreleri arasındaki boşluğu nasıl kaldıracağımıza veya artıracağımıza bakalım.
Bitişik hücrelerin sınırları arasındaki mesafeyi ayarlamak için CSS özelliğini kullanmalısınız - border-spacing.
Tablolar arasındaki boşluğu değiştirin
sınır aralığı: 30 piksel 10 piksel;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
sınır aralığı: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
sınır aralığı: 0.2em;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
Bu örnekte, biz:
- yüzer: sol). Kayan öğeler konusunu kaçırdıysanız, bu eğitimde - "" her zaman buna geri dönebilirsiniz.
- Ek olarak, sağdaki tablo dolgusunu 30px olarak ayarlıyoruz ve tabloların dikey hizalamasını ayarlıyoruz (elemanın üst kısmı en uzun elemanın üst kısmı ile hizalanır). Bu yazıda bu mülke ayrıntılı olarak döneceğiz.
- ) - gözü pek.
- Tablo hücreleri (başlık ve veri hücreleri) için # F50 onaltılık ile 1 piksellik bir katı kenarlık belirledik ve tüm kenarlar için dolguyu 19 piksele ayarladık.
- Sınıflı ilk tablo için .ilk sınıfla ikinci tablo için tablo hücreleri arasındaki boşluğu (border-spacing özelliği) 30px 10px olarak ayarladık .ikinci sınıflı üçüncü tablo için sıfıra eşit .üçüncü 0.2em'e eşittir.
Border-spacing özelliğinde yalnızca bir uzunluk değeri belirtilirse, o zaman hem yatay hem de dikey olarak aralığı belirtir ve iki uzunluk değeri belirtilirse, ilkinin yatay mesafeyi belirlediğine dikkatinizi çekerim. , ve ikinci dikey. Bitişik hücrelerin sınırları arasındaki mesafe, CSS birimlerinde (px, cm, em, vb.) belirtilebilir. Negatif değerlere izin verilmez.
Örneğimizin sonucu:
Tablo hücrelerinin etrafındaki sınırları göster
Söyleyebilirsin: - yani, 0 değeriyle border-spacing özelliğini kullanarak hücreler arasındaki boşluğu kaldırdık, peki şimdi neden kesişen hücrelerin sınırlarına sahibiz?
Bir hücrenin alt kenarının, altındaki hücrenin üst sınırına eklenmesi nedeniyle çift kenarlıklar oluşur, benzer bir durum hücrelerin kenarlarında meydana gelir ve bu, görüntü açısından mantıklıdır. ama neyse ki tarayıcıya hücre sınırlarının bu kadar arsız davranışlarını görmek istemediğimizi söylemenin bir yolu var.
Bunu yapmak için border-collapse CSS özelliğini kullanmanız gerekir. Garip bir şekilde, daraltma değeriyle border-collapse özelliğini kullanmak, hücreler arasındaki boşluğu, aralarında çift kenarlık olmadan ortadan kaldırmanın en iyi yoludur.
0 değeriyle border-spacing özelliğini ve daraltma değeriyle border-collapse özelliğini kullanırken border davranışının bir karşılaştırmasını düşünün:
Tablo hücrelerinin etrafındaki kenarlıkları görüntüleme örneği
sınır aralığı: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
border-collapse: daralt;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
Bu örnekte, biz:
- Tablolarımızı kayar ve sola hizalı hale getirdik (kayan: sola), sağ kenar boşluklarını 30 piksele ayarlayın.
- Tablo adı için ayarla (etiket ) - gözü pek.
- Tablo hücreleri (başlık ve veri hücreleri) için # F50 hex ile 5 piksellik düz bir kenarlık belirledik ve 50 piksellik sabit bir genişlik ve 75 piksellik bir yükseklik belirledik.
- Sınıflı ilk tablo için .ilk tablo hücreleri arasındaki boşluğu sıfıra (border-spacing: 0;) ve sınıflı ikinci tablo için ayarladık .ikinci border-collapse özelliğini daraltmak için ayarlayın; bu, mümkün olduğunda hücre sınırlarını birleştirir.
Örneğimizin sonucu:
Boş hücre davranışı
CSS kullanarak, bir tablodaki boş hücreler için kenarlıkların ve arka planların görüntülenip görüntülenmeyeceğini ayarlayabilirsiniz. Boş hücreler özelliği, önceki örneklerde fark etmiş olabileceğiniz gibi varsayılan olarak boş hücreleri görüntüleyen bu davranıştan sorumludur.
Bir örneğe geçelim:
Boş tablo hücrelerini görüntüleme örneği
boş hücreler: göster;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
boş hücreler: gizle;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
Bu örnekten boş hücreler özelliğinin nasıl çalıştığını anlamak çok basittir, eğer gizlenecek şekilde ayarlanmışsa, boş hücreler ve içlerindeki arka plan gizlenecek, eğer göster (varsayılan) olarak ayarlanmışsa, görüntülenecektir.
Tablo başlığı konumu
Tabloları şekillendirmek için başka bir basit özelliğe bakalım - tablo başlığının konumunu (tablonun üstünde veya altında) belirleyen resim yazısı tarafı. Varsayılan olarak, caption-side özelliği top olarak ayarlanmıştır ve bu, caption-side'ı tablonun yukarısına yerleştirir. Başlığı tablonun altına yerleştirmek için alt değere sahip özelliği kullanmanız gerekir.
Bu özelliği kullanmanın bir örneğini görelim:
Resim yazısı tarafı özelliğini kullanma örneği
Tablonun üstündeki başlık
| İsim | Fiyat |
| Bir balık | 350 ruble |
| Et | 250 ruble |
Tablonun altındaki başlık
| İsim | Fiyat |
| Bir balık | 350 ruble |
| Et | 250 ruble |
Bu örnekte oluşturduğumuz iki sınıf tablo başlığının konumunu kontrol eden. Birinci sınıf ( .topAltyazı) üstüne tablo başlığını koyar, ilk tabloya uyguladık, ikinci sınıfa ( .bottomCaption) tablo başlığını altına yerleştirdik, ikinci tabloya uyguladık. Sınıf .topAltyazı varsayılan bir başlık tarafı özelliğine sahiptir ve tanıtım amacıyla oluşturulmuştur.
Örneğimizin sonucu:
Yatay ve dikey hizalama
Çoğu durumda, tablolarla çalışırken, başlık ve veri hücreleri içindeki içeriğin hizalamasını ayarlamanız gerekir. Metin hizalama özelliği, herhangi bir metin bilgisine benzer şekilde yatay hizalama için kullanılır. Bu özelliğin metin için kullanımını "" makalesinde daha önce tartışmıştık.
Hücrelerdeki içerik için hizalamayı ayarlamak için, metin hizalama özelliğine sahip özel anahtar sözcükler kullanmanız gerekir. Aşağıdaki örnekte bu özelliğin anahtar kelimelerinin uygulamasını ele alalım.
Bir tabloda yatay hizalama örneği
|
Anlam | Açıklama |
|
sol | Hücre metnini sola hizalar. Bu varsayılandır (metin yönü soldan sağa ise). |
|
sağ | Hücre metnini sağa hizalar. Bu varsayılandır (metin yönü sağdan sola ise). |
|
merkez | Hücre metnini ortaya hizalar. |
|
savunmak | Çizgileri, her çizgi aynı genişliğe sahip olacak şekilde uzatır (hücre metnini genişliğe sığdırmak için uzatır). |
Bu örnekte oluşturduğumuz dört sınıf hücrelerde farklı yatay hizalama ayarlayan ve bunları tablonun satırlarına göre uygulayan . Hücredeki değer, metin hizalama özelliğinin değeriyle eşleşir
Örneğimizin sonucu:
Yatay hizalamaya ek olarak, dikey hizalama özelliğini kullanarak tablo hücrelerinde dikey hizalamayı da tanımlayabilirsiniz.
Tablo hücreleriyle çalışırken, bu özelliğin yalnızca aşağıdaki değerlerinin * kullanıldığını lütfen unutmayın:
*
- Tablo hücresine uygulanan sub, super, text-top, text-bottom, uzunluk ve % değerleri taban değeri kullanıyormuş gibi davranacaktır.
Bir kullanım örneğine bakalım:
Tablodaki dikey hizalama örneği
|
Anlam | Açıklama |
|
temel | Hücrenin taban çizgisini üst öğenin taban çizgisine hizalar. Bu varsayılandır. |
|
Tepe | Hücrenin içeriğini dikey olarak üste hizalar. |
|
orta | Hücrenin içeriğini dikey olarak ortada hizalar. |
|
alt | Hücrenin içeriğini dikey olarak alta hizalar. |
Bu örnekte oluşturduğumuz dört sınıf hücrelerde farklı dikey hizalama ayarlayan ve bunları tablo satırlarına sırayla uygulayan . Hücredeki değer, o satıra uygulanan dikey hizalama özelliğinin değeriyle eşleşir.
Tablo düzenini tarayıcı tarafından yerleştirmek için algoritma
CSS, varsayılan olarak tarayıcının otomatik tablo düzeni algoritmasını kullanır. Bu durumda sütun genişliği, hücrenin en geniş bölünmeyen içeriği tarafından belirlenir... Tarayıcının son düzenini belirlemeden önce tablodaki tüm içeriği okuması gerektiğinden, bu algoritma bazı durumlarda yavaş olabilir.
Tablonun düzen türünü tarayıcı tarafından değiştirmek için otomatiküzerinde sabit, sabit olarak ayarlanmış tablo düzeni CSS özelliğini kullanmalısınız.
Bu durumda, yatay yerleştirme yalnızca şunlara bağlıdır: tablonun genişliğinden ve sütunların genişliğinden, hücrelerin içeriğinden değil. Tarayıcı, ilk satır alındıktan hemen sonra tabloyu görüntülemeye başlar. Sonuç olarak, sabit algoritma, böyle bir tablonun düzenini otomatik sürümü kullanmaktan daha hızlı oluşturmanıza olanak tanır. Büyük tablolarla çalışırken performansı artırmak için sabit bir algoritma kullanabilirsiniz.
Bu özelliğin uygulamasına aşağıdaki örnekle bakalım:
Table-layout özelliğini kullanma örneği
tablo düzeni: otomatik;
| İsim |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Buğday |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
masa düzeni: sabit;
| İsim |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Buğday |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
Bu örnekte, biz:
Tablo satırlarını ve sütunlarını şekillendirme
Tablonun satırlarını ve sütunlarını biçimlendirme yöntemlerine "" makalesinde zaten kısmen değindik. Bu makalede, değerler kullanarak tablolarda satır stillerini değiştirmenize izin veren bir grup sözde sınıfı kullanmayı inceledik. hatta (açık sözlü) ve garip (garip) veya ilköğretim tarafından Matematik formülü.
Önceki teknikleri tekrar gözden geçirelim ve tablolardaki satırlara ve sütunlara stil vermenin yeni yollarını keşfedelim. Örneklere geçelim.
Tablolarla birlikte nth-child sözde sınıfının kullanımına bir örnek
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
|
2 | | | | | | |
| | | | | | |
|
3 | | | | | | |
| | | | | | |
|
4 | | | | | | |
| | | | | | |
Bu örnekte, biz:
Örneğimizin sonucu:
Tablo satırlarını şekillendirme seçeneklerine bakacağımız bir sonraki örneğe geçelim.
Tablolardaki stil satırlarına bir örnek
|
Hizmet | Fiyat |
|
toplam |
15 000 |
|
1 |
1 000 |
|
2 |
2 000 |
|
3 |
3 000 |
|
4 |
4 000 |
|
5 |
5 000 |
Bu örnekte, biz:
- Tablonun genişliğini ana öğenin genişliğinin %100'üne ayarlayın, başlık ve veri hücrelerini 1 piksellik düz kenarlık olarak ayarlayın.
- Öğe için yüklendi (Tablonun "Altbilgisi") arka plan rengi - mercan, eleman için (Tablonun "Başlığı") arka plan rengini ayarlayın gümüş.
- Öğeler için
elementin içinde olanlar (tablo gövdesi) üzerine gelindiğinde arka plan rengi değişikliğini ayarla (sözde sınıf: vurgulu) c Beyaz renk başına haki(tüm satır vurgulanır).
Örneğimizin sonucu: Pirinç. 153 Tablolarda Şekillendirme Satırları Örneği Aşağıdaki örnek, tablo hücrelerine (özellik) köşe yuvarlamanın nasıl uygulanacağını gösterir.
Bir hücrenin köşelerini yuvarlama örneği
Bu örnekte, biz:
- Tabloyu dolgularla ortalayın, başlık hücrelerinin genişliğini ve yüksekliğini belirtilen 50 piksele ayarlayın şeffaf sınır 5 piksel.
- Başlık hücresinin üzerine gelindiğinde (sözde sınıf: fareyle üzerine gelindiğinde), arka planı aldığını buldu Mavi renkler, turuncu metin rengi, kenarlık turuncu renkler 5 piksel ve %100 yarıçap.
- Şeffaf kenarlık fareyle üzerine gelindiğinde görüntülenecek olan kenarlık için yer ayırmak için gereklidir, bu yapılmazsa tablo "atlayacaktır".
Örneğimizin sonucu:
Aşağıdaki örnek, HTML öğelerinin kullanımına değinmektedir. ve ve onların stili.
Tablo sütunlarını vurgulama örneği
|
Başvuru numarası | Hizmet | fiyat, ovmak. | Toplam |
|
1 | Şarkı söyleme |
6 000 |
6 000 |
|
2 | bulaşık yıkama |
2 000 |
2 000 |
|
3 | Temizlik |
1 000 |
1 000 |
|
4 | dırdır etmek |
1 500 |
1 500 |
|
5 | Okuma |
3 000 |
3 000 |
Bu örnekte, biz:
Örneğimizin sonucu:
Pekala, anlaşılması oldukça zor olan ve CSS'de ileri düzeyde bilgi gerektiren son örnek, bu ders çerçevesinde ayrıntılı çalışma için planlanan gelecekteki konulara değiniyor.
Önceki örnekte, HTML öğesinin arka plan rengi olan yalnızca bir CSS özelliği uygulayabilirsiniz, ancak bu öğenin üzerine gelindiğinde arka plan rengini (: vurgulu sözde sınıfı) doğrudan ayarlayamazsınız. Bu örnekte, yalnızca CSS kullanarak bir tablo sütununun nasıl vurgulanacağına bakacağız.
Fareyle üzerine gelindiğinde bir tablonun sütunlarını ve satırlarını vurgulamaya bir örnek
|
Başvuru numarası | Hizmet | fiyat, ovmak. | Toplam |
|
1 | Şarkı söyleme |
6 000 |
6 000 |
|
2 | bulaşık yıkama |
2 000 |
2 000 |
|
3 | Temizlik |
1 000 |
1 000 |
|
4 | dırdır etmek |
1 500 |
1 500 |
|
5 | Okuma |
3 000 |
3 000 |
Bu örnekte, biz:
- Tablomuzu ana öğenin %100'ünü işgal edecek şekilde ayarladık, tablo hücreleri ana öğenin %25'ini kaplar ve 1 piksel yeşil düz kenarlığa sahiptir, başlıklar ve veri hücreleri 45 piksel yüksekliğindedir. değeri ile border-collapse özelliğini kullanarak hücreler arasındaki boşluğu kaldırdık.
.
- Ve böylece, sözde öğeden sonra :: kullanarak, her öğeden sonra içerik ekleyin.
Üzerinde gezinme. :: after sözde öğesi, arka plan rengine sahip bir blok öğesi eklediğimiz için içerik özelliğiyle birlikte kullanılır. Orman yeşili ve sahip mutlak konumlandırma.
- Burada mutlak konumlandırma, öğeyi atasının belirtilen kenarına göre ofsetlemek için gereklidir, oysa üst öğenin varsayılan statik dışında bir konum değerine sahip olması gerekir, aksi takdirde sayım, bu nedenle tarayıcı penceresinin belirtilen kenarına göre olacaktır. masaya koyduk göreceli konumlandırma(akraba).
- Oluşturulan bloğumuz için, konumlandırılan elemanın üst kenardan ötelenme yönünü gösteren top özelliğini ve konumlandırılan elemanın alt kenardan ötelenme yönünü gösteren alt özelliği belirledik. Her iki özellik için de 0 değeri belirtildi, bu nedenle blok tablonun altından ve üstünden öğeyi tamamen kaplayacak, bu bloğun genişliği %25 olarak ayarlandı, bu değer hücrenin kendisinin genişliğine karşılık geliyor.
- Ve bu blok için belirlediğimiz son özellik: "-1" değerine sahip z-index, konumlandırılan elemanların sırasını şu şekilde belirler: Z ekseni... Bu özellik, metnin bu bloğun önünde olması ve arkasında olmaması için gereklidir, sıfırdan küçük bir değer ayarlamazsanız, blok metni kapatır.
Örneğimizin sonucu:
Çalışmanın bu aşamasında, öğelerin konumlandırılma sürecini anlamıyorsanız, cesaretiniz kırılmasın, bu, bizim de dikkate almadığımız, anlaşılması zor bir konudur, ancak kesinlikle bir sonraki makalede ele alacağız. "Öğeleri CSS'de konumlandırma" öğreticisi.
Konuyla ilgili sorular ve görevler
Bir sonraki konuya geçmeden önce Alıştırma Aktivitesini tamamlayın:
 Uygulamayı tamamlamakta zorluk çekiyorsanız, örneği her zaman ayrı bir pencerede açabilir ve hangi CSS'nin kullanıldığını görmek için sayfayı inceleyebilirsiniz.
2016-2020 Denis Bolshakov, sitenin çalışmaları hakkında görüş ve önerilerinizi [email protected] adresine gönderebilirsiniz.
| |
|
| |
