Not: Kişisel Blogumda 4 yıl önce yazmış olduğum eğitimlerdir.

Merhabalar herkese. Tablolar dersimizin 3. sü ve son dersi ile yine beraberiz. Bu dersimizde geriye kalan bir kaç özelliğimizden ama önemli özellklerimizden bahsedeceğim. Geçen dersleri anlatırken atlamış olduğum bir özelliğe de bu dersimde yer vereceğim.

Tabloya Alt Ve Üst Başlık Ekleme

Düşünelim ki bir Web sayfasında birden fazla tablo oluşturduk böyle bir durumda bu tabloların ne olduğunu kullanıcıya bir şekilde bildirmemiz gerekir.

Bunun içinde aklımıza gelen en makul çözüm tabloya isim vermek olacaktır herhalde.

  • Tablomuza başlık eklemek istersek bunu

<thead>…</thead> 

etiketleri arasına yazarız. Ve bunu <table> etiketinin hemen altına yazarız.

 

 

  • Bu üst bilgisi içindi bu tabloya birde alt bilgi satırı eklemek istersek o zaman

<caption>… </caption>

etiketini kullanırız.

 

 

Tablo Renklendirme

Ama tablomuzu daha belirgin daha şık hale getirebiliriz.

Bunu da zannedersem tablomuzu renkli hale getirirsek başarabiliriz.

  • Tablomuzun arka plan rengini table etiketine ait bgcolor parametresini kullanarak yapabiliriz.

 

  • Eğer sadece satır rengini değiştirmek istersek tr ye ait bgcolor parametresini kullanırız.

 

  •  Tek bir hücrenin rengini değiştirmek için td ye ait bgcolor parametresini  kullanırız.

Tablomuzun ana arka fonunu kırmızı en üst satırı sarı, alt satırları ise gri yapalım ve son hücremizide yeşil yapalım.
 

 

 

Artık tablolarla ilgili işimizin sonuna gelirken son söyleyeceğimiz şey tablo çizgilerinin rengini ve görüntüsünü belirleme olacak.

  • Tablo çizgilerinin rengini table etiketine ait bordercolor parametresi ile belirleriz.

 

  • Biraz daha işi cafcaflı hale getirmek istersek yani çizgilere 3 boyut özelliği vermek istersek bunu bordercolorlight ile çerçevenin aydınlık kısmının rengini belirleyerek, bordercolordark ile de karanlık kısmının rengini belirleyerek sağlayabiliriz.

Daha önceki derslerde unuttuğum bir konuya da burada değinip tablolar konumuza son verelim.

  • Eğer bir hücremizin içinin boş olmasını istersek

<td>&nbsp</td>  

şeklinde oluşturmamızın gerekecekti.

Yoksa boş hücrenin kenarlıkları gözükmeyecektir. Buna dikkat etmeliyiz.

Diyelim ve böylelikle uzunca bir serüveninde sonuna gelmiş olalım. Çalışan arkadaşlarıma kolaylıklar. Vesselam.

Facebook Sayfamizdan Bizleri Takip Edebilirsiniz
Murat Bilginer

Industryolog Akademi Founder – Endüstri Mühendisi
Canias ERP Troia Geliştiricisi & Yazılım Uzmanı
7 Yıldır bildiğini paylaşmak için çabalayan bir blogger.

http://muratbilginer.net/