لربط قيم HTML برأس يمتد على عدة صفوف، عرّف مجموعة صفوف واستخدم scope="rowgroup". للعلاقات الأكثر تعقيدًا، امنح الرؤوس معرّفات فريدة وأدرجها في سمة headers لكل خلية بيانات. يشرح هذا الدليل إنشاء مثال محلي في TextEdit على Mac.

المطلوب إنشاء جدول HTML واحد تحتفظ قيمه بسياقها عندما يمتد أحد العناوين على عدة صفوف. توثّق W3C الرؤوس المجمّعة في دليلها للجداول غير المنتظمة، والروابط الصريحة في دليلها للرؤوس متعددة المستويات.

ما نوع الربط الذي يحتاج إليه جدولك؟

ابدأ بتدوين العناوين اللازمة لفهم قيمة واحدة. في المثال الاصطناعي أدناه، تعني القيمة 40 عرض النسخة الكبيرة في المجموعة Alpha، بوحدة المليمتر. لذلك فإن سياقها الكامل هو Alpha وLarge وWidth. جميع الأبعاد بيانات نموذجية توضيحية.

استخدم أداة اتخاذ القرار هذه قبل التحرير:

بنية الجدول الربط المطلوب المتطلب البنيوي
عنوان يصف صفًا عاديًا واحدًا scope="row" ضع العنوان في خلية th في ذلك الصف
عنوان يصف عمودًا عاديًا واحدًا scope="col" ضع العنوان في خلية th في ذلك العمود
عنوان يصف مجموعة كاملة من صفوف المتن scope="rowgroup" أدرج تلك الصفوف في عنصر tbody خاص بها
قيمة تحتاج إلى عدة عناوين، أو تتغير العلاقات داخل الجدول معرّفات رؤوس فريدة وقائمة headers حدّد كل عنوان منطبق صراحةً

تصف قيم scope العلاقة؛ أما rowspan فيصف عدد الصفوف التي تشغلها الخلية. يظل الرأس الطويل بحاجة إلى الربط المناسب. توثّق MDN السمتين كلًّا على حدة في مرجع عنصر رأس الجدول.

بالنسبة إلى مجموعة منتظمة، يجمع نمط W3C بين رأس ممتد وعنصري tbody وscope="rowgroup" منفصلين. يمكن أن يحتوي الجدول على عدة مجموعات للمتن. أبقِ صفوف الرؤوس في thead؛ وينتمي الرأس الممتد عبر الصفوف في التذييل إلى tfoot. W3C: الجداول ذات الرؤوس غير المنتظمة.

في الجداول المعقدة، تتيح لك الروابط الصريحة ذكر المعنى الكامل للقيمة مباشرةً. توصي W3C بهذا الأسلوب لأنماط تشمل تغيّر رؤوس الأعمدة والخلايا المرتبطة بثلاثة رؤوس أو أكثر. يستخدم المثال الكامل قوائم صريحة إلى جانب سمات النطاق البنيوية، بحيث تحدد كل قيمة رقمية رؤوسها الثلاثة. W3C: الجداول ذات الرؤوس متعددة المستويات.

إنشاء مستند HTML في TextEdit

استخدم ملفًا محليًا جديدًا لهذا التمرين. إذا كنت تعدّل مستندًا موجودًا، فاحتفظ أولًا بنسخة منفصلة حتى تتمكن من مقارنة قيمه الأصلية وترتيبها بتعديلاتك.

  1. افتح TextEdit واختر File > New.
  2. اختر Format > Make Plain Text.
  3. الصق المستند الكامل أدناه، مع استثناء علامات سياج Markdown.
  4. اختر File > Save وسمّه table-headers.html.
  5. إذا ظهرت مطالبة بشأن الامتداد، فاختر Use .html.

هذه هي الخطوات التي توثّقها Apple لـإنشاء ملف HTML في TextEdit. لا يحتاج المثال إلى حزم أو نصوص برمجية أو أصول خارجية.

<!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>

لمعاينة النتيجة، افتح الملف المحفوظ في Safari. ينبغي أن ترى أربعة أعمدة، وتشغل كل من Alpha وBeta صفّين من المتن. أبقِ الملف متاحًا في TextEdit لإجراء فحوص المصدر أدناه.

عند إعادة فتح المستند في TextEdit، استخدم File > Open، وحدد الملف، وانقر على Show Options، ثم حدد Ignore rich text commands. أو فعّل الخيار Display HTML files as HTML code instead of formatted text ضمن TextEdit > Settings، ثم Open and Save. توثّق Apple هذه الخيارات في تعليماتها لتحرير HTML.

كيف يربط المثال كل قيمة برؤوسها؟

اقرأ المصدر الخاص بالقيمة 40 على شكل خريطة ربط صغيرة. تحتوي قائمتها headers على tiles-alpha وtiles-alpha-large وtiles-width. تحدد هذه المعرّفات Alpha وLarge وWidth على التوالي. أما قيمة الارتفاع المقابلة، 60، فتحتفظ بأول معرّفين وتستبدل الثالث بـtiles-height.

المعرّفات اختيارات يحددها المؤلف، وليست كلمات أساسية خاصة بـHTML. يجب أن يحدد كل رمز في القائمة عنصر th في الجدول نفسه. افصل بين الرموز بمسافات، ولا تكرر أي رمز ضمن القائمة الواحدة. هذه المتطلبات واردة في السمات المشتركة لخلايا الجدول في معيار HTML.

توضح القائمة السياق الكامل بدلًا من توقّع أن يعيد القارئ بناءه بالاستناد إلى عنوان آخر. وتشرح تقنية H43 التابعة لـW3C وضع معرّفات الرؤوس المنطبقة في سمة headers لكل خلية بيانات.

لاحظ أن صف Alpha الثاني يبدأ بـLarge. ولا يحتوي على خلية إضافية لـAlpha، لأن rowspan="2" في الصف الأول يشغل ذلك الموضع بالفعل. إن إضافة خلية فارغة هناك ستغيّر شبكة الجدول. تشرح MDN أن الخلايا توضع في المواضع المتاحة التي تتركها الخلايا الممتدة، وذلك في ملاحظات استخدام خلايا الرؤوس.

استخدم المنطق نفسه للتمييز بين تخطيطين متشابهين ظاهريًا. يمكن أن يكون العنوان الجانبي الأيسر الممتد عبر عدة صفوف من المتن رأسًا لمجموعة صفوف. أما عنوان العمود الممتد على صفّين في الأعلى، فيمكن أن يظل رأسًا لعمود باستخدام scope="col"؛ فارتفاعه الفعلي لا يحوّل علاقته إلى علاقة بمجموعة صفوف. MDN: سمات الرؤوس.

تحقّق من الروابط قبل تغيير الجدول

استخدم تدقيقًا بثلاثة عناوين لهذا المثال. اختر قيمة، وحدد المجموعة والنسخة والبُعد المقصودين، ثم قارن تلك العناوين بالمعرّفات المشار إليها.

القيمة السياق المقصود قيمة headers المتوقعة
20 Alpha، Small، Width tiles-alpha tiles-alpha-small tiles-width
60 Alpha، Large، Height tiles-alpha tiles-alpha-large tiles-height
25 Beta، Small، Width tiles-beta tiles-beta-small tiles-width
65 Beta، Large، Height tiles-beta tiles-beta-large tiles-height

كرّر هذا الفحص لكل خلية رقمية. تأكد من وجود كل معرّف مشار إليه، ومن أن كل إحالة تشير إلى العنوان المقصود، ومن عدم تكرار أي معرّف في موضع آخر من المستند. تتبع هذه الفحوص الإجراء الوارد في تقنية H43 لدى W3C. لا يمثّل مظهر الجدول المرتب سوى جزء من الفحص؛ تحقّق أيضًا من روابط المصدر.

عند إضافة نسخة ثالثة إلى Alpha، أدرج صفها داخل tbody الحالية لـAlpha، وغيّر قيمة امتداد Alpha إلى rowspan="3"، وامنح النسخة الجديدة معرّفًا فريدًا، وأضف قائمة الرؤوس الثلاثة المناسبة إلى كل خلية رقمية جديدة. حافظ على ترتيب الصفوف والقيم الأصلية أثناء إجراء ذلك التغيير.

عند حذف نسخة، قلّل قيمة الامتداد بما يناسب. وإذا حذفت الصف الأول من مجموعة، فانقل رأس المجموعة إلى أول صف متبقٍ. أبقِ الخلية الممتدة داخل مجموعة صفوف واحدة؛ فنموذج جدول HTML لا يسمح لخلية بالامتداد عبر مجموعات صفوف متعددة. WHATWG: نموذج الجدول.

إذا أنشأ تطبيق الصفوف لاحقًا أو أعاد ترتيبها، فتعامل مع هذه النقاط كمتطلبات للتحديث: أبقِ كل مجموعة متماسكة، وضع رأسها الممتد في صفها الأول، وحافظ على عدد الامتداد، وحدّث أي إحالات تتغير. في هذا المثال، يتطلب نقل Large قبل Small داخل Alpha أيضًا نقل رأس Alpha إلى ذلك الصف الجديد الأول.

ماذا لو تعذّر على المحرر الاحتفاظ بهذه السمات؟

لا يعني تمكّن محرر من دمج الخلايا أنه يحافظ على الروابط المستخدمة هنا. قبل الاعتماد على مستند جرى تحريره أو تصديره، افحص HTML بحثًا عن حدود المجموعات والنطاقات والمعرّفات وقوائم الرؤوس المقصودة. سير العمل المدعوم في هذا الدليل على Mac هو تحرير المصدر مباشرةً في TextEdit.

إذا لم تتمكن أداة التأليف لديك من الاحتفاظ بالبنية المطلوبة، ففكّر في استخدام جدول أبسط منفصل لكل مجموعة، بأعمدة Variant وWidth وHeight. تعرض W3C تقسيم الجداول المعقدة إلى جداول أصغر كبديل يمكن أن يسهّل القراءة والتأليف معًا. استخدم هذا الخيار فقط عندما يكون تغيير البنية الأصلية مقبولًا. W3C: تقسيم الجداول متعددة المستويات.

في المثال المكتمل، اختر أي رقم وتحقق من أن عناوينه الثلاثة المشار إليها تصف بدقة ما يقيسه. ثم أجرِ الفحص نفسه مع كل إدراج أو حذف أو إعادة ترتيب للصفوف. يمنحك ذلك طريقة ملموسة للحفاظ على معنى الجدول ومظهره معًا.

المصادر