Css Eğitimi Ders 8-Tablolar

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Ş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.<br /> <h3> Tablolar</h3> <h4> Kenarlık:</h4> <div> Stil belirtmek için "border-style" kullanılır. Özelliklerine göz atalım:</div> <div> <ul> <li>dotted: Çizgili</li> <li>dashed: Kısa Çizgili</li> <li>solid: Çizgi</li> <li>double: Çift Çizgili</li> <li>grove, ridge, inset, outside: Kalın Çizgi (Hepsi Olabilir)</li> </ul> <div> Örnek verelim:</div> </div> <div> <br /></div> <div> .tablo {</div> <div> border-style: double;</div> <div> }</div> <div> <br /></div> <div> Şimdi bir kenarın kalınlığını belirtelim. Kesinlikle önceden bir "border-style" belirtmemiz gerekir. Aksi takdirde çalışmaz. Örneğin:</div> <div> <br /></div> <div> <div> .tablo {</div> <div> border-style: solid;</div> <div> border-width: 2px;</div> <div> }</div> </div> <div> <br /></div> <div> Şimdi de kenarlık rengini belirtelim. Bunda da aynı şekilde önceden "border-style" belirtmemiz gerekir. Örneğin:</div> <div> <br /></div> <div> <div> .tablo {</div> <div> border-style: solid;</div> <div> border-width: 2px;</div> <div> border-color: #FF8000;</div> <div> }</div> </div> <div> <br /></div> <div> Bu şekilde tüm öğrendiğimiz stilleri pekiştirdik.</div> <h4> Genişlik-Yükseklik:</h4> <div> Bu yöntem ile tablonun her hücresine ayrı bir büyüklük veya yükseklik verebiliriz. Örneğin:</div> <div> <br /></div> <div> td.hücre1 {</div> <div> width: 100px;</div> <div> height: 100px;</div> <div> }</div> <div> td.hücre2 {</div> <div> <div> width: 100px;</div> <div> height: 200px;</div> </div> <div> }</div> <h4> Yazı Özellikleri:</h4> <div> 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:</div> <div> <br /></div> <div> <div> .tablo {</div> <div> border-style: solid;</div> <div> border-width: 2px;</div> <div> border-color: #FF8000;</div> <div> text-aling: center;</div> <div> color:  #FF8000;</div> <div> background-color: #EEEEEE;</div> <div> }</div> </div> <div> <br /></div> <div> 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.</div>

Css Eğitimi Ders 8-Tablolar

Merhaba, Şimdi uzun ve önemli bir konu göreceğiz. Tablolar! Bu konu önemli bir konudur. Çünkü tablo ile yapılan tasarımlar tablo özellikl...

Devamı »