CSS: tablo tasarımı. Kayıt örnekleri

ders ilginç ve sorumlu - CSS ile tablo yapma. Bu iş Yaklaşım tüm olası stilleri bilgisi olan, yetkin gerekir. Buna ek olarak, onların yaratıcılık ziyaretçileri korkutup vermemek için güzellik duygusu sahip olmak gereklidir.

Tablolar hemen her şeyi değiştirebilir. Güzel tasarım CSS masaları tasarım sınırları, masa arka, hücre arka plan, onları ve daha arasındaki boşluğu kullanımını içerir. En temel düşünün.

masa sınır

CSS tablo stili tasarım daima sınırında (çerçeve) bir oyun içerir. Tüm varsayılan tablolar kontür çerçeve değildir. Yani, 0 piksel eşittir. Ama bu özellik sınırına düzeltilebilir.

Sen tüm tablo dış çerçeve belirtebilirsiniz:

Tablo {sınır: 3 piksellik siyah bir katı madde; }

Bu üslup kullanır sitedeki tüm masalarda bu hat sayesinde siyah çerçevedir. Not kenarlarında değil, tablonun içine sınırı sadece o. hücre çizgileri ve çerçeve için aksi belirtilmediği.

inci, td {sınır: 3 piksellik düz siyah;}

kalınlık ve renk, herhangi belirtebilirsiniz. Hücreleri dilindiğinde sınırları katına olmadığını unutmayın.

kelime katı sürekli bir kayıt belirtmektedir. Diğer değerler belirtebilirsiniz.

o daha cazip göründüğü en sık katı çerçeve kullanılır ve sitenin ana içeriğinden dikkatin etmez.

Sınır mülkiyet gemide de belirtilebilir. Sınır sadece sol veya sağ tarafında, üst, alt için ayarlanabilir. bazı durumlarda aynı anda tüm tablo çerçeve ile uygun bir seçenek değildir çünkü.

table {border-top: 1px kırmızı katı; }

Yani sadece tablonun üst çerçevesini ayarlayabilirsiniz. Benzer şekilde başka partilerin yerine sadece üst yazma için: sağ, sol veya alt.

tablo başlık

Tablo başlık etiketini kullanarak belirtilebilir. Bu etiket ince ayar için çok sayıda mülk kayıt CSS olabilir. o elemanlarını istediğiniz şekilde manevra mümkündür çünkü CSS tablo tasarım iyidir.

Bu başlık, (örneğin, "Tablo 1") kitaplarında standart olarak aynı şekilde görüntülenir.

Sen başlık ve mülkiyet başlığı yana (üst veya alt) konumunu belirtebilirsiniz. sağ sol hizalama veya özellik text-align tarafından tanımlanır.

arka plan tabloları

tablo Geçmişi herhangi bir renk veya desen olabilir. Renk bir özellik background-rengi ayarlar. konuşmasında kullanımları ile tamamen tutarlı özelliklerin adları. Birçok kez depolamak kolaylaştırır.

renk adı ve farklı kodlamaları olarak belirtilebilir. Buna ek olarak, aşağıdaki belirtebilirsiniz:

• Şeffaf - Şeffaf.
• Kalıt - renk üst öğelerinin aynıdır.
• Başlangıç - varsayılan.

şeffaflık ile Opsiyon CSS dosyasındaki metinde bütün tabloları tek renkte yapılır durumlarda kullanılabilir, ancak bu durumda gerek yoktur.

Ek olarak, fon bir görüntü olabilir. tarzı reçete Arka plan resim özelliği de, bunu yapmak için. yol şu şekildedir:

url ( 'URL')

dosyanın yolu göreli veya mutlak olarak mevcut olabilir.

Daha karmaşık dolgu gradyanı ile yapılabilir:

• lineer gradyan ();
• radyal gradyan ();
• tekrar-doğrusal gradyanı () ve tekrar-radyal gradyan () - gradyan tekrarladı.

arka plan hücre

genel olarak bir arka plana ek olarak, satır veya sütunlardaki bir çizgili arka plan belirtebilirsiniz. kolay hatlarının görsel ayırma bilgileri okumak için çünkü mülkün tescili için, çok sık kullanılır.

münavebe ek olarak, ve belirli bir sütun veya satır sayısını belirtebilirsiniz. Böyle Örneğin:

• tr: n'inci-çocuk (çift) {...} - geçmeli belirtmek;
• tr: n'inci-çocuk (1) {...} - belirli bir sıranın özelliklerinin göstergesi;
• td: n'inci-çocuk (çift) {...} - sütun alternatif bir göstergesi;
• td: n'inci-çocuk (1) {...} - belirli bir sütun özelliklerinin bir göstergesidir.

dizisi ve sayıları belirtilebilir yanında - ilk (td: birinci çocuk) veya son (td: son çocuk).

hücreler arasındaki boşluk

CSS, tablo tasarımı hücreleri arasındaki boşlukları kaldırmak için izin verir. Varsayılan olarak öyleler. Eğer sınırları arasındaki mesafeyi ayarlamadan tabloda çerçeveyi ayarlamak Örneğin, burada bu sonuç olacaktır.

Katılıyorum, çok güzel değil bakar ve okumak için uygun değildir. Kullanıcılar bu nedenle gözünde dalgalanması olacaktır. tablo tarzında böyle bir çizgi yazarak olabilir bu boşlukları kaldırın:

border-collapse: çöküşü

Ama aynı zamanda mesafe, tam tersine, artırılması gerektiğini olur. Ayrıca, boşlukların boyutu sütunları arasında ve hatlar arasındaki olarak belirtilebilir. Bir değer (yerine çökmeye) belirtmek için:

border-collapse: separate

Ancak bu eylem o hücreleri ayırmak için gerekli olduğunu gösterecektir. onların payı olduğu gibi, ek özellik göstermiştir:

sınır aralık: 20 piksel.

Eğer satırlar ve sütunlar arasında farklı bir mesafeye belirtmek istiyorsanız, bu iki şeyi gösterir:

sınır aralığı: 10px20px.

tarayıcılarda fark

CSS tasarım tabloları tarayıcınıza bağlı olarak farklı görünebilir unutmayın. Özellikle kötü CSS yenilikler desteklenmediğini, eski sürümleri ile durumdur.

Yukarıda dijital değerlere çerçeve kalınlıklarının bir örnektir.

Bu örnek için, sabitleri için çerçeve kalınlığı.

Sınır stilleri de önemli ölçüde farklıdır.

Bu nedenle, gelişme her zaman farklı tarayıcılarda sonucunu görmek.

BB'de tasarım tabloları tarayıcının türünü kontrol etmek önerilir. Özellikle kullanılan büyük sorun Internet Explorer'ın eski sürümleri ile kullanıcılara olmak.

Çok gelişmiş geliştiriciler, tarayıcıya bağlı olarak tamamen farklı CSS dosyaları bağlamak için olabilir. Ve birisi her bir çek ya da bazı belirli stili (sınıfı) yapar.

Çoğu sorunlar gölgelerin ortaya çıkar.

CSS: Tablo Biçimi Örnekleri

Kayıt oldukça değiştirilebilir. Her şey tüm site ve tasarımı bağlıdır. Tüm kombine ve alacalı renklerde olmalıdır. Ayrıca bu büyük bir rolü ve lezzet geliştirici yapar. güzellik duygusu tüm farklıdır.

Çeşitli tablolar bazı örnekler vermek. Yukarıdaki şekilde eğim kullanımını gösterir ve arka plan rengi ve kenarlıklı oynarlar.

Birçok göz kullanıcıları kesmeyecek güzel temiz tasarımın ilginç bir örnek olur. Bu düzenleme hemen hemen her durumda uygundur.

kenarları yuvarlatılmış yapılabilir. Oldukça hoş görünüyor.

Sonuç

Gördüğünüz gibi, CSS tablo ortaya çıkmasının çeşitli araç bulunmaktadır. Her parametre de değer seçenekleri büyük bir miktardır. Eğer tek seferde kullanıyorsanız, başyapıtlarından oluşturabilirsiniz. Özellikle bunu yaparsanız adaptif tasarım tüm tarayıcılar için.

tasarımda önemli şey - efektlerle aşırıya kaçmayın. Her şey aşırıya kaçmadan yapılmalıdır. İlk başta, düzen deneme ve hemen tüm bilgilerini kullanmak ister. Tablonun sonucunda doygun özellikleridir. Bu hataları önlemek için deneyin.

Üstelik bazı parametreler birbirleri ile etkileşime girebilir. Örneğin, belirtmek için gerek yoktur arka plan rengini , tablonun ise hala belirtilen rengi üst üste olacak arka plan görüntüsü, orada ayarlanırsa.