10. Tablolarla Çalışmak

1.Border-collapse : Collapse(tek çizgi) / seperate(iki çizgi) sınır çizgisinin sayısını belirler.

<style>
 table{
   border-collapse : collapse;
}
 </style>

Görüldüğü üzere normalde tabloların kenar çizgi sayısı 2 iken kullandığımız özellikle tablo tek çizgi halini aldı.


2.Border-spacing : Tabloların satırları ve sütunları arasında boşluk vermeye yarar.

<style>
 table{
  border-collapse : collapse;
  border-spacing : 10px;

}
 </style>

*border-spacing : 10px 5px;  //ilk parametre sol ve sağ boşlukları ayarlar. İkinci parametre ise alt ve üst boşlukları ayarlar.

3. Caption-side : tablo başlığının yerini değiştirir. İki farklı parametre alabilir , top ve bottom.

<style>
  table{
   border-spacing : 10px;
   caption-side : bottom;
   }
</style>

4. Empty-cells : içi boş hücrelerin durumunu tanımşlar. İki parametre alabilir. Ya görünsün anlamında show ya da saklansın anlamında hide. Default değeri show’dur.

<style>
 table{
   border-collapse : collapse;
   border-spacing : 10px;
   caption-side : bottom;
   empty-cells : hide;
 }
 </style>

              hide                                                                    show