CSS Aşağıdaki gibi tablolarınızda farklı renk ve tasarımlar kullanmanıza olanak sağlar:
Tablolarla ilgili bilmeniz gereken komutlar:
- border
- border-collapse
- width ve height
NOT: Tablolarda nesneler hücrelerde yer alır.
HTML'de hücreler
TD elementi ile belirtilir. Dolayısıyla aşağıda anlatılan kodların çoğu
TD elementine yöneliktir.
border-collapse: Kenarlıkları Kaldır
Tablo özelliği olarak bunu belirtirsek tablonun varsayılan kenarlıkları görülmeyecektir.
Kod
table.tablom { border-collapse: collapse; } width/height: Tablo Genişliği ve Yüksekliği
Tablo ve tablo hücreleri için genişlik
(width) ve yükseklik (
height) belirtmemizi sağlar.
Kod
td.hucre1 { width: 100px; height: 200px; }
td.hucre2 { width: 400px; height: 100px; } Yukarıdaki örnekte
hucre1 adlı hücre
100 piksel genişlik ve
200 piksel yüksekliğe sahipken,
hucre2 400 piksel genişlik ve 100 piksel yüksekliğe sahiptir.
Diğer Tablo Şekillendirme Komutları text-align: Tablo içindeki yazıların hizasını belirlersiniz.
padding: Tablo içinden belirtilen değerde boşluk verdirir.
background-color: Arkaplan rengini belirtir.
color: Yazı rengini belirtir.