Dersin amacı: Tablo özellikleri ve CSS tablo düzeni ilkelerine aşinalık

Temel CSS tablosu özelliklerine bir göz atalım

sınır

Bir mülk, bir mülk olarak kabul edilir ve aynı anda birkaç mülkü içerir:

• KENAR TARZI
• KENARLIK-GENİŞLİK
• SINIR RENGİ

Ayrıca toplu bir kural vardır:

table.collapse (border-collapse: daralt;) table.separate (border-collapse: ayrı;)

Sonuç:

genişlik ve yükseklik
(tablo yüksekliği ve genişliği)

Değerler:

Örnek:

Metin hizalama
(yatay hizalama)

Değerler:

• merkez (merkez)
• sola (sola hizalı)
• sağ (sağa hizalı)
• yaslamak (genişlik)

dikey hizalama
(dikey hizalama)

Değerler:

• temel (temel)
• alt (alt dizin olarak)
• süper (üst simge olarak)
• üst (üst)
• orta (orta)
• alt (alt)
• % (satır aralığının yüksekliğinin)

Örnek:

dolgu malzemesi
(masa dolgusu)

arka plan rengi (arka plan)
renk (metin rengi)

CSS tablo düzeni

Çok sayıda tablo özelliği ve tasarımlarındaki farklılıklar nedeniyle, tablolar uzun zamandır web sayfası düzeni için bir standart olmuştur. Tablonun kenarlıklarını görünmez yaparsanız, tek tek hücrelerini sayfanın ayrı blokları olarak kullanabilirsiniz: üstbilgi, menü, altbilgi vb.

Ancak bu tamamen doğru değildir, çünkü her etiketin kendi amacı vardır ve tabloların sayfa düzenine hizmet etmemesi gerekiyordu. Ancak alternatifin olmaması tasarımcıları bu tip bir yerleşim yöntemini kullanmaya yöneltti.

Şimdi başka bir yol daha var - bir web sayfasıyla bu tür çalışmalarda yavaş yavaş tabloların yerini alan katmanları kullanmak. Ancak günümüzde bile bazı tasarımcılar tablo düzenini başarıyla kullanıyor.

İki sütunlu elektronik tablo düzeni

En yaygın yerleşim yöntemlerinden biri iki sütundur, yani. sayfa iki bölüme ayrılmıştır.

Genellikle sol taraf menü ve ek öğelerdir ve sağ taraf ana içerik için ana taraftır.

Bu durumda, sol tarafın genişliği belirli bir değere ayarlanır, yani. zor ve sağ taraf sayfanın geri kalanını kaplıyor.

Bu durumda, genişlik özelliğini (%100) kullanarak tüm tablonun (tablo etiketi) toplam genişliğini yüzde olarak ayarlamanız ve ilk hücre (td etiketi) için genişliği (ayrıca genişlik özelliğini) piksel olarak ayarlamanız gerekir. veya yüzde.

Örnek: sayfanın ana çerçevesini iki sütuna ayarlayın: ilki - sabit bir boyutta, ikincisi - tarayıcı alanının geri kalanı için. Görevi CSS stillerini () kullanarak yürütün

Verim:

</ kafa> <vücut> <tablo kimliği = "maket" hücre aralığı = "0"> <tr> <td kimliği = "sol"> 1</ td> <td kimliği = "doğru"> 2</ td> </ tr> </ tablo> ...

1

2

...

Sonuç:

Şimdi tablonun iki sütununu görsel olarak birbirinden ayırmaya çalışalım.

Örnek: farklı bir hücre arka planı ayarlayın (iki sütunu birbirinden ayırmak için) ve sütunlar arasındaki mesafeyi ayarlayın (ayırıcı)

Verim:
Yeni stil özellikleri ekleyelim:

/ * sol hücre için * / td # sol (genişlik: 200 piksel; arka plan: #ccc; kenarlık: 1 piksel düz siyah; / * geçici olarak kenarlıkları belirtir * /) / * sağ hücre için * / td # sağ (arka plan: # fc3; border: 1px düz siyah; / * geçici olarak sınırları belirtir * /) / * ayırıcı için * / #razdel (genişlik: 10px; / * Sütunlar arası boşluk * /)

Bir arada:

</ kafa> <vücut> <tablo kimliği = "maket" hücre aralığı = "0"> <tr> <td kimliği = "sol"> 1</ td> <td kimliği = "razdel"> <td kimliği = "doğru"> 2</ td> </ tr> </ tablo>

1

2

Ayırıcı için yeni bir hücre eklendi.
Sonuç:

Ayrıca sütunlar arasındaki ayırıcıyı daha az belirgin hale getirebilirsiniz. Bunu yapmak için kenarlık stillerini kullanacağız.

Örnek: bitişik hücrelerin kesikli kenarlığını kullanarak tablo sütunları arasında bir ayırıcı yapın

Verim:
Hücreler için yeni kenarlık özellikleri ekleyelim:

/ * sol hücre için * / td # sol (genişlik: 200 piksel; arka plan: #ccc; / * Sol sütun arka plan rengi * / / * yeni * / kenar-sağ: 1 piksel kesikli # 000; / * Sağ kesikli kenarlık seçenekleri * / )

Bir arada:

</ kafa> <vücut> <tablo kimliği = "maket" hücre aralığı = "0"> <tr> <td kimliği = "sol"> 1</ td> <td kimliği = "doğru"> 2</ td> </ tr> </ tablo>

1

2

Sonuç:

Üç sütunlu elektronik tablo düzeni

Sabit veya "akışkan" bir düzen kavramı vardır.

Sabit düzen CSS

• kullanma sabit düzen tüm tablonun genişliği piksel olarak ayarlanır ve ardından, monitör ve tarayıcı penceresinin çözünürlüğünden bağımsız olarak, tablo her zaman aynı genişliğe sahip olacaktır.
• Bu durumda kalan sütunların genişliği de sabitlenmelidir.
• Bir hücrenin genişliğini belirtmemek mümkündür, o zaman kalan hücrelerin ve tüm tablonun boyutlarına göre otomatik olarak hesaplanacaktır.

Örnek:üç sütunlu bir sayfa şablonu oluşturun. Sabit tablo düzenini kullanın:

• sol sütun - 150 piksel;
• orta sütun - 400 piksel;

Verim:

</ kafa> <vücut> <tablo kimliği = "maket" hücre aralığı = "0"> <tr> <td kimliği = "sol"> 1</ td> <td kimliği = "merkezi"> 2</ td> <td kimliği = "doğru"> 3</ td> </ tr> </ tablo>

1

2

3

Sonuç:

Kauçuk maket

• Masa genişliği"kauçuk" tasarımı kullanırken tarayıcı penceresinin genişliğinin %'si olarak ayarlayın... O. tarayıcı penceresi değiştiğinde tablonun boyutu da değişir.
• Tüm hücrelerin genişliği kurulabilir yüzde olarak.
• İkinci seçenek ne zaman bazı hücrelerin genişliği kuruldu yüzde olarak, a bazıları piksel cinsinden.

Önemli: Tablonun genişliğinden bağımsız olarak tüm sütunların genişliklerinin toplamı %100 olmalıdır.

Örnek:

• sol sütun - %20;
• orta sütun -% 40;
• sağ sütun - %40;

Sütunlar için arka planı ayarlayın ve sütunları bir kenarlıkla görsel olarak ayırın.

Verim:

</ kafa> <vücut> <tablo kimliği = "maket" hücre aralığı = "0"> <tr> <td kimliği = "sol"> 1</ td> <td kimliği = "merkezi"> 2</ td> <td kimliği = "doğru"> 3</ td> </ tr> </ tablo>

1

2

3

Sonuç:

Orta sütunun genişliği tarayıcı tarafından otomatik olarak seçildiğinde ikinci seçeneği düşünün; bir örnek resimdir:

Örnek:üç sütunlu bir sayfa şablonu oluşturun. Değişken tablo düzeni kullanın:

• sol sütun - 150 piksel;
• orta sütun -% 40;
• sağ sütun - 200 piksel;

Sütunlar için arka planı ayarlayın ve sütunları bir kenarlıkla görsel olarak ayırın.

Verim:

</ kafa> <vücut> <tablo kimliği = "maket" hücre aralığı = "0"> <tr> <td kimliği = "sol"> 1</ td> <td kimliği = "merkezi"> 2</ td> <td kimliği = "doğru"> 3</ td> </ tr> </ tablo>

1

2

3

Sonuç:
Sonuç yaklaşık olarak aynı olacaktır, orta sütun nedeniyle sadece "gerilme" meydana gelecektir.

Değişken düzende iç içe tablo kullanma

İki sütunun genişliği yüzde olarak ve üçüncüsü piksel olarak ayarlanmışsa, tek bir tabloyla idare edemezsiniz. Dolayısıyla, tüm tablonun genişliği yüzde 100 ise, ilk sütun 200 piksel ve kalan sütunlar yüzde 20 ise, basit bir hesaplama, ilk sütunun boyutunun yüzde 60 olduğunu gösterir. Bu durumda tarayıcı piksel cinsinden belirtilen değeri kabul etmeyecek ve boyut yüzde olarak ayarlanacaktır.

• Orijinal tablo iki hücre ile oluşturulur. Tablo genişliği yüzde olarak ayarlanır.
• sol hücre için(ilk sütun) genişlik ayarlandı piksel cinsinden.
• Sağ hücre genişliği(diğer hoparlörler için taban) belirtilmemiş... Bu hücrenin içine yine iki hücreden oluşan ikinci bir tablo eklenir.
• İç içe tablonun hücrelerinin genişliği yüzde olarak ayarlanır..
• İç tablo genişliği yüzde 100 olarak ayarlanmalıdır böylece bu tablo dış tablodaki tüm boş alanı kaplar.
• Orta ve sağ sütun genişlikleri, bir bütün olarak dış tablonun değil, hücrenin genişliğine göre hesaplanır.

Örnek:üç sütunlu bir sayfa şablonu oluşturun. İç içe tabloyla değişken düzeni kullanın:

• sol sütun - 150 piksel;
• orta sütun - %60;
• sağ sütun - %40;

Sütunlar için arka planı ayarlayın.

Verim:

1 2 3 Tablolar arasında "boşluk" olmaması için hücre doldurma ve hücre aralığı etiketi nitelikleri burada gereklidir. Sonuç: Tablodaki hücrelerin sınırları arasındaki mesafeyi belirtir. Tabloda border-collapse ayarı daraltıldığında, border-spacing özniteliği çalışmaz. Sözdizimi sınır aralığı: değer [değer] Argümanlar Bir değer, hücre sınırları arasındaki hem dikey hem de yatay mesafeyi ayarlar. İki argüman varsa, ilki yatay mesafeyi, ikincisi ise dikey mesafeyi tanımlar. 1 2 3 4 Bu örneğin sonucu Şekil 2'de gösterilmektedir. 1. Pirinç. 1. Kenarlık aralığı parametresini uygulama Not etiket ise cellspace parametresi eklenir, ardından border-spacing stili özniteliği kullanılırken bu dikkate alınmaz ve hücre aralığı değeri yok sayılır. Bu kuralın istisnası, border-spacing özelliğini hiç anlamayan Internet Explorer'dır. Tablolar border-collapse, tablo hücrelerinin etrafındaki sınırların nasıl görüntüleneceğini ayarlar. Bu parametre, hücreler için bir sınır ayarlandığında rol oynar, daha sonra hücrelerin birleşme yerinde çift kalınlıkta bir çizgi elde edilir. Daraltma değerinin eklenmesi, tarayıcıyı tablodaki bu tür yerleri ayrıştırmaya ve içindeki çift çizgileri kaldırmaya zorlar. table-layout, tarayıcının içeriğine göre tablo hücrelerinin yüksekliğini ve genişliğini nasıl hesaplaması gerektiğini tanımlar. border-spacing, tablodaki hücrelerin sınırları arasındaki boşluğu ayarlar. Tabloda border-collapse ayarı daraltıldığında, border-spacing özniteliği çalışmaz. CSS, yalnızca tablo kenarlığının stilini değil, aynı zamanda tek tek hücrelerin kenarlıklarının stilini de ayarlamanıza olanak tanır. Her hücrenin kendi sınırları olduğundan, bitişik hücreler arasındaki sınır iki katına çıkar. Ancak komşu hücrelerin sınırlarını tek bir hücrede birleştirmek mümkündür. Bunun için border-collapse özelliği vardır. Değerleri alır: border-collapse: ayrı - her hücrenin kendi sınırı vardır (varsayılan) border-collapse: daralt - genel sınır border-collapse: devral - değer üst öğeden alınır Örneğin bir tablo oluşturalım ve sayfada yer alacak tüm tabloların hücreleri için bir çerçeve belirleyelim. İlk olarak, tablonun nasıl görüneceğini görmek için hiçbir şeyi değiştirmeyelim: stil: 1 2 3 4 5 6