HTML Tablo Satır ve Sütun Aralığı

HTML tabloları birden fazla satıra ve/veya sütuna yayılan hücrelere sahip olabilir.

HTML Tablo Colspan

Birden fazla sütunda hücre birleştirme oluşturmak için colspan özelliği kullanılabilir:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
} 
</style>
</head>
<body>
 
<table style="width:100%">
  <tr>
    <th colspan="2">TurkYazilimci</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>

Not : Colspan özelliğinin alacağı değer, yayılacak sütun sayısını belirtir.

HTML Tablo Rowspan

Birden fazla satırda hücre birleştirme oluşturmak için rowspan özelliği kullanılabilir:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
} 
</style>
</head>
<body>
 
<table style="100%">
  <tr>
    <th>Ad</th>
    <td>TurkYazilimci</td>
  </tr>
  <tr>
    <th rowspan="2">Örnek Eğitimler</th>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
</tr>
</table>
  
</body>
</html> 

Not : Rowspan özelliğinin alacağı değer, yayılacak satır sayısını belirtir.

17 Ekim 2023
Was this article helpful?

Bir yanıt yazın

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