Html tablosunun sütunları arasındaki boşluk. Cellspacing niteliğini kullanma

Sizinle birlikte HTML tablolarının çerçevetarayıcılar bunları varsayılan olarak göstermez. Ancak hepsi bu kadar değil, tablonun her hücresinde ayrıca hücre sınırı... Ancak hepsi bu kadar değil, özel etiket niteliklerini kullanarak

Hücreler arasındaki ve hücrelerden tablo kenarlığına kadar olan aralığı değiştirebilir, ayrıca hücrelerin kenarlıklarından içeriklerine kadar dolgu yapabilirsiniz.

HTML tablo çerçevesi, hücre kenarlıkları, boşluk ve dolgu.

İçin böylece çerçeve oluşturma HTML tabloları ve hücrelerinin sınırları yalnızca bir etiket özelliği kullanılır

- sınır. Öznitelik değeri, negatif olmayan tam sayılardır (varsayılan olarak sıfır), bu, piksel cinsinden boyut anlamına gelir. Ancak dikkat, boyut sadece tablonun sınırında değişir, hücrelerin sınırlarında her zaman değişmez.

...

Degisim icin hücreler arası mesafe (sınırları) ve hücrelerden çerçeveye etiketteki tablolar

hücre aralığı niteliği uygulanır. Değerleri, yalnızca mesafeleri piksel cinsinden ölçen sayılar olabilir.

...

Dahili ayarlamak için hücre sınırlarından içeriğine dolgu etikette gerekli

hücre dolgusu özelliğini kullanın. Ve değerleri, piksel boyutlarını temsil eden sayılardır.

...

Tarayıcıların varsayılan olarak küçük (iki piksel) hücre aralığı ve hücre dolgusu değerlerini ayarladığını unutmayın, bu nedenle aralıkları tamamen kaldırmak için nitelikleri sıfır (0) olarak ayarlayın.

HTML tablolarının kenarlıkları, sınırları ve dolgusu örneği

Hücre 1.1	Hücre 1.2	Hücre 1.3
Hücre 2.1	Hücre 2.2	Hücre 2.3
Hücre 3.1	Hücre 3.2	Hücre 3.3

Yalnızca kenarlık ve hücre kenarlıkları ayarlanmış tablo:

Hücre 1.1	Hücre 1.2	Hücre 1.3
Hücre 2.1	Hücre 2.2	Hücre 2.3
Hücre 3.1	Hücre 3.2	Hücre 3.3

Tarayıcıdaki sonuç

Değişen girinti ve mesafelere sahip tablo:

Doğal olarak, hücreler arasındaki dolguyu ve aralığı değiştirmek için tablodaki hücrelerin çerçevesini ve kenarlıklarını çizmeye gerek yoktur.

HTML sözdizimine göre, tarayıcılar tablonun ve hücrelerinin boyutlarına hücre aralığı ve hücre dolgusu değerleri ekler. Örneğin, hücre genişliğini 100 piksel olarak ayarlarsanız ve hücre dolgusu \u003d "10" - tarayıcılar genişliğe 20 piksel ekler (solda ve sağda her biri 10) ve bu 120 piksel olur. Genel olarak, yol boyunca anlayacaksınız.

Konudan sapma veya sayfanın kenarlarındaki dolgunun nasıl kaldırılacağı

Başlangıçta, tüm tarayıcılar HTML sayfalarının kenarlarında genellikle gereksiz olan küçük kenar boşlukları ayarlar, bu nedenle şimdi bunları nasıl kaldıracağınızı öğreneceksiniz. Genel olarak, bu bilgi ders kitabının başına yerleştirilmelidir, ancak orada sizin için pek yararlı olmaz.

Bir seferde etiket Sayfanın her bir tarafı için bu kenar boşluklarının boyutunu belirleyen dört özellik vardı: üst kenar boşluğu (üst), sağ kenar boşluğu (sağ), alt kenar boşluğu (alt) ve sol kenar boşluğu (sol). Bu özellikler artık kullanımdan kaldırılmıştır, bu nedenle stilleri (CSS) uygulayacağız. Yani, sayfanın kenarlarındaki dolgunun aralığını değiştirmenin birkaç yolu var, size iki tane göstereceğim ve CSS öğrenmeye karar verirseniz üçüncüsünü öğreneceksiniz.

Birinci yöntem. B etiketi stil niteliğini aşağıdaki değerlerle belirtin:

style \u003d "margin: 0"\u003e ... - HTML sayfasının tüm kenarlarındaki girintileri aynı anda kaldırır.

style \u003d "margin: üst sağ alt sol">... - her iki taraf için saat yönünde girinti miktarını ayarlar. Tipik olarak piksel boyutları kullanılır, örneğin: style \u003d "margin: 5px 3px 4px 5px"\u003e ...

İkinci ve daha uygun yol. Etikette

Ödev.

Bu derste de her şeyi ayrıntılı olarak açıklamayacağım - sadece genel noktaları. Tamlık için örneğin sonucuna bakın.

1. Her biri bir satır ve üç sütun içeren üç tablo oluşturun.
2. İlk tabloda, sayfanın Üstbilgisini veya "üstbilgisini" (HTML belgesinin "üstbilgisi" ile karıştırılmamalıdır), ikinci - sol ve sağ menülerin yanı sıra ana içeriği (içerik) üçüncü - Altbilgi veya sayfanın "altbilgisi" bölümüne yerleştirin.
3. Her tablonun ilk ve son sütununun genişliğinin sabitlenmesine izin verin.
4. Önemli. Bir etiket kullanın sadece sayfanın başlığında dört yatay menü düğmesi oluşturmak için. Diğer durumlarda, resimler arka planda olsun ve tabloların ikinci hücrelerinde genellikle yalnızca renkler kullanılır ve ilk ve son tabloda # 99FF99 olur.
5. Sayfa içeriği metninin tablo hücresinin her iki yanında hizalanmasına ve başlığın ortalanmasına izin verin.
6. Tablo hücreleri arasındaki boşlukların yanı sıra hücrelerin girintilerine gelince, bunları nerede tamamen kaldırmanız gerektiğini ve nerede artırmanız gerektiğini kendiniz düşünün.

CSS özelliği, masa tasarımı için sınırsız olanaklar sunar. Varsayılan olarak, tablo ve tablo hücrelerinin görünür kenarlıkları ve arka planları yoktur ve tablo içindeki hücreler birbirine bitişik değildir.

Tablo hücrelerinin genişliği, içeriklerinin genişliğine göre belirlenir, bu nedenle tablo sütunlarının genişliği farklı olabilir. Satırdaki tüm hücrelerin yüksekliği aynıdır ve en uzun hücrenin yüksekliğine göre belirlenir.

Tabloları biçimlendirme

1. Tablo sınırları sınırı

İçerisindeki tablo ve hücreler, varsayılan olarak görünür kenarlıklar olmadan tarayıcıda görüntülenir. Tablo sınırları border özelliği tarafından belirlenir:

Tablo (border-collapse: collapse; / * hücreler arasındaki boş boşlukları kaldırın * / border: 1px düz gri; / * tablo için 1px gri dış kenarlık ayarlayın * /)

Üstbilgi hücre sınırları her sütun, th öğesi için ayarlanmıştır:

Th (kenarlık: 1px düz gri;)

Hücre kenarlıkları tablo gövdeleri td öğesi için ayarlanmıştır:

Td (sınır: 1px düz gri;)

Bitişik hücrelerin kenarlıklarının genişliği iki katına çıkmaz, böylece tüm tablonun kenarlıklarını aşağıdaki şekilde ayarlayabilirsiniz:

Th, td (sınır: 1px düz gri;)

Tablonun dış kenarlığı, genişliğe artırılarak seçilebilir:

Tablo (sınır: 3px düz gri;)

Sınırlar kısmen ayarlanabilir:

/ * tablo için 3px gri bir dış kenarlık ayarlayın * / table (border-top: 3px solid gray;) / * tablo gövde hücresi için 1px gri bir kenarlık ayarlayın * / td (border-bottom: 1px düz gri;)

Border özelliği hakkında daha fazla bilgi edinebilirsiniz.

2. Tablonun genişliği ve yüksekliği nasıl ayarlanır

Varsayılan masa genişliği ve yüksekliği hücrelerinin içeriğine göre belirlenir. Genişlik belirtilmezse, en geniş satırın (satır) genişliğine eşit olacaktır.

Tablo ve Sütun Genişliği width özelliğini kullanarak ayarlayın. Bir tablo için tablo (genişlik:% 100;) belirtilmişse, bu durumda tablonun genişliği, içinde bulunduğu konteyner bloğunun genişliğine eşit olacaktır.

Tablonun ve sütunların genişliği genellikle px veya% olarak belirtilir, örneğin:

Tablo (genişlik: 600px;) th (genişlik:% 20;) td: birinci-çocuk (genişlik:% 30;)

Masa yüksekliği ayarlanmadı. Satırların yüksekliği tablolar, öğelere üst ve alt dolgu eklenerek değiştirilebilir ve ... Yükseklik özelliğini kullanarak yüksekliğin sabitlenmesi tavsiye edilmez.

Th, td (dolgu: 10px 15px;)

3. Tablonun arka planı nasıl ayarlanır

Varsayılan masa arka planı ve hücreler şeffaftır. Tabloyu içeren sayfa veya bloğun bir arka planı varsa, tablo boyunca parlayacaktır. Arka plan hem tablo hem de hücreler için ayarlanmışsa, tablonun ve hücrelerin arka planının çakıştığı yerlerde yalnızca hücrelerin arka planı görünür olacaktır. Bir bütün olarak tablonun arka planı ve hücreleri şunlar olabilir:
dolgu
,
.

4. Tablo sütunları

CSS tablo modeli, esas olarak etiket kullanılarak oluşturulan dizelere (satırlara) odaklanır.

... Pratikte, aşağıdaki şekillerde mümkün olan özel sütun biçimlendirmesine ihtiyaç duyduğunuz zamanlar vardır:

etiketi kullanarak

İstediğiniz sayıda sütun için arka planı ayarlayabilirsiniz;

td: birinci-alt, tablo td: son-alt seçiciyi kullanarak tablonun ilk veya son sütununa stil uygulayabilirsiniz (tablo başlığının ilk hücresi hariç);

tablo seçiciyi kullanarak td: nth-child (sütun seçim kuralı), tablodaki herhangi bir sütunun stilini belirleyebilirsiniz.

CSS seçiciler hakkında daha fazla bilgi edinebilirsiniz.

5. Tablo başlığı nasıl eklenir?

Etiketini kullanarak tabloya bir 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 1

şirket	Q1	S2	S3	Q4

başlık (başlık tarafı: alt; metin hizalama: sağ; dolgu: 10px 0; yazı tipi boyutu: 14px;) Şekil: 2. Başlığın tablonun altında görüntülenmesine bir örnek

6. Hücre çerçeveleri arasındaki boşluk nasıl kaldırılır

Varsayılan olarak, tablo hücrelerinin sınırları küçük bir boşlukla ayrılır. Tablo için border-collapse: collapse ayarını yaparsak, boşluk kaldırılacaktır. Özellik miras alınır.

Sözdizimi

Tablo (border-collapse: collapse;)
Şekil: 3. Birleştirme ve bölünmüş hücre kenarlıkları içeren bir tablo örneği

7. Hücre çerçeveleri arasındaki boşluk nasıl artırılır

Kenarlık aralığı özelliğini kullanarak hücre kenarlıkları 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;)
Şekil: 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 içerik içermeyen hücreleri etkiler. Bir hücre için arka plan belirtilirse ve tablo için tablo (border-collapse: collapse;) belirtilirse, hücre gizlenmez. Miras.

şirket	Q1	S2	S3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tablo (sınır: 1px katı # 69c; sınır-daraltma: ayrı; boş hücreler: gizle;) th, td (sınır: 2px katı # 69c;) Şekil: 5. Boş bir tablo hücresini gizlemeye bir örnek

9. table-layout ö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. Özellik miras alınmaz.

Sözdizimi

Tablo (tablo 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 çizgidir. Th başlığının altına iki piksellik bir kenarlık yerleştirerek tabloları minimalist bir tarzda şekillendirebilirsiniz.

Çalışan	Maaş	Bonus	Süpervizör
Stephen C. Cox	$300	$50	Bob
Josephin tan	$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: 14px; arka plan: beyaz; maks. genişlik:% 70; genişlik:% 70; kenarlık daraltma: daraltma; metin -align: left;) th (yazı tipi ağırlığı: normal; renk: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px;) td (renk: # 669; dolgu: 9px 8px; geçiş: .3s doğrusal;) tr: vurgulu td (renk: # 6699ff;)

Çok sayıda satır içeren bu tablo tasarımı, okumayı zorlaştırır. Bu sorunu çözmek için, tüm td elemanlarının altına bir piksel kenarlığı ekleyebilirsiniz.

Td (border-bottom: 1px solid #ccc; color: # 669; padding: 9px 8px; geçiş: .3s doğrusal;) / * kodun geri kalanı yukarıdaki örnekteki gibidir * /

Tr öğesine bir: hover efekti eklemek minimalist tarzda tabloların okunmasını kolaylaştırır. Fareyi bir hücrenin üzerine getirdiğinizde, aynı satırdaki geri kalan hücreler aynı anda vurgulanır, bu da tabloların birden çok sütuna sahip olması durumunda bilgileri takip etmeyi kolaylaştırır.

Th (yazı tipi ağırlığı: normal; renk: # 039; dolgu: 10px 15px;) td (renk: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (arka plan: # e8edff ;)

2. Dikey minimalizm

Bu tür tablolar nadiren kullanılsa da, dikey olarak yönlendirilmiş tablolar bir sütunla temsil edilen nesnelerin açıklamalarını kategorize etmek 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; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; renk: # 039; dolgu: 8px 2px;) td (kenarlık- sağ: 30px katı #fff; border-left: 30px katı #fff; renk: # 669; dolgu: 12px 2px;)

3. "Kutu" stili

Her türden masa dekorasyonu için en güvenilir stil, sözde "kutu" tarzıdır. İyi bir renk şeması seçmek ve ardından tüm hücreler için arka plan rengini ayarlamak yeterlidir. Kenarlıkları ayırıcı olarak belirleyerek çizgiler arasındaki farkı vurgulamayı unutmayın.

Th (yazı tipi boyutu: 13px; yazı tipi ağırlığı: normal; arka plan: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; renk: # 039; dolgu: 8px;) td (arka plan : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: hover td (arka plan: #ccddff;)

En zor şey, sitenizle uyumlu bir şekilde uyum sağlayacak renk düzenini bulmaktır. Site grafik ve tasarım yüklü ise bu stili kullanmanız oldukça zor olacaktır.

Tablo (yazı tipi ailesi: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; yazı tipi boyutu: 14px; maks. Genişlik:% 70; genişlik:% 70; metin hizalama: merkez; kenarlık daraltma: daraltma ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (yazı tipi boyutu: 13px; yazı tipi ağırlığı: normal; arka plan: # e8edff; border-right: 1px katı # 9baff1; border- sol: 1px katı # 9baff1; renk: # 039; dolgu: 8px;) td (arka plan: # e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; renk: # 669; dolgu: 8px ;)

4. Yatay zebra

Zebra masası 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 görevi görebilir.

Th (yazı tipi ağırlığı: normal; renk: # 039; dolgu: 10px 15px;) td (renk: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( arkaplan: # 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 düzeniyle oynayın, kenarlıklar ekleyin, dolgular, farklı arka planlar ve bir çizginin üzerinde gezinirken: fareyle üzerine gelme efekti ekleyin.

Tablo (sınır: 1px katı # 69c;) th (yazı tipi ağırlığı: normal; renk: # 039; kenarlık-alt: 1px çizgili # 69c; dolgu: 12px 17px;) td (renk: # 669; dolgu: 7px 17px; ) tr: vurgulu td (arka plan: #ccddff;)

Tablo (kenarlık: 1px düz # 69c;) th (yazı tipi ağırlığı: normal; renk: # 039; dolgu: 10px;) td (renk: # 669; kenarlık-üst: 1px kesikli #fff; dolgu: 10px; 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; kenarlık-sağ: 1px katı # 0865c2; kenarlık-üst: 1px katı # 0865c2; border-left: 1px solid # 0865c2; border-bottom: 1px solid #fff; padding: 20px;) td (renk: # 669; border-right: 1px çizgili # 6cf; dolgu: 10px 20px;)

6. Tablo arka planı

Masanızın stilini belirlemenin hızlı ve benzersiz bir yolunu arıyorsanız, masanın temasıyla ilgili çekici bir resim veya fotoğraf seçin ve masanın arka planı olarak ayarlayın.

Png ")% 98% 86 tekrar yok;) th (yazı tipi ağırlığı: normal; yazı tipi boyutu: 14px; renk: # 339; dolgu: 10px 12px; arka plan: beyaz;) td (renk: # 669; kenarlık- üst: 1px düz beyaz; dolgu: 10px 12px; arka plan: rgba (51, 51, 153, .2); geçiş: .3s;) tr: vurgulu td (arka plan: rgba (51, 51, 153, .1); )

Merhaba! Böylece, artık ihtiyaç duyduğunuz sayıda 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örüntülendi. Ve görüyorsunuz, öyle görünüyor ki, ona bir işaret bile diyemezsiniz. HTML'de tablo kenarlıkları yapmak için etikete ekleyin

nitelik sınır, sıfırdan farklı bir değer vererek.

Öyleyse tablo için kenarlıklar oluşturalım. Örneğin, zaten sahip olduğumuz için:

Sol üstteki hücre	Sağ üst hücre
Sol alttaki hücre	Sağ alt hücre

Tarayıcıdaki sonuç:

Tablo kenarlıkları nasıl kaldırılır

Buna karşılık, HTML tablosunun kenarlıklarını kaldırmak için veya bunları görünmez yapmak için de diyebilirsiniz, özniteliğe ihtiyacınız var sınır değeri ayarla 0 ... Bu basit işlemlerden sonra çerçeve kaldırılacaktır.

Bu özellik, sınırları oluşturmanıza ancak yönetmenize izin vermez. Yalnızca kalınlıklarını değiştirmenize izin verir.

Bu nedenle, şimdi konuşacağız CSSkimin özellikleri ile mümkün kılar sınırbir bütün olarak masanın etrafında hem hücre 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ğını görelim.
Bunu yapmak için, border niteliğini tablomuzdan kaldırın ve stiller ekleyin:

Sol üstteki hücre	Sağ üst hücre
Sol alttaki hücre	Sağ alt hücre

Tarayıcıdaki sonuç:

Şimdi her hücreye kenarlık ekleyelim. Bunu yapmak için stilleri eklemeniz yeterlidir:

Tarayıcıdaki sonuç:

HTML tablosundaki hücreler arasındaki dolgu nasıl kaldırılır

CSS kullanılarak tanımlanan bir sınırın istediğiniz gibi görünmediğini kabul edin. Kuşkusuz estetik açıdan yapılacak işler var. Tarayıcı sayfasında, varsayılan olarak tabloların ve hücrelerin kenarlıkları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 bordürlerden kurtulmak oldukça olasıdır. Pratikte şöyle görünür:

Tablo (sınır: düz 1 piksel mavi; kenarlık daraltma: daraltma;) ...

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 sınırlarının ve tablonun dış kenarlığının daralmasıdır. İkincisine gelince, tamamen kaldırılabilir. Ve onu sergilemeye ihtiyaç varsa, genişliğini artırmanız gerekir. Böylece tablodaki seperatörlerden kurtulmuş olduk. Bir sonraki derste, dikey ve yatay sınırları nasıl belirleyebileceğinizden bahsedeceğiz. Hepinize iyi şanslar!

Sayfadaki metin bilgileri, bağlantılar, resimler, başlıklar gibi birçok öğe stil oluşturma yöntemini düşündük, ancak bunların hepsi henüz yeterli değil. Makalelerimde genellikle tablolar gibi HTML öğeleri kullanırım çünkü çoğu durumda önemli bilgileri düzenlemeye ve sunmayı kolaylaştırmaya yardımcı olur.

Bu makalede, size HTML tablolarını şekillendirmenin 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:

(Tablonun "Altbilgisi") arka plan rengi - mercan, eleman için (Masa "başı") arka plan rengini ayarlayın gümüş.

Öğeler için

elementin içinde (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 vurgulanmıştır).

Örneğimizin sonucu:

Şekil: 153 Tablolardaki Satırlara Stil Verme Örneği

Aşağıdaki örnek, tablo hücrelerine (özellik) köşe yuvarlamanın nasıl uygulanacağını gösterir.

) alt dolguyu 19 piksel olarak ayarladık. Umarım düzensiz sayılarla kafanız karışmaz :)

Örneğimizin sonucu:

Hücreler arasındaki 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ğun nasıl kaldırılacağına veya artırılacağına bakalım.

Komşu hücrelerin sınırları arasındaki mesafeyi ayarlamak için, CSS özelliğini (sınır aralığı) kullanmanız gerekir.

sınır aralığı: 30px 10px;

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:

• float: sol). Kayan elemanlar konusunu kaçırdıysanız, bu eğitimde her zaman konuya geri dönebilirsiniz - "".
• Ek olarak, sağdaki tablo dolgusunu 30px'e ayarlıyoruz ve tabloların dikey hizalamasını ayarlıyoruz (elemanın üstü, en uzun elemanın üstüyle hizalı). Bu yazıda bu mülke ayrıntılı olarak geri döneceğiz.

) - kalın.

Tablo hücreleri (başlık ve veri hücreleri) için, # F50 onaltılık renkli 1 piksellik bir düz kenarlık belirledik ve tüm kenarlar için dolguyu 19 piksele ayarladık.

Sınıflı ilk tablo için .ilk sınıflı ikinci tablo için tablo hücreleri (border-spacing özelliği) arasındaki aralığı 30px 10px olarak ayarladık .ikinci sıfıra eşit, sınıflı üçüncü tablo için .üçüncü 0.2em'e eşit.

Dikkatinizi, border-spacing özelliğinde yalnızca bir uzunluk değeri belirtilmişse, aralığı hem yatay hem de dikey olarak gösterdiği ve iki uzunluk değeri belirtilmişse, ilkinin yatay mesafeyi ve ikinci düşeyinin belirlediğine dikkatinizi çekerim. Bitişik hücrelerin sınırları arasındaki mesafe CSS birimleri (px, cm, em, vb.) Cinsinden belirtilebilir. Negatif değerlere izin verilmez.

Örneğimizin sonucu:

Tablo hücrelerinin etrafındaki kenarlıkları görüntüleme

Söyleyebilirsin: - böylece, 0 değerine sahip border-spacing özelliğini kullanarak hücreler arasındaki boşluğu kaldırdık, ancak şimdi neden kesişen hücrelerin sınırlarına sahibiz?

Bir hücrenin alt sınırının, altındaki hücrenin üst sınırına eklenmesi, hücrelerin yanlarında da benzer bir durum oluşması nedeniyle çift bordür oluşur ve bu tablonun görüntülenmesi açısından mantıklıdır, ancak neyse ki tarayıcıya bizim olduğumuzu söylemenin bir yolu vardır. hücre sınırlarının böylesine arsız davranışını görmek istemiyoruz.

Bunu yapmak için, border-collapse CSS özelliğini kullanmanız gerekir. İşin garibi, daraltma değeriyle border-collapse özelliğini kullanmak, hücreler arasındaki boşluğu kaldırmanın ve aralarında çift kenarlık kalmamasının en iyi yoludur.

0 olarak ayarlanan border-spacing özelliğini ve daraltılacak şekilde ayarlanan border-collapse özelliğini kullanırken sınır davranışının bir karşılaştırmasını düşünün:

sınır aralığı: 0;

1	2	3
2
3

border-collapse: collapse;

1	2	3
2
3

Bu örnekte biz:

• Tablolarımızı float ve sola hizalı (float: left) yaptık, sağ dolgusunu 30px olarak ayarladık.
• Tablo adı için ayarlayın (etiket

) - kalın.

Tablo hücreleri (üstbilgi ve veri hücreleri) için # F50 hex ile 5px katı bir sınır belirledik ve 50px'lik sabit bir genişlik ve 75px'lik bir yükseklik belirledik.

Sınıflı ilk tablo için .ilk tablo hücreleri arasındaki aralığı sıfıra (border-spacing: 0;) ve sınıfın bulunduğu ikinci tablo için .ikinci border-collapse özelliğini, mümkün olduğunda hücre kenarlıklarını bir araya getiren daraltılacak şekilde ayarlayın.

Örneğimizin sonucu:

Boş hücrelerin davranışı

CSS, bir tablodaki boş hücreler için kenarlıkların ve arka planların görüntülenip görüntülenmeyeceğini ayarlamak için kullanılabilir. Bu davranıştan boş hücreler özelliği sorumludur ve önceki örneklerden fark etmiş olabileceğiniz gibi, varsayılan olarak boş hücreleri görüntüler.

Bir örneğe geçelim:

boş hücreler: göster;

1	2	3
2		☺
3	☺

boş hücreler: gizle;

1	2	3
2		☺
3	☺

Bu örnekte 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, gösterilecek şekilde ayarlanmışsa (varsayılan), o zaman görüntüleneceklerdir.

Tablo başlığı konumu

Tabloları şekillendirmek için başka bir basit özelliğe bir göz atalım - tablo başlığının konumunu (tablonun üstünde veya altında) ayarlayan başlık tarafı. Varsayılan olarak, resim yazısı tarafı özelliği, resim yazısını tablonun üstüne yerleştiren üste ayarlanmıştır. Başlığı tablonun altına yerleştirmek için alt değeri olan özelliği kullanmanız gerekir.

Bu özelliği kullanmanın bir örneğini görelim:

Masanın üst kısmına doğru

İ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şturduk iki sınıftablo başlığının konumunu kontrol eden. Birinci sınıf ( .topCaption) tablo başlığını üstüne koyar, onu ilk tabloya ve ikinci sınıfa uyguladık ( .bottomCaption) tablo başlığını altına yerleştirir, ikinci tabloya uyguladık. Sınıf .topCaption varsayılan bir resim yazısı tarafı özelliğine sahiptir ve gösteri 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 gerekecektir. 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ı "" makalesinin önceki bölümlerinde tartışmıştık.

Hücrelerdeki içeriğin hizalamasını ayarlamak için, metin hizalama özelliğine sahip özel anahtar sözcükler kullanmanız gerekir. Aşağıdaki örnekte bu mülkün anahtar kelimelerinin kullanımını ele alalım.

Değer	Açıklama
ayrıldı	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 (metnin yönü sağdan sola ise).
merkez	Hücre metnini ortaya hizalar.
haklı çıkarmak	Her satırın aynı genişliğe sahip olması için satırları uzatır (hücre metnini genişliğe sığacak şekilde uzatır).

Bu örnekte, oluşturduk dört sınıfhücrelerde farklı yatay hizalamalar ayarlayan ve bunları tablo satırlarına 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 hizalama 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:

* - Bir tablo hücresine uygulanan sub, super, text-top, text-bottom, length ve% değerleri, bir temel değer kullanıyormuş gibi davranacaktır.

Bir kullanım örneğine bakalım:

Değer	Açıklama
temel	Hücrenin taban çizgisini ebeveynin taban çizgisine hizalar. Bu varsayılandır.
üst	Hücrenin içeriğini dikey olarak üste hizalar.
orta	Hücrenin içeriğini ortada dikey olarak hizalar.
alt	Hücrenin içeriğini dikey olarak alta hizalar.

Bu örnekte, oluşturduk dört sınıfHücrelerde farklı dikey hizalamalar ayarlayan ve bunları tablo satırlarına uygulayan. Hücredeki değer, o satıra uygulanan dikey hizalama özelliğinin değeriyle eşleşir.

Tarayıcıya göre tablo düzeni yerleştirme algoritması

CSS, varsayılan olarak tarayıcının otomatik tablo düzeni algoritmasını kullanır. Bu durumda sütun genişliği, bölünmeyen en geniş hücre 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.

Tablo düzeninin yerleşim türünü tarayıcı ile değiştirmek için otomatik açık sabitsabit değerle tablo düzeni CSS özelliğini kullanmanız gerekir.

Bu durumda, yatay yerleşim yalnızca şunlara bağlıdır: hücrelerin içeriğinden değil, tablonun genişliğinden ve sütunların genişliğinden. Tarayıcı, ilk satır alındıktan hemen sonra tabloyu görüntülemeye başlar. Sonuç olarak, sabit algoritma, bu tür 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:

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

"" Makalesinde tablonun satırlarını ve sütunlarını şekillendirme yöntemlerine kısmen değindik. Bu makalede, değerleri kullanarak tablolardaki satır stillerini değiştirmenize olanak tanıyan bir grup sözde sınıfı kullanmaya baktık. hatta (hatta) ve garip (garip) veya temel matematik formülü.

Önceki teknikleri tekrar gözden geçirelim ve tablolardaki satırları ve sütunları şekillendirmenin yeni yollarını öğrenelim. Örneklere geçelim.

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.

Hizmet	Ücret
Miktar	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 elemanın genişliğinin% 100'ü olarak ayarladık ve başlık ve veri hücreleri için 1 piksellik bir katı sınır belirledik.
• Öğe için yüklendi

Etiket	Açıklama
. Tablonun içeriğini tanımlar. Tablonun adını belirtir. Tablonun başlık hücresini tanımlar. Bir 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çermekteydi. Tablonun "altbilgisini" (altbilgi) içermek için kullanılır. Bir etiket içindeki her sütun için belirtilen sütun özelliklerini tanımlar Bir tablodaki bir grup sütun tanımlar. Tablo girintileriyle çalışma Tablo girintileri 1 2 3 4 2 3 4 Bu örnekte biz: Dış dolgu ile yatay merkezleme tekniğini kullanarak masayı merkeze yerleştirin (kenar boşluğu: 0 otomatik). Tablonun adı için (etiket

1	2	3	4	5

Bu örnekte biz:

• Tabloyu dolgularla ortalayın, başlık hücrelerinin genişliğini ve yüksekliğini 50 piksel olarak ayarlayın, belirtilen şeffaf kenarlık 5 piksel.
• Başlık hücresinin üzerine gelindiğinde (sözde sınıf: hover) arka planı aldığını buldum mavi renkler, portakal metin rengi, kenarlık portakal renkler 5 piksel ve% 100 yarıçap.
• Şeffaf kenarlık üzerine gelindiğinde görüntülenecek olan sınır için yer ayırmak için gereklidir, bu yapılmazsa masa "zıplar".

Örneğimizin sonucu:

Aşağıdaki örnek, HTML öğelerinin kullanımına değinmektedir ve ve onların stilleri.

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	1 500	1 500
5	Okuma	3 000	3 000

Bu örnekte biz:

Örneğimizin sonucu:

Evet, anlaşılması oldukça zor olan ve CSS'de ileri düzeyde bilgi gerektiren son örnek, bu ders çerçevesinde detaylı çalışma için planlanan ilerideki konulara değinirken.

Önceki örnekte, HTML öğesinin Yalnızca bir CSS özelliği, arka plan rengi uygulayabilirsiniz, ancak bu öğede fareyle üzerine gelindiğinde (: hover sözde sınıfı) arka plan rengini doğrudan ayarlayamazsınız. Bu örnekte, sadece CSS kullanarak bir tablo sütununun nasıl vurgulanacağına bakacağız.

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	1 500	1 500
5	Okuma	3 000	3 000

Bu örnekte biz:

• Tablomuzu ana öğenin% 100'ünü kaplayacak şekilde ayarladık, tablo hücreleri ana öğenin% 25'ini kaplar ve 1 piksellik yeşil düz kenarlığa sahip, başlıklar ve veri hücreleri 45 piksel yüksekliğindedir. Değeriyle 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 elemanı zorunlu olarak content özelliği ile birlikte kullanılır, bu sayede arka plan rengine sahip bir blok eleman eklediğimiz için orman yeşili ve sahip mutlak konumlandırma.
• Öğeyi atasının belirtilen kenarına göre kaydırmak için burada mutlak konumlandırma gereklidir, atanın varsayılan statik dışında bir konum değerine sahip olması gerekir, aksi takdirde sayı tarayıcı penceresinin belirtilen kenarına göre olacaktır, bu nedenle tablo için belirledik göreceli konumlandırma (göreceli).
• Oluşturduğumuz bloğumuz için konumlandırılan elemanın üst kenardan ofset yönünü belirten top özelliğini ve konumlandırılan elemanın alt kenardan ofset yönünü gösteren bottom özelliğini belirledik. Her iki özellik için de 0 değeri belirtildi, böylece blok tablonun altından ve üstünden öğeyi tamamen işgal edecek, bu bloğun genişliği% 25 olarak ayarlandı, bu değer hücrenin kendi genişliğine karşılık gelir.
• Ve bu blok için belirlediğimiz son özellik: "-1" değerine sahip z-endeksi, 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 kapatacaktır.

Örneğimizin sonucu:

Çalışmanın bu aşamasında öğeleri konumlandırma sürecini anlamıyorsanız, cesaretiniz kırılmasın, bu anlaşılması zor bir konudur, biz de dikkate almadık, ancak bunu "CSS'de konumlandırma öğeleri" eğitiminin sonraki makalesinde kesinlikle ele alacağız.

Konuyla ilgili sorular ve görevler

Bir sonraki konuya geçmeden önce Alıştırma Aktivitesini tamamlayın:

Uygulamayı tamamlamada herhangi bir zorlukla karşılaşırsanı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, site çalışmaları ile ilgili görüş ve önerilerinizi [email protected] adresine gönderebilirsiniz.