HTML / table / td / th / tr

HTML Tablo Birleştirme

HTML’de tablolar eskisi kadar önemli olmasa da tablo amaçlı olarak kullanırız. Ancak layout olarak kullandığımız zamanlarda tablo birleştirme oldukça önemli rol oynamaktaydı. Şimdi ise email tasarımlarında layout olarak kullanmak zorunda olduğumuz için bu alanda proje yapacak arkadaşlar için tablo birleştirme hakkında bir kaç detay yazıyorum.

Tablo hücrelerini birleştirirken yatay elemanlar için colspan dikey elemanlar için rowspan kullanıyoruz.

HTML COLSPAN Kullanımı

HTML hücreleri yatay olarak genişletmek istediğimiz zaman colspan kullanırız.  colspan ek niteliği içerisine kaç hücrelik birleştirme yapmak istediğimizi yazarız.

Tablo Normal Görünüm

<table>
<tbody >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td >5</td>
<td>6</td>
</tr>
</tbody>
</table>
123
456

Colspan Örnek

<table>
<tbody >
<tr>
<td>1</td>
<td colspan="2">2</td>

</tr>
<tr>
<td>4</td>
<td >5</td>
<td>6</td>
</tr>
</tbody>
</table>
12
456

 

Yukarıdaki örnekte 3 numaralı hücreyi silmek zorunda kaldık.

HTML ROWSPAN Kullanımı

 

HTML Hücreleri dikey olarak genişletmek istersek rowspan atr kullanırız. Rowspan ek niteliği içerisinde kaç hücrelik dikey genişleme olacağını gireriz.

 

Tablo Normal Görünüm

<table>
<tbody >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td >5</td>
<td>6</td>
</tr>
</tbody>
</table>
123
456

 

 

Rowspan Örnek

<table>
<tbody >
<tr>
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>

<td>6</td>
</tr>
</tbody>
</table>
123
46

 

Yukarıdaki örnekte 5 numaralı hücreyi silmek zorunda kaldık.

4.9 8 votes
Article Rating
Subscribe
Bildir
guest
2 Yorum
Eskiler
En Yeniler Beğenilenler
Inline Feedbacks
View all comments
oğuzhan
oğuzhan
3 yıl önce

2 rakamının üstte olmasını sağlayamaz mıyız? ortada değilde üst satıra hizalı olmasını istiyorum

Mert Barış
Mert Barış
Reply to  oğuzhan
2 yıl önce

Center ile tam ortaya getirebilirsin kardeşim, Üste hizalamayı şu an hatırlıyorum