نماذج وجداول اتش.تي.إم.إل

أ. ما هي استخدامات جداول اتش.تي.إم.إل HTML Tables ، وما هي الاستخدامات التي ينصح بتجنبها؟

لم تعد "جداول اتش.تي.إم.إل" HTML tables شائعة الاستخدام كما كانت في السابق، ولكن كـ"مطور واجهات أمامية" a frontend developer، لا يزال من الضروري أن تكون على دراية بها. تُعد "الجداول" Tables من أوائل الطرق التي استخدمها "المطورون" devs لعرض "البيانات" data في "المتصفح" a browser في تسعينيات القرن الماضي.

فيما يلي مثال على "الكود" code المستخدم لإنشاء "جدول" a table من "مكتب إحصاأت العمل الأمريكي" the U.S. Bureau of Labor Statistics :

<table id="quickfacts">
 <thead>
  <tr>
   <th colspan="2">حقائق سريعة: مطورو البرمجيات، ومحللو ضمان الجودة، والمختبرون</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>متوسط ​​الأجور لعام 2023</th>
   <td>
    130,160 دولارًا سنويًا
    <br>62.58 دولارًا في الساعة
   </td>
  </tr>
  <tr>
   <th>التعليم النموذجي للمبتدئين</th>
   <td>درجة البكالوريوس</td>
  </tr>
  </tr>
  <tr>
   <th>خبرة عملية في مهنة ذات صلة</th>
   <td>لا أحد</td>
  </tr>
  <tr>
   <th>التدريب أثناء العمل</th>
   <td>لا أحد</td>
  </tr>
  <tr>
   <th>عدد الوظائف، 2022</th>
   <td>1,795,300</td>
  </tr>
  <tr>
   <th>توقعات سوق العمل، 2022-2032</th>
   <td>25% (أسرع بكثير من المتوسط)</td>
  </tr>
  <tr>
   <th>التغير في التوظيف، 2022-2032</th>
   <td>451,200</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <th>لو كان لهذا الجدول "تذييل" لكان هنا.</th>
  </tr>
 </tfoot>
</table>
                

معاينة كود الجدول :

كما ترون، يوجد عنصر "جدول" table رئيسي يحمل "المعرّف" id هذا "quickfacts". ويحتوي هذا العنصر على عناصر فرعية هي: "رأس الجدول" thead، و"جسم الجدول" tbody، و"قاعدة الجدول" tfoot.

عناصر "رأس الجدول" table head، و"جسمه" body، و"تذييله" foot يمكن أن تحتوي كل منها على عدد من "صفوف الجدول" a table rows, tr. ويحتوي كل "صف" table row على "رأس جدول" a table header, th يُحدد البيانات الموجودة فيه. كما يمكن أن يحتوي على عدد من "خلايا البيانات الفردية" individual data cells، تُسمى "بيانات الجدول" called table data, td.

هذا عدد كبير من "عناصر اتش.تي.إم.إل" HTML elements . لكن لا تدع الأمر يربكك – فهي تتبع "تسلسلاً هرمياً بسيطاً" a simple hierarchy.

إليكم أبسط "جدول" table يمكننا إنشاؤه والذي يتضمن جميع هذه العناصر:

<table>
 <thead>
  <tr>
   <th>عنوان هذا الجدول</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>الصف الأول</th>
   <td>
    خلية البيانات الأولى
   </td>
  </tr>
  <tr>
   <th>الصف الثاني</th>
   <td>
    خلية البيانات الثانية
   </td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <th>.قد يحتوي "تذييل" هذا الجدول على تاريخ النشر، أو بيانات المؤلفين، أو معلومات تعريفية أخرى</th>
  </tr>
 </tfoot>
</table>
                

معاينة كود الجدول :

كما ترون، فإن البيانات نفسها موجودة دائمًا داخل عنصر tr – وداخل عنصر tr هذا يوجد عنصر th يحتوي على عنوان، وعنصر td يحتوي على بيانات..

ستختار بعض المواقع الإلكترونية استخدام عناصر div لإنشاء جداولها الخاصة بدلاً من استخدام عنصر "الجدول" table الأكثر ملاءمة.

على الرغم من أنه من الممكن عرض "البيانات الجدولية" tabular data باستخدام عناصر div العامة، إلا أنه لا يزال من الأفضل استخدام عنصر "الجدول" table بدلاً من ذلك.

قبل سنوات عديدة، ربما استخدم المطورون "الجدول" a table لتحديد مواقع العناصر "الغير البياناتية" non-data على صفحات الويب. لم يُعتبر هذا الأسلوب من أفضل الممارسات آنذاك. لكن قد تصادف بعض "قواعد البيانات البرمجية" codebases التي لا تزال تستخدم "الجداول" tables بهذه الطريقة.

يستخدم المطورون اليوم تقنيتي CSS flexbox و grid لتصميم مواقعهم. وسنتناول هذه الأدوات بالتفصيل لاحقاً.

في الوقت الحالي، استخدم "جداول اتش.تي.إم.إل" HTML tables للغرض الأصلي المقصود منها: عرض البيانات الجدولية.