Css çizgili tablo yapımı

Merhaba arkadaşlar,

Css3 ile birlikte gelen yeni seçicilerden biri olan :nth-child seçicisi ile nasıl çizgili(striped) tablolar oluşturabiliriz ona bir bakalım. :nth-child seçicisinden önce bu işlemi yapmak için php ile çeşitli yöntemler kullanarak yada direk manuel olarak çizgili tablolar yapıyorduk. Css3’ün bize sunmuş olduğu nimetler sayesinde artık bu yöntemlere ihtiyacımız yok ve her şeyi daha hızlı ve kolay bir şekilde yapabiliyoruz.

Hemen bir örnekle konumuzu netleştirelim. Html kodlarımız:

<table>

   <tr>

      <td>Css çizgili tablo yapımı</td>

      <td>Lorem ıpsum</td>

   </tr>

   <tr>

      <td>Css3</td>

      <td>Lorem ıpsum</td>

   </tr>

   <tr>

      <td>Lorem ıpsum</td>

      <td>Dolor sit</td>

   </tr>

</table>

Css kodumuz:

tr:nth-child(even){
    background:#ddd;
}

Burada parantez içinde yazmış olduğumuz even parametresi indis numarası tek sayı olan satırları seçmemizi sağlar. :nth-child(odd) şeklinde kullanmış olsaydık eğer buradaki odd parametresi de indis numarası çift sayı olan satırları seçmemizi sağlayacaktı. Daha basit bir deyişle anlatmak gerekirse :

Css çizgili tablo yapımı bu kadar basittir arkadaşlar. :nth-child seçicisini sadece tablolorda değil tüm block elemanlarında kullanabilirsiniz. Umarım faydalı olur bir sonraki yazımıda görüşmek üzere sağlıcakla kalın 🙂