HTML Tablo Biçimlendirme

Tabloların daha iyi görünmesini sağlamak için CSS kullanılır.

HTML Zebra Tablo

Her tablonun satırına bir arka plan rengi eklenirse zebra biçiminde tablo elde edilebilir.

Diğer tüm tablo satır öğelerine stil vermek için :nth-child(even) seçici kullanılır.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #D6EEEE;
}
</style>
</head>
<body> 
<table>
  <tr>
  <th>TurkYazilimci</th>
  <th>Yazılım</th>
  <th>Eğitimi</th>
  </tr>
  <tr>
  <td>Deneme</td>
  <td>Deneme</td>
  <td>Deneme</td>
  </tr>
  <tr>
  <td>Deneme</td>
  <td>Deneme</td>
  <td>Deneme</td>
  </tr>
  <tr>
  <td>Deneme</td>
  <td>Deneme</td>
  <td>Deneme</td>
  </tr>
  <tr>
  <td>Deneme</td>
  <td>Deneme</td>
  <td>Deneme</td>
  </tr>
</table>

</body>
</html>

Not : even yerine odd kullanmanız durumunda 2,4,6,8 gibi çift hücreler yerine 1,3,5,7 gibi tek satırlarda renk oluşacaktır.

HTML Dikey Zebra Çizgileri

Dikey zebra çizgileri oluşturmak için her satır yerine her sütuna style özelliği ile stil verilir.

Aşağıdaki gibi tablo veri öğeleri için :nth-child(even) değerini ayarlanır:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th:nth-child(even),td:nth-child(even) {
  background-color: #D6EEEE;
}
</style>
</head>
<body>
 
<table style="width:100%">
  <tr>
    <th>PZT</th>
    <th>SAL</th>
    <th>ÇAR</th>
    <th>PER</th>
    <th>CUM</th>
    <th>CTS</th>
    <th>PAZ</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

</body>
</html>

Not: Stilin hem başlıklarda hem de normal tablo hücrelerinde olmasını istiyorsanız :nth-child() seçiciyi hem <th> hem de <td> etiketlerine eklemek gereklidir.

HTML Dikey ve Yatay Zebra Çizgilerini Birleştirme

Yukarıdaki iki örnekteki stili birleştirebilirsiniz; her satırda ve her sütunda kesişen şeritler elde edersiniz.

Şeffaf bir renk kullanırsanız örtüşen bir etki elde edersiniz.

Rengin şeffaflığını belirtmek için önceki yazılarımızdan da hatırlayacağınız gibi alfa (alpha) kanalını kullanarak rgba() ile renk verilebilir.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}
</style>
</head>
<body>
 
<table style="width:100%">
  <tr>
    <th>PZT</th>
    <th>SAL</th>
    <th>ÇAR</th>
    <th>PER</th>
    <th>CUM</th>
    <th>CTS</th>
    <th>PAZ</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

</body>
</html>

Horizontal Divider (Yatay Ayırıcılar)

Kenarlıkları yalnızca her tablo satırının altında belirtirseniz yatay ayırıcılara sahip bir tablo elde edersiniz.

Yatay ayırıcılar elde etmek için border-bottom özelliğini tüm tr etiketlerine eklemek gereklidir:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

tr {
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
 
<table style="width:100%">
  <tr>
    <th>PZT</th>
    <th>SAL</th>
    <th>ÇAR</th>
    <th>PER</th>
    <th>CUM</th>
    <th>CTS</th>
    <th>PAZ</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

</body>
</html>

HTML Hoverable Table

Fareyle üzerine gelindiğinde tablo satırlarını vurgulamak için tr üzerindeki :hover css seçici kullanılır:

Aşağıdaki kodları kendiniz de yazarak mutlaka deneyiniz.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #DDD;
}

tr:hover {background-color: #D6EEEE;}
</style>
</head>
<body>
 
<table style="width:100%">
  <tr>
    <th>PZT</th>
    <th>SAL</th>
    <th>ÇAR</th>
    <th>PER</th>
    <th>CUM</th>
    <th>CTS</th>
    <th>PAZ</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

</body>
</html>
3 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir