Html tablosu için güzel çerçeveler. Fareyle üzerine gelindiğinde satır arka planını değiştir

- 6 oy üzerinden 5 üzerinden 4,7

Web sayfaları oluştururken, çoğu zaman bazı sayfa içeriklerini tablolar şeklinde sunmak gerekir.

Bazen sayfa yapısı oluşturmak için tablolar kullanılır. Tabloların başlangıçta sayfa öğelerini konumlandırması amaçlanmadığı için bu yaklaşım tamamen doğru değildir.

Bu amaçla CSS kullanmak en iyisidir. Ancak bazı durumlarda, tabloların yeri doldurulamaz ve bilgi sağlamak için uygundur.

Etiketi, HTML'de tablo oluşturmaktan sorumludur.

ve kapanış etiketi
... Ama muhtemelen tabloların satırlardan ve hücrelerden oluştuğunu zaten biliyorsunuzdur. Bu nedenle, bir tablo oluşturmak için iki etikete daha ihtiyacımız var: bu bir etiket dizeleri oluşturmaktan sorumlu olan ve etiketi, hücre oluşturmaktan sorumludur.

Pratikte her şeyin nasıl çalıştığını görmek için iki sıra ve dört hücreden oluşan bir tablo oluşturalım. Tablo kodumuz aşağıdaki gibi olacaktır:

1 - hücre 2 - hücre
3 - hücre 4 - hücre

Bundan ne çıkacağını görmek için aşağıdaki kodu kullanarak bir html sayfası oluşturun. Nasıl HTML sayfası oluşturacağınızı bilmiyorsanız, eğiticiye bakın.

Tablo

1 - hücre 2 - hücre
3 - hücre 4 - hücre

Aşağıdakilere sahip olmalısınız:

Gördüğünüz gibi masamız hiç masa gibi görünmüyor. Hepsi bu çünkü etiketlerimiz

ve tablomuzun kenarlığı, arka planı, boyutları vb. olması için belirtilmesi gereken birçok özelliğe sahiptir.

İlk olarak, etiketlerde bulunan özniteliklere bakacağız.

... Tablonuzun nasıl değişeceğini görmek için bu nitelikleri etiketlere ekleyebilirsiniz.
ve sayfayı yenileyerek, tablonun tarayıcıda nasıl görüneceğini izleyin. Kolaylık sağlamak için, sayfanın tüm kodunu sağlamayacağım, yalnızca etiketle ilgili kodu vereceğim yani neyi değiştireceğiz.

Ve böylece etiket

aşağıdaki özelliklere sahiptir:

border - tablo kenarlığının genişliğini şu şekilde yazılan piksel cinsinden ayarlar:

.

bordercolor - tablo kenarlığının rengi, bu özellik tüm tarayıcılar tarafından desteklenmez, bu nedenle belirtilen kenarlık rengini göremeyebilirsiniz:

Kenar genişliğini 2 piksel olarak belirledik, mavi, tablo şöyle görünecek:

genişlik - tablonun genişliğini piksel veya yüzde olarak ayarlar:

yükseklik - tablonun piksel veya yüzde cinsinden yüksekliği:

Tablo 250 piksel genişliğinde ve 150 piksel yüksekliğinde olacak, tablo şöyle görünecek:

hizala - tablo hizalaması;

align \u003d left - tablolar sola hizalanacaktır;

align \u003d right - tablo sağa hizalanır:

Tablomuz sağa hizalı olmalıdır.

bgcolor - tablo arka plan rengi, bgcolor \u003d # FFC000 - tablo arka plan rengi sarı olacaktır:

Tablo şöyle görünecek:

arka plan - bu özniteliği kullanarak, tablonun arka planı olacak bir resim ayarlayabilirsiniz.

Örnek olarak, köşeli parantez () içinde gördüğünüz küçük resmi tablonun bulunduğu sayfanın bulunduğu klasöre ve etiketine kaydedin.

background \u003d "fon.gif" tüm kodu ekleyin:

Tablo şöyle görünecek:

hücre dolgusu, bir hücre içindeki sol, sağ, üst ve alt dolguyu ayarlayan bir özelliktir. Örneğin, etiketimiz

hücre dolgusu \u003d 10 ekleyin, sonra hücrelerin içine yazılan metin girintilenecektir.

hücre aralığı - tablo hücreleri arasındaki aralığı ayarlar.

Tablomuza daha yakından bakarsanız, hücrelerin sınırları arasında küçük bir boşluk olduğunu göreceksiniz, bu hücreler arası girintidir, varsayılan olarak ayarlanmıştır. Kaldırmak için etikette yeterlidir

hücre aralığını reçete \u003d 0. Tüm kod:

Sonuç olarak, hücrelerimiz birbirine bastırıldı ve hücrelerin içindeki metin girintilendi:

hspace - tablodan sola ve sağa boşluğu piksel cinsinden ayarlar, aşağıdaki gibi yazılır: hspace \u003d 20

nowrap - bir hücrede kelime kaydırmayı yasaklar, şimdi tuzak yazılır

Son iki öznitelik çok nadir kullanılır, bu yüzden onlarla örnek bir kod göstermeyeceğim.

Şimdi etiketin özniteliklerine bakalım

bazıları etiket nitelikleriyle aynıdır

genişlik - hücrenin piksel veya yüzde cinsinden genişliği.

yükseklik - hücrenin piksel veya yüzde cinsinden yüksekliği.

Örneğin, ilk satırdaki ilk hücrenin genişliğini% 30 - genişlik \u003d% 30 ve ikinci satırdaki ilk hücrenin yüksekliğini 100 piksel olarak ayarlayalım. Kod şöyle olacak:

1 - hücre 2 - hücre
3 - hücre 4 - hücre

Bir hücre yüksekliğini veya genişliğini ayarlamanın yeterli olduğunu ve bu satır veya sütundaki tüm hücrelerin aynı boyutta olacağını unutmayın. Bu nedenle, örneğin belirli bir hücre yüksekliğini ayarlamanız gerekiyorsa, bu parametreyi bir hücre için belirtmeniz yeterlidir ve satırdaki diğer tüm hücreler aynı hale gelecektir.

hizala - hücrelerin içeriğini hizalar, aşağıdaki değerlere sahiptir:

align \u003d "lef" - hücrenin içeriği sola hizalanacaktır;

align \u003d "right" - içerik sağa hizalanacaktır;

align \u003d "center" - içerik hücrenin ortasına hizalanacaktır.

Bu nitelikleri ve değerleri kodumuza ekleyelim ve 1. hücrenin içeriğini sola hizalayalım (içerikler varsayılan olarak sola hizalanır, ancak bazı durumlarda bu özellik gereklidir), 2. hücrenin içeriği sağa hizalanır ve 4. hücre merkezinde.

1 - hücre 2 - hücre
3 - hücre 4 - hücre

bgcolor - bu niteliği kullanarak hücrenin rengini ayarlayabilirsiniz.

arka plan - görüntüyü hücrenin arka planı olarak ayarlar.

Etiketin özniteliklerini göz önünde bulundurarak bu özniteliklerle zaten tanıştık

... Aynı şekilde çalışırlar, ancak bu durumda hücrenin arka planını belirlerler. Örneğin, 2. hücrenin arka plan rengini sarı olarak ayarlayalım ve aşağıdaki görüntüyü () 4. hücrenin arka planı olarak ayarlayalım.

Bunu yapmak için, 2. hücre için bgcolor \u003d "# FFFF00" ve 4. hücre için background \u003d "fon.jpg" hücrelerimiz için kodumuza gerekli öznitelikleri ekleyin. Sonuç olarak, tablomuz şöyle görünecek:

Gördüğünüz gibi, tablonun arka planını kendimiz ayarlamamıza rağmen, tablo hücrelerinin arka planını ayarlarsak, hücreler için belirlediğimiz arka plan görüntülenecektir.

bordercolor - hücre kenarlığının rengini ayarlar.

Etiketin özniteliklerini değerlendirirken de bu öznitelikle karşılaştık

... Tüm tarayıcılarda çalışmadığını hatırlatmama izin verin. Etiketinin

Bu örnek, iç içe geçmiş tablolar, yani bir diğerinin içinde bir tablo kullanır. Çizgide 1 ilk tabloyu açıp koyu bir renkle dolduruyoruz, bu durumda siyah (# 00 00 00). Dış tablonun parametrelerinden biri hücre aralığıveya hücre dolgusu - 0 ve diğeri 1 olmalıdır. 4 beyaz arkaplanlı yeni bir tablo açıyoruz (# FF FF FF). İç içe geçmiş tablonun önemli bir parametresi genişliğidir - genişlik \u003d "% 100"... Tablolar ters sırada kapatılmalıdır - önce iç içe, sonra dış.

Yukarıdaki seçenek tüm sayfa için bir çerçeve oluşturmak için kullanılabilir, ancak tarayıcının tablo içeriğini görüntülemeden önce sonuna kadar okuması gerektiğinden çok miktarda bilgi içeren sayfalar için uygun olmadığını unutmayın. Böylece ziyaretçi birkaç saniye boş bir ekran görecektir.

Kutu 2

Bu örnekte tek bir tabloyla uğraşıyoruz. Bir çerçeve oluşturmak için burada özel olarak tasarlanmış bir parametre kullanılır sınır değer 1 atanır. Aynı zamanda parametre hücre aralığı0'a eşittir, aksi takdirde çerçeve şöyle görünecektir:

hücre sınırını belirten bir sınır niteliği yoktur. Bunun için 2. hücrenin kenarlık rengini kırmızı olarak ayarlayalım, ikinci hücreye bordercolor \u003d "# FF0000" özelliğini ekleyelim

Hücrelerin içeriğini hizalamak için tasarlanmış bir özellik daha var:

valign - hücrelerin içeriğini dikey olarak hizalar.

Aşağıdaki anlamlara sahiptir:

valign \u003d "top" - hücrenin içeriğini en üste hizalayın;

valign \u003d "bottom" - hücre içeriğinin alta hizalanması;

valign \u003d "orta" - hücrenin ortasında hizalama;

valign \u003d "taban çizgisi" - hücre içeriğinin taban çizgisine hizalanması.

Bu nitelikleri 4 hücremizin her birine ekleyelim.

1 - hücre 2 - hücre
3 - hücre 4 - hücre

Masamız şöyle görünecek:

Bu eğitimde dikkate almamız gereken son şey, tablo hücrelerinin birleştirilmesidir. Bir dizede birkaç hücreyi birleştirmek için, tırnak işaretlerinin birleştirilecek hücre sayısını gösterdiği bir colspan \u003d "" özelliği vardır.

Siyah beyaz bir masa sıkıcı görünmüyor mu? Biz de öyle düşünüyoruz! Bu nedenle, bu eğitimde, HTML'de bir tablonun renginin nasıl değiştirileceğinden bahsedeceğiz. Her biri kendi özelliğine sahip üç renk ekleme olasılığı vardır.

  1. Hücrelerin arka plan rengini belirtir. Mülk kullanılarak yapılır arka plan rengi.
  2. Hücrelerdeki metnin rengini belirtir. Mülk kullanılarak yapılır renk.
  3. Hücre kenarlıklarının rengini belirtir. Mülk kullanılarak yapılır sınır rengi.

Önceden, rengi değiştirmek için daha kısa bir çerçeve açıklaması biçimi kullanılıyordu. Şöyle görünüyordu:

Kenarlık: 1px katı açık gri

Ve buradaki renkten son kısım sorumluydu - lightrgay.

Renklerin anlamını ayarlamanın çeşitli yolları vardır. CSS... Öznitelikleri kullanarak renk açıklamasının nasıl gerçekleştiğini size göstereceğiz.

Hücre rengi nasıl değiştirilir

Bakalım kodun neye benzediğini CSSHücrenin renginin ayarlandığı.

Td (arka plan rengi: arka plan rengi;)

Elbette renkleri de değiştirebilirsiniz masave tdve inci... Çarpım tablomuza daha sağlam bir görünüm vermeye çalışalım.

Etiketiyle başlık hücreleri için stiller ekleyin incisayı karelerinin bulunduğu köşegendeki hücreler için:

Çarpım tablosu

Çarpım tablosu
* 2 3
2 4 6
3 6 9

Tarayıcıdaki sonuç:

Bir tablodaki kenarlık rengi nasıl değiştirilir

Yukarıdaki örnekte daha önce fark ettiğiniz gibi, tabloda bordür rengini değiştirdik. Bunun için border özelliğini kullandık. Parametreleri aşağıda listelenen sırayla ayarlar:

  1. çizgi türü, bizim durumumuzda katı
  2. çizgi genişliği, bizim durumumuzda 1px
  3. çizgi rengi, bizim durumumuzda mavi

Bir hücre için sınır renginin nasıl göründüğünü tekrar hatırlayalım:

Td (sınır: 1 piksel düz mavi;)

Bir tablodaki bir satırın rengi nasıl değiştirilir

Böylece, CSS'nin yeteneklerini kullanarak hücrelerin renklerini ve başlık hücrelerini nasıl değiştireceğimizi öğrendik. Aşağıdaki gibi etiketler için stiller sağlarsak inci veya td, o zaman stillerin etiketlerin geri kalanı için geçerli olacağını anlamalısınız.

Bununla birlikte, belirli bir hücrenin veya birkaç hücrenin veya tüm satırın rengini değiştirmeniz gereken durumlar vardır. Bu durumda ne yapmalı? Sınıflar burada ve stillerinin uygulanmasında kullanılmalıdır. Pratikte şöyle görünür:

RowGreen (arka plan rengi: yeşil;)

Ve bu sınıfı kullanarak rengi değiştirmek için, belirli çizgilerin aşağıdakileri yapması gerekir:

Satırlarda değişen renkler içeren tablo
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5

Ve tarayıcıdaki sonuç:

Bir tablodaki metnin rengi nasıl değiştirilir

Tablodaki metnin rengini değiştirmek için özelliğini kullanın renk... Çok çeşitli öğelere uygulanabilir: table, tr, th, td. Buna bağlı olarak, seçili öğedeki renk değişecektir. Örneğin, yazı tipi rengini tablonun tamamı için yeşile ayarlayın:

Tablo (renk: yeşil; ...)

Benzer şekilde, tek tek hücrelerin rengini değiştirebilirsiniz. Ve bu dersi bitirir, ödevinizi yapmayı unutmayın. Herkese güle güle!

Tabloların yardımıyla, tüm tarayıcılar tarafından neredeyse aynı şekilde yorumlanan ince çerçeveler oluştururken çok ilginç görsel efektler elde edebilirsiniz. Bunun için birkaç örneğe bakalım.

Kutu 1

parametre hücre aralığı= 1

parametre hücre aralığı= 2

parametre hücre aralığı= 3

Bu seçenek ilkinden daha basittir, ancak ne yazık ki Internet Explorer ve Netscape tarafından aynı şekilde yorumlanmamaktadır.

Kutu 3
















<tablo sınırı \u003d "0" hücre aralığı \u003d "0" hücre yüzeyi \u003d "0"\u003e










Bu nasıl görünüyor









Önceki iki seçenek, çerçeveleri farklı tarayıcılarda minimum düzeyde de olsa farklı kalınlıklarda görüntülerse, üçüncü örnek yaygın tarayıcılar Internet Explorer 4.x / 5.x / 6, Netscape 4.x / 6.x ve Opera 6 tarafından yorumlanır. x, kenar kalınlığı açısından aynıdır. Netscape 4.x'in bir web tasarımcısı için en sorunlu olduğunu söylemeyi uygun buluyorum.
Ama üçüncü seçeneğe daha yakından bakalım. Aşağıda sunulan 9 hücreli bir tabloya dayanmaktadır:

1

2

3

4

6

7

8

9

Beşincisi dışındaki tüm hücreler siyah, beşincisi beyaza boyanmıştır. Bu durumda tablonun arka planı önemli değildir. Daha sonra parametre 1-3 ve 7-9 hücrelerine eklenir. yükseklik \u003d "1". Buna göre 1, 3, 4, 6, 7, 9 hücreleri bir piksel genişliğinde yapılır ( genişlik \u003d "1"). Orta hücreler 2, 5, 8 olabildiğince geniş yapılmıştır ( genişlik \u003d "% 100"). İşin püf noktası, dar veya ince olması gereken hücrelere "değiştirilmiş Malevich karesi" nin eklenmesidir - 1x1 boyutunda şeffaf bir gif dosyası, aksi takdirde istenen etki elde edilemez.

Bu seçenek, birçok tarayıcıyla uyumluluğuna rağmen, tek hücreli bir tablonun etrafında ince bir kenarlık oluşturmak için şüphesiz çok karmaşık ve külfetli. Esas olarak ince çizgiler içeren sayfa düzeni için kullanılır. Çerçeveler oluşturmak için stil sayfalarını da kullanabilirsiniz, ancak aşağıdaki atölye çalışmalarından birinde bunun üzerine daha fazlasını yapabilirsiniz.

Sonraki atölye

\u003e\u003e yayına hazırlanıyor

Önceki atölye

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 tarayıcıda görünür kenarlıklar olmadan 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. Tablo (genişlik:% 100;) bir tablo için 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 arka planının ve hücrelerin ç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 bir 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 sınırları 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ışanMaaşBonusSüpervizör
Stephen C. Cox$300$50Bob
Josephin tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie
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 örnekte olduğu gibi * /

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ırın geri kalanı aynı anda seçilir ve bu, tabloların birden fazla sütuna sahip olması durumunda bilgileri izleme işlemini basitleştirir.

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 masayı dekore etmek için en güvenilir stil, sözde "kutu" stilidir. İ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 harmanlanacak renk şemasını 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 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 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); )

Bir hücrenin içeriğini diğerinden net bir şekilde ayırmak için hücrelere kenarlıklar eklenir. Etiketin border parametresi, bunların oluşturulmasından sorumludur.

çerçevenin kalınlığını belirler.

Örnek 1, hücrelerin etrafında nasıl kenarlık oluşturulacağını gösterir.

Örnek 1. Tabloya çerçeve ekleme





Sınır kalınlığı







Cheburashka Timsah Gena Shapoklyak


Bu şekilde oluşturulan çerçeveler, farklı tarayıcılardaki görünümlerinde biraz farklılık gösterir.

Şekil: 1. border parametresi kullanılarak elde edilen çerçeve

Aynı türden bir kenarlık elde etmek için, kenarlık stili etiketini tablo hücrelerine uygulamanız önerilir ( veya ). Ancak burada da tuzaklar var. Her hücre için bir çerçeve oluşturulduğundan, hücrelerin temas noktalarında çift kalınlıkta bir bordür elde edilir. Bu özelliği çözmenin birkaç yolu vardır. En kolayı, daraltılacak şekilde ayarlanan border-collapse özelliğini kullanmaktır. Görevi, hatların temasını izlemek ve çift sınır yerine tek bir sınır çizmektir. Datatkov'un bu niteliğini etikete ekliyoruz

ve sonra her şeyi kendi başına yapacak (örnek 2).

Örnek 2. Tablo kenarlıkları oluşturmak için sınır daraltma özelliğini kullanma





Çerçeve oluşturma






0XX
00X
XX0


Sınır daraltma parametresi eklerken ve onsuz olarak tablo kenarlıkları arasındaki fark, Şekil 2'de gösterilmiştir. 2.

a

b

Şekil: 2. border-collapase niteliğini kullanırken tablo görünümü

İncirde. 2a, varsayılan tablo çerçevesini gösterir. Tabloda tüm satırların genişliğinin iki katı olduğuna dikkat edin. Border-collapse parametresinin eklenmesi bu özelliği kaldırır ve tüm çizgilerin kalınlığı aynı hale gelir (Şekil 2b).

Tablonun içinde benzer çizgiler geliştirmek için diğer tarafa gidebilirsiniz. Seçici için eklenmelidir çerçeve, ancak ilgili nitelikleri yok olarak ayarlayarak sağ ve alt satırı iptal edin. Daha sonra hücreler birleştirildiğinde, sınırları tek bir satır olacağı için birbirleriyle çakışmayacaktır. Bununla birlikte, bu sınır oluşturma yöntemiyle, tablonun kendisinin altında ve sağında çizgiler yoktur. Seçiciye border-right ve border-bottom parametrelerinin eklenmesi

, istenen çerçeveye ulaşacağız (örnek 3). Tutarlılık için, her durumda bordürün stiline, kalınlığına ve rengine uymasına özen gösterilmelidir.

Örnek 3. border niteliğini kullanarak bir tablo için sınır oluşturma





Çerçeve oluşturma






0XX
00X
XX0


Bu yöntemin, örneğin seçici için varyasyonları olabilir sadece sağa ve aşağıya bir sınır ekliyoruz ve

tersine, border niteliğini ekleriz, ancak sağdaki ve alttaki çizgiyi kaldırırız. Her durumda, sunulan sonuç bir olacaktır.

Bordür renginin arka plan rengiyle uyumlu hale getirilmesi ile tablonun basit ve özgün bir görünümü elde edilebilir. Ancak çizgilerin görünür olması için etiketin arka planını doldurduğunuzdan emin olun.

veya ... Daha sonra, aralarında bir kesici ile kesilmiş gibi tablo hücreleri elde edilir (örnek 4).

Örnek 4. Bir tabloda görünmez kenarlıklar kullanma





Sınırlar yaratmak







0XX
00X
XX0


Bu örnekte, web sayfasının arka plan rengi, BODY seçicisine eklenen arka plan özelliği aracılığıyla enjekte edilir. Varsayılan beyaz olsa da, bazen kullanıcının tarayıcı ayarları aracılığıyla arka plan rengini belirtmemesi için ayarlanması istenebilir. Tablonun çizgileri aynı renkte olmalıdır, bu durumda açıkça gösterilmemeli ve sadece hücreleri kendi aralarında bölmelidir.

Örnek 4'ün sonucu aşağıda gösterilmiştir.

Şekil: 3. Arka plan rengiyle eşleşen kenarlıkların görünümü

© 2020 Mobil ve Bilgisayar Cihazları