“CSS Tables: Tasarım ve Yapılandırma İçin Tablo Stilleri”

Web tasarımında tablolar, verileri düzenlemenin ve düzgün bir şekilde göstermenin temel bir yoludur. CSS ile tabloları özelleştirmek ve stillemek için kullanılan tekniklere odaklanan bu yazıda, temel tablo stillemelerini göreceğiz.

1. Temel Tablo Yapısı:

HTML’de bir tablo oluşturmak için temel yapı şu şekildedir:

<table>
  <tr>
    <th>Ürün</th>
    <th>Fiyat</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>Akıllı Telefon</td>
    <td>$500</td>
  </tr>
</table>

2. Temel Stillemeler:

CSS ile tabloyu temel olarak stillemek için:

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

Bu basit stillemeler, tablonuzun genişliğini ayarlar, hücrelere dolgu ekler, kenarlıkları tanımlar ve başlıkları arkaplan rengiyle vurgular.

3. Çizgiler ve Gölgeler:

Tablolara çizgi eklemek ve hücrelere gölgelendirme yapmak için:

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

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

th {
  background-color: #4CAF50;
  color: white;
}

Bu stillemeler, çizgileri daha belirgin hale getirir ve alternatif satırlara farklı arkaplan renkleri uygular.

4. Responsive Tasarım:

Tabloyu küçük ekranlara uygun hale getirmek için:

@media (max-width: 600px) {
  th, td {
    display: block;
    width: 100%;
  }
}

Bu stilleme, ekran genişliği 600 pikselden küçük olduğunda hücreleri blok halinde düzenler.

5. Hover Efekti:

Tabloya fare ile gelindiğinde renk değişikliği eklemek için:

tr:hover {
  background-color: #f5f5f5;
}

Bu stilleme, fare tablonun üzerine geldiğinde satırın arkaplan rengini değiştirir.

Bu basit örneklerle, CSS tablolarını tasarlamak ve yapılandırmak için temel tekniklere aşina oldunuz. Daha karmaşık tasarımlar ve özel ihtiyaçlar için CSS tablo özelliklerini inceleyerek tasarım yeteneklerinizi daha da genişletebilirsiniz.