Post Date: 22 Kasım 2022
HTML Tablo da Satır ve Sütün ( Colspan & Rowspan ) Birleştirme ve Şekillendirme Örnekleri
HTML sayfalarında tablolarda bazı hücreleri birleştirmek gerekebilir. Eğer aynı satırdaki hücreleri birleştirmek istiyorsanız ” Colspan ” özellik değerini, aynı sütundaki hücreleri birleştirmek istiyorsanız ” Rowspan ” özellik değerini kullanmamız gerekir.
Bu yazıda Html’ de tablo içerisinde ” Colspan ” ve ” Rowspan ” kullanımını nasıl kullanıp kodlayabileceğinizi örneklerle anlatmaya çalıştık. Detaylı inceleyip ve uygulamaya çalışırsanız nasıl bir algoritmada ilerlediğini göreceksiniz.
Konuyla ilgili detaylı sorularınızı bize iletebilirsiniz.
Örnek 1:
HTML Kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html> <head> <title>Tablo Uygulaması</title> <meta charset="utf-8"/> </head> <body> <table border=2 bordercolor="Red" > <tr> <td colspan="2" width="100">5B Sınıfı</td> </tr> <tr> <td>Kız</td> <td>Erkek</td> </tr> <tr> <td>12</td> <td>18</td> </tr> </table> </body> </html> |
Örnek 2:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!doctype html> <html> <head> <title>Tablo Uygulaması</title> <meta charset="utf-8"/> </head> <body> <table border=2 bordercolor="Red" > <tr> <td colspan="3" width="100">STOKLAR</td> </tr> <tr> <td width="100">Sıra No</td> <td width="100">Stok Adı</td> <td width="100">Stok Adeti</td> </tr> <tr> <td>1</td> <td>Kalem</td> <td rowspan="3">50</td> </tr> <tr> <td>2</td> <td>Kitap</td> </tr> <tr> <td>3</td> <td>Silgi</td> </tr> </table> </body> </html> |
Örnek 3:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!doctype html> <html> <head> <title>Tablo Uygulaması</title> <meta charset="utf-8"/> </head> <body> <table border=2 bordercolor="Red" > <tr> <td align="center" colspan="3" width="100">STOKLAR</td> </tr> <tr> <td width="100">Sıra No</td> <td width="100">Stok Adı</td> <td width="100">Stok Adeti</td> </tr> <tr> <td>1</td> <td>Kalem</td> <td align="center" rowspan="3">50</td> </tr> <tr> <td>2</td> <td>Kitap</td> </tr> <tr> <td>3</td> <td>Silgi</td> </tr> </table> </body> </html> |
Örnek 4:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Alış Veriş Tablosu</title> </head> <body> <table border="2"> <tr> <td colspan="4">Alış Veriş Tablosu</td> </tr> <tr> <td>Tür</td> <td>Ürün</td> <td>Fiyat</td> <td>İndirim Oranı</td> </tr> <tr> <td rowspan="5">Beyaz Eşya</td> <td>Buzdolabı</td> <td>1.750</td> <td rowspan="3">%25</td> </tr> <tr> <td>Fırın</td> <td>650</td> </tr> <tr> <td>Çamaşır Makinesi</td> <td>1.100</td> </tr> <tr> <td>Bulaşık Makinesi</td> <td>750</td> <td rowspan="2">%35</td> </tr> <tr> <td>Dondurucu</td> <td>600</td> </tr> <tr> <td rowspan="2">Küçük Ev Aletleri</td> <td>Mikser</td> <td>138</td> <td rowspan="2">%10</td> </tr> <tr> <td>Saç Kurutma</td> <td>151</td> </tr> </table> </body> </html> |
Örnek 5:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!doctype html> <html> <head> <title>Tablo Örnekleri</title> <meta charset="utf-8"> </head> <body> <h1>Tablo Örnekleri</h1> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td align="center" rowspan="2" colspan="2" >6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> <td>13</td> </tr> </table> </body> </html> |
Örnek 6:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!doctype html> <html> <head> <title>Tablo Örnekleri</title> <meta charset="utf-8"> <meta name="description" content="Tablo Örnekleri"> </head> <body> <table border="2" width="200"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td colspan="2" align="center">5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </body> </html> |
Örnek 7:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!doctype html> <html> <head> <title>Tablo Örnekleri</title> <meta charset="utf-8"> <meta name="description" content="Tablo Örnekleri"> </head> <body> <table border="2" width="200"> <tr> <td rowspan="3">1</td> <td>2</td> <td colspan="2">3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td colspan="3">7</td> </tr> <tr> <td rowspan="2">8</td> <td colspan="2" align="center">9</td> <td>10</td> </tr> <tr> <td colspan="2">11</td> <td>12</td> </tr> </table> </body> </html> |
Örnek 8:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html> <head> <title>Tablo Örnekleri</title> <meta charset utf="8"> </head> <body> <table border="3" width="50%" height ="200" align="center"> <tr> <td align="center">1</td> <td rowspan="2" align="center">2</td> <td rowspan="2" colspan="2" align="center">3</td> <td align="center">4</td> </tr> <tr> <td align="center">5</td> <td align="center">6</td> </tr> <tr> <td align="center">7</td> <td rowspan="3" align="center">8</td> <td align="center">9</td> <td rowspan="2"align="center">10</td> <td align="center">11</td> </tr> <tr> <td align="center">12</td> <td align="center">13</td> <td rowspan="2"align="center">14</td> </tr> <tr> <td align="center">15</td> <td colspan="2" align="center">16</td> </tr> </table> </body> </html> |
