HTML sayfalarında tablolarda bazı hücreleri birleştirmek gerekebilir. Eğer aynı satırdaki hücreleri birleştirmek istiyorsak Colspan, aynı sütundaki hücreleri birleştirmek istiyorsak Rowspan kullanmamız gerekir.
Bu yazıda Html’ de tablo içinde colspan ve rowspan kullanımını gösteren örnekleri göreceksiniz.
Ö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 23 24 |
<!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:
HTML Kodları:
|
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 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:
Html Kodları:
|
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 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 64 65 |
<!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:
Html Kodları:
|
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 |
<!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:
Html Kodları:
|
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 |
<!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:
Html Kodları:
|
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 |
<!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:
Html Kodları:
|
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 |
<!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> |