HTML Tablo Hücre Birleştirme Colspan Rowspan Örnekleri

Trang chủ » Html Colspan Kullanımı » HTML Tablo Hücre Birleştirme Colspan Rowspan Örnekleri

Có thể bạn quan tâm

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 votesArticle Rating

Từ khóa » Html Colspan Kullanımı