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.
2 rakamının üstte olmasını sağlayamaz mıyız? ortada değilde üst satıra hizalı olmasını istiyorum
Center ile tam ortaya getirebilirsin kardeşim, Üste hizalamayı şu an hatırlıyorum