Şimdi uzun ve önemli bir konu göreceğiz. Tablolar! Bu konu önemli bir konudur. Çünkü tablo ile yapılan tasarımlar tablo özelliklerine dayanır. Başlayalım.
Tablolar
Kenarlık:
Stil belirtmek için "border-style" kullanılır. Özelliklerine göz atalım:
- dotted: Çizgili
- dashed: Kısa Çizgili
- solid: Çizgi
- double: Çift Çizgili
- grove, ridge, inset, outside: Kalın Çizgi (Hepsi Olabilir)
Örnek verelim:
.tablo {
border-style: double;
}
Şimdi bir kenarın kalınlığını belirtelim. Kesinlikle önceden bir "border-style" belirtmemiz gerekir. Aksi takdirde çalışmaz. Örneğin:
.tablo {
border-style: solid;
border-width: 2px;
}
Şimdi de kenarlık rengini belirtelim. Bunda da aynı şekilde önceden "border-style" belirtmemiz gerekir. Örneğin:
.tablo {
border-style: solid;
border-width: 2px;
border-color: #FF8000;
}
Bu şekilde tüm öğrendiğimiz stilleri pekiştirdik.
Genişlik-Yükseklik:
Bu yöntem ile tablonun her hücresine ayrı bir büyüklük veya yükseklik verebiliriz. Örneğin:
td.hücre1 {
width: 100px;
height: 100px;
}
td.hücre2 {
width: 100px;
height: 200px;
}
Yazı Özellikleri:
Tablonun içindeki yazı özellikleridir. Yine her hücrede tek tek kullanılabilir. "text-aling" yani hiza, "color" yani renk, "background-color" arkaplan rengi gibi özellikleri vardır. Örneğin:
.tablo {
border-style: solid;
border-width: 2px;
border-color: #FF8000;
text-aling: center;
color: #FF8000;
background-color: #EEEEEE;
}
Bu derslik bu kadar ve önemli bir konuyu atlattık ve daha önemli bir konu olan kenarlıklara geçeceğiz. Zor olsada eğlenceli olacak. Kolay gelsin. Çalışmayı unutmayın.
0 Yorum:
Yorum Gönder
Yorumunuz Başarıyla İletilmiştir. Kinger veya Takipçisi iseniz Puanınız Eklenecektir. Teşekkürler.