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>
1 2 3
4 5 6

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>
1 2
4 5 6

 

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>
1 2 3
4 5 6

 

 

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>
1 2 3
4 6

 

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

5 2 votes
Article Rating
Subscribe
Bildir
guest
1 Yorum
Eskiler
En Yeniler Beğenilenler
Inline Feedbacks
View all comments
oğuzhan
oğuzhan
5 ay önce

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