Tablo ve kutu hesaplama teknikleri

 
Web Tasarım  
582  

Merhaba.

HTML'de table veya iç içe çoklu div kullanırken hesaplama sıkıntısı yaşadıysanız, bu yazım size faydalı olabilir. Yazımda CSS veya HTML kodları olmayacak, sadece kendim bulduğum bazı formülleri sizlerle paylaşacağım. Göstereceğim formüller sayesinde CSS veya HTML tarafında daha sistematik ve hatadan uzak tablo veya katman hesaplamaları yaparak kod yazmanızı sağlayacaktır.

Formüllere geçmeden önce kullanacağımız kısaltmaların ne anlam taşıdığına bir bakalım.

Büyük Harfli Kısaltmalar
W
= Genişlik
H = Boy
C = Sayısı (kaçtane olduğu)
T = Toplam
P = İç boşluk (padding)

Küçük Harfli Kısaltmalar
h = Yatay
v = Dikey
b = Kutu (div veya table içindeki td gibi)
l = Hat (Bordür)
bg = Arkaplan (table veya ana div)

Birleşik Kısaltmalar
hbC
= Yatay kutu sayısı (table'daki tdler gibi)
vbC = Dikey kutu sayısı (table'daki trler gibi ama tam olarak bu anlama gelmiyor çünkü tr içinde birden çok td olabiliyor)
hlC = Yatay hat sayısı
vlC = Dikey hat sayısı
hbP = Yatay kutu iç boşluğu
vbP = Dikey kutu iç boşluğu
hbTP = Yatay kutu iç boşluk toplamı
vbTP = Dikey kutu iç boşluk toplamı
bgW = Arkaplan genişliği
bgH = Arkaplan uzunluğu
bW = Kutu genişliği
bH = Kutu uzunluğu
hlW = Yatay hat genişliği (bordür uzunluğu değil, genişliği)
vlW = Dikey hat genişliği (bordür uzunluğu değil, genişliği)
bTC = Kutu sayısı

Şimdi geçelim formüllerimize:

Arkaplanın yatay genişliğini bulma formülü (eğer margin değeride hesaplanacaksa padding değerindeki gibi hesaplanabilir)
vlC = hbC 1
hbTP = hbP * 2
bgW = bW * hbC vlW * vlC hbTP * hbC

Arkaplanın dikey uzunluğu bulma formülü (eğer margin değeride hesaplanacaksa padding değerindeki gibi hesaplanabilir)
hlC = vbC 1
vbTP = vbP * 2
bgH = bH * vbC hlW * hlC vbTP * hbC

Toplam kutu sayısını bulma formülü (sadece tüm satırdaki kutu sayıları aynı olan tablolarda hesaplanır)
bTC = vbC * hbC