HTML Tablolarda Padding ve Spacing

HTML tablolarda hücrelerin içindeki dolguyu ve hücreler arasındaki boşluğu ayarlamak mümkündür.

HTML Tablolarda Dolgu

Hücrelerde padding (dolgu), hücre kenarları ile hücre içeriği arasındaki boşluktur.

Varsayılan olarak dolgu 0’a ayarlıdır.

Tablo hücrelerine dolgu eklemek için CSS padding özelliği kullanılır:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
</style>
</head>
<body>
 
<table style="width:100%">
  <tr>
    <th>Turk</th>
    <th>Yazilimci</th> 
    <th>Sitesi</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>ASP</td>
    <td>ASP.Net</td>
  </tr>
  <tr>
    <td>Android</td>
    <td>Swift</td>
    <td>Kotlin</td>
  </tr>
</table>

</body>
</html>

Yalnız yazının üzerine dolgu yani padding eklemek için padding-top özelliği kullanılabilir. Aynı şekilde sağ, sol ve alt taraftan padding vermek de mümkündür. Bunun için padding-bottom, padding-right, padding left kullanılabilir.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}
</style>
</head>
<body>
 
<table style="width:100%">
  <tr>
    <th>Turk</th>
    <th>Yazilimci</th> 
    <th>Sitesi</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>ASP</td>
    <td>ASP.Net</td>
  </tr>
  <tr>
    <td>Android</td>
    <td>Swift</td>
    <td>Kotlin</td>
  </tr>
</table>
 

</body>
</html>

HTML Tablolarda Hücre Aralığı (Cell Spacing)

Hücre aralığı her hücre arasındaki boşluktur. Varsayılan olarak 2 px’dir. Hücreler arasındaki boşluğu değiştirmek için border-spacing özelliği kullanılabilir.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table {
  border-spacing: 30px;
}
</style>
</head>
<body>
 
<table style="width:100%">
  <tr>
    <th>Turk</th>
    <th>Yazilimci</th> 
    <th>Sitesi</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>ASP</td>
    <td>ASP.Net</td>
  </tr>
  <tr>
    <td>Android</td>
    <td>Swift</td>
    <td>Kotlin</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