ما هي أفضل طريقة لتمثيل الفارغ في HTML5؟

Question

قل لدي الجدول المعطى:

       +------+------+------+
       | Col1 | Col2 | Col3 |
+------+------+------+------+
| Row1 | D1.1 | D1.2 | D1.3 |
+------+------+------+------+
| Row2 | D2.1 | D2.2 | D2.3 |
+------+------+------+------+
| Row3 | D3.1 | D3.2 | D3.3 |
+------+------+------+------+

وأريد تمثيله في HTML5. الشيء الصعب هو أن مثل هذه الجداول يجب أن تكون مهمة بشكل دلالي ، ولكن الخلية اليسرى الأعلى هي ليس مهم بشكل دلالي ، ولكن بدلاً من ذلك فاصل لتصطف رؤوس الأعمدة الأكثر أهمية. ما هي الطريقة المثلى لعمل هذا؟ فكرتي الأولى هي أن أفعل ذلك مثل هذا:

<table>
    <thead>
        <tr>
            <th></th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row1</th>
            <td>D1.1</td>
            <td>D1.2</td>
            <td>D1.3</td>
        </tr>
        <tr>
            <th>Row2</th>
            <td>D2.1</td>
            <td>D2.2</td>
            <td>D2.3</td>
        </tr>
        <tr>
            <th>Row3</th>
            <td>D3.1</td>
            <td>D3.2</td>
            <td>D3.3</td>
        </tr>
    </tbody>
</table>

رغم ذلك ، وضع <th></th> هناك شعور خاطئ فقط ، مثل استخدام <p>&nbsp;</p> للتباعد. هل هناك طريقة أفضل للقيام بذلك؟

Answer 1

من المقبول تمامًا أن يكون لديك فارغ <th> عنصر ، يتحدث من حيث الصلاحية أو الدلالات. لا شيء في المواصفات يمنعها ؛ في الواقع ، أنه يحتوي على واحد على الأقل مثال التي تستخدم فارغة <th> لهذا الغرض بالذات:

يوضح ما يلي كيف يمكن للمرء أن يحدد جدول الهامش الإجمالي في الصفحة 46 من ملف Apple ، Inc 10-K للعام المالي 2008:

<table>
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
   <th>2006
 <tbody>
  <tr>
   <th>Net sales
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
 <!-- snip -->
</table>

Answer 2

لمناقشة حول الدلالات وعناصر الجدول الفارغة أود الإشارة إليها لهذا السؤال على Stackoverflow

يمكن أن يعتمد تصميم الخلايا "الفارغة" (مثل الخلفية أو الحدود) في بعض الأحيان على غياب/وجود "محتوى" وهذا هو السبب في أن الناس غالبًا ما يضعون ملف   داخل. هناك علامة CSS خاصة لتصميم الخلايا الفارغة التي يمكنك قراءتها عنها هنا على MDN.

table {
    empty-cells: hide;
}

هنا يمكنك العثور على مقال آخر مع بعض المعلومات الأساسية اللطيفة حول هذا الموضوع.

Answer 3

أي طريقة أفضل لاستخدام فارغة <th></th>:

الرمز الدقيق:

<tr>
 <th></th>
 <th colspan="6"></th>
</tr>