İç içe geçen birleştirmeler içeren bir HTML tablosu planlamak için önce tablonun tam ızgarasını çizin, birleştirilmiş her hücreye bir dikdörtgen atayın ve hücreleri yalnızca bu dikdörtgenlerin başladığı yerde yazın. Bu kılavuz, TextEdit’te oluşturup Mac’inizde önizleyebileceğiniz örnek bir senaryoyu adım adım ele alıyor.

Hücreleri yazmadan önce ızgarayı tanımlayın

Görev; gruplandırılmış sütun başlıkları, hem satırları hem sütunları kaplayan bir hücre ve farklı sayıda satırı kaplayan başka bir hücre içeren beş sütunlu tek bir tablo oluşturmaktır. Aşağıdaki etiketler ve içerikler açıklama amaçlıdır: yuvaya göre düzenlenmiş nötr düğüm bloklarını temsil ederler.

HTML tabloları çok boyutlu verileri temsil eder. Hücreleri, tablonun ızgarasını çakışma olmadan kaplamalıdır. Amacınız yalnızca birbiriyle ilgisiz kutuları sayfada düzenlemekse HTML standardı, yazarları bunun yerine CSS Grid gibi yerleşim araçlarını kullanmaya yönlendirir. Burada her bloğun satır ve sütun başlıklarıyla anlamlı bir ilişkisi olduğundan tablo bu göreve uygundur. HTML Standard: The table element.

Tablonun herhangi bir yerinde bulunan en küçük sütunları adlandırarak başlayın. Bu örnekte sütunlar Yuvalama, Düğüm A, Düğüm B, Düğüm C ve Not’tur. Düğümler başlığı bu sütunlardan üçünü kapsayacak; ek bir sütun oluşturmayacaktır.

İki span özniteliği de hücrenin başlangıç konumu dâhil tüm kapladığı alanı sayar. Dolayısıyla colspan="2" iki sütunu, rowspan="2" ise iki satırı kapsar. İkisini birlikte kullanmak ikiye iki boyutunda bir dikdörtgen oluşturur. Span belirtilmezse varsayılan değer birdir. MDN: The Table Data Cell element.

“İç içe geçen” ifadesi, bu dikdörtgenlerin nasıl bir araya geldiğini anlatır. Her hücrenin kapladığı alan yine dikdörtgendir; tek bir hücre başka bir hücrenin çevresinden dolaşamaz. Kareli kâğıda etiketli dikdörtgenler yerleştirdiğinizi düşünün.

Her satır için bir yuva çizelgesi oluşturun

Birleştirilmiş tek bir hücrenin kapladığı alanı, yinelenen etiketlerle gösteren genişletilmiş bir planlama tablosu kullanın. Bu çizelgedeki tekrarlar, hücreyi HTML’de tekrarlamanız gerektiği anlamına gelmez. Başlık bölümü iki, gövde bölümü ise dört satırdan oluşacaktır.

Planlanan satır Sütun 1 Sütun 2 Sütun 3 Sütun 4 Sütun 5
Başlık 1 Yuvalama Düğümler Düğümler Düğümler Not
Başlık 2 Yuvalama Düğüm A Düğüm B Düğüm C Not
Gövde 1 Yuva 1 Blok P Blok P Blok Q Not X
Gövde 2 Yuva 2 Blok P Blok P Blok R Not X
Gövde 3 Yuva 3 Blok S Blok T Blok T Not X
Gövde 4 Yuva 4 Blok U Blok U Blok U Not Y

Şimdi birleştirilmiş her dikdörtgenin başlangıç konumunu ve boyutlarını kaydedin. Buradaki koordinatlar birden başlar ve her bölümde yeniden başlatılır.

Hücre Başlangıç konumu Kaplanan satır sayısı Kaplanan sütun sayısı
Yuvalama başlığı Başlık satırı 1, sütun 1 2 1
Düğümler başlığı Başlık satırı 1, sütun 2 1 3
Not başlığı Başlık satırı 1, sütun 5 2 1
Blok P Gövde satırı 1, sütun 2 2 2
Not X Gövde satırı 1, sütun 5 3 1
Blok T Gövde satırı 3, sütun 3 1 2
Blok U Gövde satırı 4, sütun 2 1 3

Bu çizelge, gövdenin ikinci satırını planlamayı kolaylaştırır: Blok P zaten 2. ve 3. sütunları, Not X ise 5. sütunu kaplar. Bu satırda yalnızca Yuva 2 ve Blok R başladığı için iki hücre öğesi yeterlidir.

Her satır için şu adımları izleyin:

  1. Önceki satırlarda başlayan birleştirmelerin kapladığı konumları işaretleyin.
  2. İlk boş sütunu bulun.
  3. Sonraki hücreyi yerleştirin ve gelecekteki satırlar dâhil tüm dikdörtgenini işaretleyin.
  4. Dikdörtgenin herhangi bir kısmı dolu bir konumla çakışıyorsa onu kullanmayın.
  5. Beş sütun konumunun tümü hesaba katılana kadar devam edin.

Bu yöntem, standardın tablo modelinden türetilmiş bir planlama aracıdır. Tarayıcılar hücreleri yerleştirirken dolu başlangıç yuvalarını atlar; ancak yazarlar yine de dikdörtgenlerin çakışmasını önlemelidir. Bu nedenle bir satırdaki hücre öğelerini saymak tek başına yeterli değildir. HTML Standard: Processing model.

Satırları denetlemek için şu kuralı kullanabilirsiniz: önceden kaplanan sütunlar + yeni başlayan hücrelerin kapladığı sütunlar = beş. Gövde satırı 2’de önceden kaplanan üç, yeni başlayan iki konum vardır. Gövde satırı 3’te önceden kaplanan bir, yeni başlayan dört konum vardır. Yalnızca toplama değil, konumların kendisini de kontrol edin: Bir boşluğa eşlik eden bir çakışmayı yalnızca toplamları karşılaştırarak fark edemezsiniz.

Satır gruplarını ve başlık ilişkilerini planlayın

Her iki başlık satırını tek bir thead içinde, dört gövde satırının tümünü de tek bir tbody içinde tutun. Bir hücre ayrı satır gruplarını aşamaz. Örneğin Blok P bir tbody içinde başlayıp başka birinde sona eremez. Standart ayrıca tablo alt öğelerinin sırasını belirtir: isteğe bağlı bir caption, sütun grupları, isteğe bağlı bir thead, gövde satırları ve isteğe bağlı bir tfoot. HTML Standard: Tables.

Örnek, üç sütun grubu tanımlar: Yuvalama için bir sütun, Düğümler için üç sütun ve Not için bir sütun. Düğümler başlığı scope="colgroup" kullanır; alt başlıkları ise scope="col" kullanır. W3C’nin düzensiz başlıklarla ilgili kılavuzu, gruplandırılmış başlıkların açık sütun grubu yapısıyla birlikte kullanılmasını önerir. Tables with Irregular Headers.

Geometriyle anlam için ayrı kararlar gerekir. Blok P iki yuva satırını ve iki düğüm sütununu kapladığından, ilişkili olması amaçlanan başlıklar Yuva 1, Yuva 2, Düğümler, Düğüm A ve Düğüm B’dir. Not X ise üç yuva satırına ve Not sütununa aittir.

Bu birleştirilmiş veri hücrelerinde örnek, başlık hücrelerindeki id değerlerini ve her veri hücresinin headers özniteliğinde boşlukla ayrılmış başvuruları kullanarak ilişkileri açıkça belirtir. W3C, başlık ilişkilerinin açıkça tanımlanması gereken karmaşık tablolar için bu yaklaşımı belgelendirir. Tables with Multi-Level Headers.

Metinleri aynı diye birbirinden bağımsız değerleri birleştirmeyin. Bu örnek belgede Blok P, dört konuma yayılan tek bir bloğu bilinçli olarak temsil eder. Bunun yerine her konum ayrı bir gözlem içeriyorsa, bu ayrımı korumak için hücreleri ayrı tutun.

Mac’inizde tam HTML dosyasını oluşturun

TextEdit ile yerel HTML belgesini oluşturabilirsiniz. File > New seçeneğini, ardından Format > Make Plain Text seçeneğini belirleyin. Aşağıdaki belgenin tamamını yapıştırın, File > Save seçeneğini belirleyin ve dosyaya span-plan.html adını verin. Uzantıyla ilgili bir istem çıkarsa Use .html seçeneğini belirleyin. Bunlar, Apple’ın belgelediği HTML oluşturma adımlarıdır. Work with HTML documents in TextEdit on Mac.

Bu, örnek içeriği ve stilleri dâhil, bağımsız ve eksiksiz bir belgedir. Komut dosyası veya harici dosya gerektirmez.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interlocking span plan</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
table { border-collapse: collapse; }
caption { text-align: left; font-weight: bold; margin-bottom: 1rem; }
th, td { border: 1px solid #555; padding: 0.75rem; text-align: left; }
thead { background: #eee; }
</style>
</head>
<body>
<table>
  <caption>Synthetic node blocks by slot</caption>
  <colgroup span="1"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="1"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col" id="slot">Slot</th>
      <th colspan="3" scope="colgroup" id="nodes">Nodes</th>
      <th rowspan="2" scope="col" id="note">Note</th>
    </tr>
    <tr>
      <th scope="col" id="a">Node A</th>
      <th scope="col" id="b">Node B</th>
      <th scope="col" id="c">Node C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="s1">Slot 1</th>
      <td rowspan="2" colspan="2" headers="s1 s2 nodes a b">Block P</td>
      <td headers="s1 nodes c">Block Q</td>
      <td rowspan="3" headers="s1 s2 s3 note">Note X</td>
    </tr>
    <tr>
      <th scope="row" id="s2">Slot 2</th>
      <td headers="s2 nodes c">Block R</td>
    </tr>
    <tr>
      <th scope="row" id="s3">Slot 3</th>
      <td headers="s3 nodes a">Block S</td>
      <td colspan="2" headers="s3 nodes b c">Block T</td>
    </tr>
    <tr>
      <th scope="row" id="s4">Slot 4</th>
      <td colspan="3" headers="s4 nodes a b c">Block U</td>
      <td headers="s4 note">Note Y</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Kaydettiğiniz dosyayı Mac’inizde bir tarayıcıda açın. Sonucu çizelgeyle karşılaştırın: Blok P, Düğüm A ve Düğüm B altında Yuva 1 ve 2 boyunca uzanmalı; Not X, Yuva 1–3 boyunca uzanmalı; Blok T ise yalnızca Yuva 3’te Düğüm B ve C’yi kapsamalıdır. Bu üç denetim, amaçlanan iç içe geçen düzeni yalnızca dikdörtgen dış çizgisi olan bir tablodan ayırır.

Dosyayı yeniden açtığınızda TextEdit biçimlendirilmiş içerik gösteriyorsa File > Open seçeneğini belirleyin, dosyayı seçin, Show Options düğmesini tıklayın ve Ignore rich text commands seçeneğini işaretleyin. Daha sonraki düzenlemeler için Apple, TextEdit > Settings > Open and Save bölümünde Display HTML files as HTML code instead of formatted text seçeneğini etkinleştirme adımlarını da belgelendirir. Apple’s TextEdit HTML guide.

Yapıyı kaybetmeden hataları belirleyin ve planı güncelleyin

Sonuç planınızdan farklıysa, ilk hatalı satırı ve o satıra taşınan dikdörtgenleri inceleyin. Aralık veya stili değiştirmeden önce aşağıdaki denetimleri yapın.

Belirti İncelenecek nokta Bu örnek için düzeltme
Beklenmedik bir ek sütun Önceki birleştirmenin zaten kapladığı yere eklenen hücreler Gövde satırı 2 yalnızca Yuva 2 ve Blok R’yi içerir; oradaki tüm dolgu hücrelerini kaldırın
Blok R yanlış düğümün altında görünüyor Blok P’nin genişliği ve yüksekliği Blok P’nin hem rowspan="2" hem de colspan="2" içerdiğini doğrulayın
Not X, Yuva 2’den sonra bitiyor Satır sayısı Aralığını üç satıra ayarlayın
Başlık katmanları hizalanmıyor İlk başlık satırı ve ikinci satırdaki hücre sayısı Yuvalama ve Not iki satırı kapsar; ikinci başlık satırında yalnızca üç düğüm başlığı bulunur
Birleştirilmiş hücrede eksik başlıklar var headers başvuruları Kaplanan tüm satır ve sütunları çizelgeyle karşılaştırın

Bir konum gerçekten boş bir değeri temsil ediyorsa boş hücre kullanmak uygundur. Birleştirilmiş bir hücre o konumu zaten kaplıyorsa boş hücre gerekmez. MDN’nin hücre belgeleri, sıradan hücrelerin kullanılabilir konumlara yerleştiğini ve birleştirmelerin çakışmaması gerektiğini açıklar. MDN: The Table Data Cell element.

Bu sabit örnek için satır sayısını pozitif bir değer olarak açıkça belirtin. Özel rowspan="0" değeri, geçerli satır grubunda kalan satırları ifade eder; dolayısıyla satır eklemek bu hücrenin kapladığı alanı genişletebilir. Bu değeri yalnızca “bu grubun sonuna kadar” ifadesi amaçlanan ilişkiyi anlatıyorsa kullanın. MDN: Row span behavior.

Bir satır eklemeden, silmeden veya yeniden sıralamadan önce çizelgeyi güncelleyin. Yuva 1 ile 2 arasına yeni bir satır eklenirse ve Blok P’nin bu satırı da kapsaması gerekiyorsa Blok P’nin aralığını artırın ve yeni satır başlığını headers listesine ekleyin. Not X’i ayrıca değerlendirin: aynı ekleme, onun amaçlanan kapsamını da değiştirebilir. Satır aralığı belge konumunu izlediğinden satırları yeniden sıralarken de aynı incelemeyi yapın.

İçerik artık anlaşılır dikdörtgenler oluşturmuyorsa sunumunu basitleştirin. W3C, birden fazla başlık düzeyi tek bir tabloyu anlamayı zorlaştırdığında daha küçük tabloları değerlendirmeyi önerir. Tables with Multi-Level Headers.

Belgeyi gözden geçirirken yuva çizelgesini kaynak dosyanın yanında tutun. Her değişiklikte amaçlanan dikdörtgenleri belirleyin, hücreleri yalnızca başlangıç konumlarında yazın ve ilişkili başlıkları denetleyin. Böylece hem tablonun şeklini hem de içeriğinin ifade ettiği ilişkileri korumak için tekrarlanabilir bir yönteminiz olur.

Kaynaklar