Bu yazıda HTML ile oluşturulan tabloarın hücrelerini nasıl birleştireceğinizi göstereceğim.
HTML ile hücre birleştirme iki şekilde olmaktadır. Hücreler yatay (satır ) olarak birleştirile bileceği gibi dikey (sütun) olarak da birleştirilebilir. Ayrı ayrı bu kavramları örnekler ile inceleyeceğiz.
HTML Tablo Oluşturma
İlk olarak HTML tablo nasıl oluşturuluyor biraz inceleyelim. Bir HTML tablosu en az 3 etiketin bir araya gelmesiyle oluşturulur. Bu etiketler şunlardır;
- <table>: tablonun genel çerçevesini belirtir.
- <tr> : tablodaki satırları belirtir.
- <td> : tablodaki hücreleri belirtir.
Örnek: Bunu basit bir örnekle açıklayalım. 2 sütun 3 satırlı bir tablomuz olduğunu düşünelim. Yazmamız gereken HTML kodu şu şekilde olacaktır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table border="1"> <tr> <td>1.Satır 1.Hücre</td> <td>1.Satır 2.Hücre</td> <td>1.Satır 3.Hücre</td> </tr> <tr> <td>2.Satır 1.Hücre</td> <td>2.Satır 2.Hücre</td> <td>2.Satır 3.Hücre</td> </tr> </table> |
Çıktı:
HTML Hücre Birleştirme (Sütun Birleştirme)
Sütun birleştirmek için colspan niteliği kullanılmaktadır. Uzatılacak hücre sayısı yazılır ve ardındaki hücreler belirtilen sayı kadar uzatılır.
Örnek: İlk olarak yatay bir alandaki hücreleri yan yana nasıl birleştireceğimizi görelim. Sütun birleştirme kavramı için yukarıdaki 1.satırdaki 2. ve 3. hücreleri birleştirmeyi planladığımızı düşünelim. Yani ilk satırda 2 tane hücremiz olacak. Bu işlemi yapan kod şu şekilde olacaktır.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <table border="1"> <tr> <td>1.Satır 1.Hücre</td> <td colspan="2">1.Satır 2.Hücre ve 3.Hücre</td> </tr> <tr> <td>2.Satır 1.Hücre</td> <td>2.Satır 2.Hücre</td> <td>2.Satır 3.Hücre</td> </tr> </table> |
Çıktı:
HTML Hücre Birleştirme (Satır Birleştirme)
HTML hücrelerinin satırlarını birleştirmek için rowspan kullanılır. Altındaki hücreleri belirtilen hücre kadar aşağı kaydırır.rowspan eklendikten sonraki alt satırlarda bulunan hücreler belirtilen sayı kadar silinir.
Örnek: Yine yukarıdaki örnekte 1. ve 2. satırdaki 2.hücreleri birleştirelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <table border="1"> <tr> <td>1.Satır 1.Hücre</td> <td rowspan="2">1.Satır ve 2.Satır 2.Hücre</td> <td>1.Satır 3.Hücre</td> </tr> <tr> <td>2.Satır 1.Hücre</td> <td>2.Satır 3.Hücre</td> </tr> </table> |
Çıktı:
HTML Tablo Hücre Birleştirme Örnekeleri
Örnek 1:
Kod:
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 2:
Kod:
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 3:

Kod:
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 | <body> <h1>TABLO ÖRNEKLERİ</h1> <table border="2" width="400" align="center"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td rowspan="2" colspan="2">TASARIM KODLAMA</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> |
Ben html ile ilgili özel bir soru sormak istiyorum. Cevaplarsanız çok sevinirim, ben html bir site yaptım ancak arama motorlarında sadece ilgili sayfanın kendisi açılıyor, sitenin hepsi açılmıyor, sayfalar, frameler birbirinden ayrı şekilde arama motorlarında çıkıyor, ben bunları nasıl birleştirebilirim, yani ilgili bir sayfa tıklandığında bütün sitenin görüntüsünün çıkması için ne yapabilirim.. tşkler.
Bunun nedeni, Google’ın bir “X-Frame-Options: SAMEORIGIN” yanıt başlığı göndermesidir. Bu seçenek, tarayıcının üst sayfayla aynı etki alanında barındırılmayan iFrame’leri görüntülemesini engeller.
Mozilla’daki bu kaynak yardımcı olacaktır.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
çok teşekkürler