Masa düzeni - CSS Hileleri | CSS Almanak 2024

table-layoutTarayıcıyı Algoritma ne özelliği tanımlar tablo satırları, hücreleri ve sütunlarını yerleştirmekte kullanmalıdır.

table ( table-layout: fixed; )

CSS2.1 spesifikasyonunda açıklandığı gibi, genel olarak tablo düzeni genellikle bir zevk meselesidir ve tasarım seçeneklerine bağlı olarak değişecektir. Ancak tarayıcılar, tabloların nasıl düzenleneceğini tanımlayan belirli kısıtlamaları otomatik olarak uygulayacaktır. Bu, table-layoutözellik auto(varsayılan) olarak ayarlandığında gerçekleşir . Ancak bu kısıtlamalar table-layout, ayarlandığında kaldırılabilir fixed.

Değerler

auto: varsayılan. Tarayıcının otomatik algoritması, bir tablonun satırlarının, hücrelerinin ve sütunlarının nasıl yerleştirileceğini tanımlamak için kullanılır. Ortaya çıkan tablo düzeni genellikle tablonun içeriğine bağlıdır.
fixed: Bu değerle, tablonun düzeni içeriği yok sayar ve bunun yerine tablonun genişliğini, sütunların belirtilen genişliğini ve kenarlık ve hücre aralığı değerlerini kullanır. Kullanılan sütun değerleri, tablonun ilk satırı için sütunlarda veya hücrelerde tanımlanan genişliklere dayanır.
inherit: değerin, table-layoutüst değerin değerinden miras alındığını gösterir

Değerinin fixedherhangi bir etkiye sahip olması için, tablonun genişliğinin auto( widthözellik için varsayılan) dışında bir değere ayarlanması gerekir . Aşağıdaki demolarda, tüm tablo genişlikleri% 100 olarak ayarlanmıştır; bu, tablonun üst kapsayıcısını yatay olarak doldurmasını istediğimizi varsayar.

Sabit bir tablo düzeni algoritmasının etkilerini görmenin en iyi yolu bir demo kullanmaktır.

CodePen'de Louis Lazaris (@impressivewebs) tarafından CSS'nin tablo düzeni özelliği için Kalem Demosuna bakın.

Yukarıdaki demoyu ilk kez görüntülediğinizde, tablo sütunlarının düzeninin dengesiz ve garip olduğunu fark edeceksiniz. Bu noktada tablo, tablonun nasıl düzenleneceğini tanımlamak için tarayıcının varsayılan algoritmasını kullanıyor, bu da içeriğin düzeni belirleyeceği anlamına geliyor. Demo, bir tablo hücresine uzun bir metin dizisi ekleyerek bu gerçeği abartırken, diğer tüm tablo hücrelerinin her biri yalnızca iki kelime kullanır. Gördüğünüz gibi, tarayıcı daha büyük içeriği barındırmak için ilk sütunu genişletiyor.

"Tablo düzenini değiştir: sabit" düğmesini tıklarsanız, "sabit" algoritma kullanıldığında tablo düzeninin nasıl göründüğünü görürsünüz. Zaman table-layout: fixeduygulandığı, içerik artık düzeni belirler, ancak bunun yerine, tarayıcı sütun genişliklerini tanımlamak için tablonun ilk satırdan tanımlanmış herhangi bir genişlikleri kullanır. İlk satırda genişlik yoksa, sütun genişlikleri, hücrelerin içeriğine bakılmaksızın tablo boyunca eşit olarak bölünür.

Daha fazla örnek bunu daha net hale getirmeye yardımcı olabilir. Aşağıdaki demoda, tablo, ilk öğesi genişliğe sahip bir öğeye sahiptir 400px. Bu durumda, geçiş yapmanın table-layout: fixedhiçbir etkisi olmadığına dikkat edin .

CodePen'de Louis Lazaris (@impressivewebs) tarafından CSS'nin tablo düzeni özelliği için Kalem Demosuna bakın.

Bunun nedeni, varsayılan düzen algoritmasının temelde "ilk sütunu 400 piksel genişliğinde yap ve kalan sütunları içeriklerine göre dağıt" demesidir. Diğer üç sütun birbiriyle aynı içeriğe sahip olduğu için herhangi bir değişiklik olmayacaktır. Ama şimdi diğer sütunlardan birine fazladan metin içeriği ekleyelim:

CodePen'de Louis Lazaris (@impressivewebs) tarafından sütun genişliği ve değişken içeriğe sahip CSS'nin tablo düzeni özelliği için Kalem Demosuna bakın.

Şimdi, geçiş düğmesine tıklarsanız, sütunların içerikten bağımsız olarak sabit bir düzene uyacak şekilde ayarlandığını göreceksiniz. Bir kez daha aynı şey oluyor; ilk sütun 400px olarak ayarlanır, ardından kalan sütunlar eşit olarak bölünür. Ancak bu sefer sütunlardan biri ekstra içeriğe sahip olduğu için fark dikkat çekicidir.

Sabit bir düzen algoritması sütun genişliklerini nasıl belirler?

Aşağıdaki iki demo, tablonun ilk satırının ayarlanan bir tablonun sütun genişliklerini tanımlamaya yardımcı olan şey olduğunu anlamaya yardımcı olacaktır table-layout: fixed.

CodePen'de Louis Lazaris (@impressivewebs) tarafından tanımlanan genişlik verilen satır 1'de hücre ile CSS'nin tablo düzeni için Kalem Demosuna bakın.

Yukarıdaki demoda, tablonun ilk satırındaki ilk hücre 350px genişliğe sahiptir. Geçiş yapmak table-layout: fixeddiğer sütunları ayarlar ancak ilki aynı kalır. Şimdi aşağıdaki demoyu deneyin:

CodePen'de Louis Lazaris (@impressivewebs) tarafından tanımlanmış genişlik verilen satır 2'deki hücre ile CSS'nin tablo düzeni için Kalem Demosuna bakın.

Bu durumda, ilk tablo hücresine eklenen bir genişliğe sahip ikinci satırdır. Şimdi geçiş düğmesine tıklandığında, tüm sütun genişlikleri ayarlanır. Yine, bunun nedeni sabit yerleşim algoritmasının sütun genişliklerini belirlemek için ilk satırı kullanması ve sonuçta genişlikleri eşit olarak dağıtmasıdır.

Sabit bir düzen algoritmasının faydaları

Kullanmanın estetik faydaları table-layout: fixedyukarıdaki gösterilerden anlaşılır olmalıdır. Ancak diğer büyük fayda performanstır. Spesifikasyon, sabit algoritmayı "hızlı" bir algoritma olarak ifade eder ve bunun iyi bir nedeni vardır. Tarayıcının, sütunların boyutunu belirlemeden önce tüm tablonun içeriğini analiz etmesi gerekmez; yalnızca ilk satırı analiz etmesi gerekir. Sonuç, tablonun düzeninin daha hızlı işlenmesidir.