HTML değerlerini birkaç satırı kapsayan bir başlıkla ilişkilendirmek için bir satır grubu tanımlayın ve scope="rowgroup" kullanın. Daha karmaşık ilişkiler için başlıklara benzersiz kimlikler verin ve bunları her veri hücresinin headers özelliğinde listeleyin. Bu kılavuzda Mac’te TextEdit kullanarak yerel bir örnek oluşturuluyor.

Amaç, bir etiket birden fazla satırı kapsadığında değerlerin bağlamını koruduğu tek bir HTML tablosu oluşturmaktır. W3C, gruplandırılmış başlıkları düzensiz tablolar öğreticisinde, açık ilişkilendirmeleri ise çok düzeyli başlıklar öğreticisinde belgeliyor.

Tablonuzun hangi ilişkilendirmeye ihtiyacı var?

Bir değeri anlamak için gereken etiketleri yazarak başlayın. Aşağıdaki yapay örnekte 40 değeri, Alpha kümesindeki büyük varyantın milimetre cinsinden genişliğini ifade eder. Dolayısıyla tam bağlamı Alpha, Büyük ve Genişlik’tir. Tüm boyutlar açıklama amaçlı örnek verilerdir.

Düzenleme yapmadan önce bu karar yardımcısını kullanın:

Tablo yapısı Kullanılacak ilişkilendirme Yapısal gereksinim
Bir başlık sıradan bir satırı etiketler scope="row" Başlığı o satırdaki bir th hücresine yerleştirin
Bir başlık sıradan bir sütunu etiketler scope="col" Başlığı o sütundaki bir th hücresine yerleştirin
Bir başlık gövde satırlarının tamamını etiketler scope="rowgroup" Bu satırları kendi tbody öğelerinin içine alın
Bir değer için birden çok başlık gerekir veya ilişkiler tablo içinde değişir Benzersiz başlık kimlikleri ve bir headers listesi Uygun her başlığı açıkça belirtin

Scope değerleri ilişkiyi tanımlar; rowspan ise hücrenin kaç satır kapladığını belirtir. Uzun bir başlık için de uygun ilişkilendirme gerekir. MDN bu iki özelliği tablo başlığı öğesi başvurusunda ayrı ayrı belgeliyor.

Düzenli bir grup için W3C’nin örüntüsü, birden fazla satırı kapsayan başlığı ayrı bir tbody ve scope="rowgroup" ile birleştirir. Bir tabloda birden fazla gövde grubu bulunabilir. Başlık satırlarını thead içinde tutun; altbilgideki satırları kapsayan bir başlık tfoot içinde yer alır. W3C: Düzensiz başlıklara sahip tablolar.

Karmaşık tablolarda açık ilişkilendirmeler, bir değerin tam anlamını doğrudan belirtmenizi sağlar. W3C, değişen sütun başlıkları ve üç veya daha fazla başlıkla ilişkili hücreler içeren örüntüler için bu yaklaşımı öneriyor. Tam örnekte, her sayısal değerin üç başlığını belirtmek için yapısal scope özelliklerinin yanı sıra açık listeler de kullanılıyor. W3C: Çok düzeyli başlıklara sahip tablolar.

HTML belgesini TextEdit’te oluşturma

Bu alıştırma için yeni bir yerel dosya kullanın. Mevcut bir belgeyi uyarlıyorsanız, önce ayrı bir kopyasını saklayın; böylece özgün değerleri ve sıralamayı yaptığınız düzenlemelerle karşılaştırabilirsiniz.

  1. TextEdit’i açın ve File > New seçeneğini belirleyin.
  2. Format > Make Plain Text seçeneğini belirleyin.
  3. Markdown kod çiti işaretlerini hariç tutarak aşağıdaki belgenin tamamını yapıştırın.
  4. File > Save seçeneğini belirleyin ve dosyaya table-headers.html adını verin.
  5. Uzantı hakkında bir uyarı çıkarsa Use .html seçeneğini belirleyin.

Bunlar Apple’ın TextEdit’te HTML dosyası oluşturma için belgelediği adımlardır. Örnek için paket, betik veya harici varlık gerekmez.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample tile dimensions</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #777; padding: 0.5rem; }
    caption { text-align: left; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Sample tile dimensions</h1>
  <table>
    <caption>Illustrative tile dimensions in millimetres</caption>
    <thead>
      <tr>
        <th scope="col">Set</th>
        <th scope="col">Variant</th>
        <th id="tiles-width" scope="col">Width</th>
        <th id="tiles-height" scope="col">Height</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="tiles-alpha" rowspan="2" scope="rowgroup">Alpha</th>
        <th id="tiles-alpha-small" scope="row">Small</th>
        <td headers="tiles-alpha tiles-alpha-small tiles-width">20</td>
        <td headers="tiles-alpha tiles-alpha-small tiles-height">30</td>
      </tr>
      <tr>
        <th id="tiles-alpha-large" scope="row">Large</th>
        <td headers="tiles-alpha tiles-alpha-large tiles-width">40</td>
        <td headers="tiles-alpha tiles-alpha-large tiles-height">60</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th id="tiles-beta" rowspan="2" scope="rowgroup">Beta</th>
        <th id="tiles-beta-small" scope="row">Small</th>
        <td headers="tiles-beta tiles-beta-small tiles-width">25</td>
        <td headers="tiles-beta tiles-beta-small tiles-height">35</td>
      </tr>
      <tr>
        <th id="tiles-beta-large" scope="row">Large</th>
        <td headers="tiles-beta tiles-beta-large tiles-width">45</td>
        <td headers="tiles-beta tiles-beta-large tiles-height">65</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Sonucu önizlemek için kaydettiğiniz dosyayı Safari’de açın. Alpha ve Beta’nın her biri gövde satırlarından ikisini kaplayacak şekilde dört sütun görmelisiniz. Aşağıdaki kaynak denetimleri için dosyayı TextEdit’te açık tutun.

Belgeyi TextEdit’te yeniden açarken File > Open seçeneğini kullanın, dosyayı seçin, Show Options düğmesine tıklayın ve Ignore rich text commands seçeneğini işaretleyin. Alternatif olarak TextEdit > Settings içindeki Open and Save bölümünde Display HTML files as HTML code instead of formatted text seçeneğini etkinleştirin. Apple bu seçenekleri HTML düzenleme talimatlarında belgeliyor.

Örnek, her değeri başlıklarıyla nasıl ilişkilendiriyor?

40 değeri için kaynak kodu küçük bir ilişkilendirme haritası olarak okuyun. headers listesinde tiles-alpha, tiles-alpha-large ve tiles-width bulunur. Bu kimlikler sırasıyla Alpha, Büyük ve Genişlik’i belirtir. Buna karşılık gelen yükseklik değeri 60, ilk iki kimliği korur ve üçüncünün yerine tiles-height kullanır.

Kimlikler, yazar tarafından seçilen tanımlayıcılardır; özel HTML anahtar sözcükleri değildir. Listelenen her belirteç aynı tablodaki bir th öğesini belirtmelidir. Belirteçleri boşluklarla ayırın ve tek bir listede aynı belirteci yinelemeyin. Bu gereksinimler HTML Standardı’nın ortak tablo hücresi özelliklerinde yer alır.

Liste, okuyucunun başka bir başlık üzerinden bağlamı yeniden kurmasını beklemek yerine tam bağlamı açıkça belirtir. W3C’nin H43 tekniği, ilgili başlık kimliklerinin her veri hücresinin headers özelliğine yazılmasını açıklar.

İkinci Alpha satırının Büyük ile başladığına dikkat edin. Alpha için fazladan bir hücre içermez: ilk satırdaki rowspan="2" zaten bu konumu kaplar. Oraya boş bir hücre eklemek tablo ızgarasını değiştirir. MDN, hücrelerin başlık hücresi kullanım notlarında, birden fazla satırı kapsayan hücrelerin boş bıraktığı kullanılabilir konumlara yerleştiğini açıklar.

Birbirine yüzeysel olarak benzeyen iki düzeni ayırt etmek için aynı mantığı kullanın. Sol tarafta birkaç gövde satırını kapsayan bir etiket, satır grubu başlığı olabilir. Üstte iki satırı kapsayan bir sütun etiketi, fiziksel yüksekliği ilişkiyi satır grubu ilişkisine dönüştürmeden scope="col" ile sütun başlığı olarak kalabilir. MDN: Başlık özellikleri.

Tabloyu değiştirmeden önce ilişkilendirmeleri denetleme

Bu örnek için üç etiketli bir denetim yapın. Bir değer seçin, bunun hangi kümeye, varyanta ve boyuta ait olduğunu belirleyin, ardından bu etiketleri başvurulan kimliklerle karşılaştırın.

Değer Amaçlanan bağlam Beklenen headers değeri
20 Alpha, Küçük, Genişlik tiles-alpha tiles-alpha-small tiles-width
60 Alpha, Büyük, Yükseklik tiles-alpha tiles-alpha-large tiles-height
25 Beta, Küçük, Genişlik tiles-beta tiles-beta-small tiles-width
65 Beta, Büyük, Yükseklik tiles-beta tiles-beta-large tiles-height

Bu denetimi her sayısal hücre için tekrarlayın. Başvurulan her kimliğin bulunduğunu, her başvurunun amaçlanan başlığı belirttiğini ve belgede yinelenen kimlik olmadığını doğrulayın. Bu denetimler W3C’nin H43 tekniğindeki prosedürü izler. Görsel olarak düzenli bir tablo, denetimin yalnızca bir parçasıdır; kaynak kodundaki ilişkilendirmeleri de inceleyin.

Üçüncü bir Alpha varyantı eklerken satırını Alpha’nın mevcut tbody öğesine ekleyin, Alpha’nın span değerini rowspan="3" olarak değiştirin, yeni varyanta benzersiz bir kimlik verin ve her yeni sayısal hücreye uygun üç başlıklı listeyi ekleyin. Bu değişikliği yaparken özgün satır sırasını ve değerleri koruyun.

Bir varyantı kaldırırken span değerini buna göre azaltın. Bir grubun ilk satırını kaldırıyorsanız grup başlığını kalan ilk satıra taşıyın. Kapsanan hücreyi tek bir satır grubunun içinde tutun: HTML tablo modeli, bir hücrenin birden fazla satır grubuna yayılmasına izin vermez. WHATWG: Tablo modeli.

Satırlar daha sonra bir uygulama tarafından oluşturulur veya yeniden sıralanırsa şu koşulları güncelleme gereksinimleri olarak ele alın: her grubu bir arada tutun, kapsanan başlığı grubun ilk satırına yerleştirin, span sayısını koruyun ve değişen başvuruları güncelleyin. Bu örnekte Alpha içindeki Büyük’ü Küçük’ün önüne taşımak, Alpha başlığını da artık ilk sırada olan satıra taşımayı gerektirir.

Düzenleyici bu özellikleri koruyamıyorsa ne yapmalı?

Bir düzenleyicinin hücreleri birleştirebilmesi, burada kullanılan ilişkilendirmeleri koruduğunu göstermez. Düzenlenmiş veya dışa aktarılmış bir belgeye güvenmeden önce HTML kodunu inceleyerek amaçlanan grup sınırlarının, scope değerlerinin, kimliklerin ve başlık listelerinin bulunduğunu doğrulayın. Bu öğreticinin desteklenen Mac iş akışı, TextEdit’te doğrudan kaynak kodunu düzenlemektir.

Yazma aracınız gerekli yapıyı koruyamıyorsa her küme için Varyant, Genişlik ve Yükseklik sütunlarından oluşan ayrı ve daha basit bir tablo kullanmayı değerlendirin. W3C, karmaşık tabloları daha küçük tablolara bölmeyi hem okumayı hem de yazmayı kolaylaştırabilecek bir seçenek olarak sunuyor. Bu seçeneği yalnızca özgün yapıyı değiştirmek kabul edilebilirse kullanın. W3C: Çok düzeyli tabloları bölme.

Tamamlanan örnekte herhangi bir sayıyı seçin ve ona başvurulan üç etiketin ölçtüğü şeyi tam olarak tanımladığını doğrulayın. Ardından her satır ekleme, silme veya yeniden sıralama işleminde aynı denetimi uygulayın. Bu yöntem, tablonun görünümünün yanı sıra anlamını da korumanızı sağlar.

Kaynaklar