CSS Renkli Tablo Oluşturma


Bilindiği üzere bir HTML tablosunun görünümü CSS ile büyük ölçüde geliştirilebilir ve size burada renkli bir css tablosu oluşturabileceğiniz kodları vereceğim.

CSS KODU

#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

Yukarıdaki CSS kodlarını web sitenizin CSS kodlarının bulunduğu bölüme yapıştırın

Aşağıda bulunan HTML kodlarını ise sitenizde nerede bu tabloyu oluşturmak istiyorsanız oraya yapıştırıp tablo içerisindeki yerleri doldurabilir ve ya yeni kısımlar ekleyebilirsiniz.
HTML KODU
<table id="customers">
  <tr>
    <th>Şirket</th>
    <th>İletişim</th>
    <th>Şehir</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

1 Yorumlar

  1. Eğer web tasarım ile ilgili olan arkadaşlar var ise https://www.umitdemiroglu.com/

    YanıtlaSil

Yorum Gönder

Daha yeni Daha eski