إعادة اكتشاف جداول HTML

بناءً على بعض ممارساتي الأخيرة وبعد التواصل مع بعض القراء حول استخدام جداول HTML، قررت أن أكتب هذا المقال. وبشكل عام، لاحظت أن لديهم نفوراً مسبقاً من استخدام الجداول بسبب المعلومات المضللة. في الواقع، سيقول الكثير من الناس "أرى أنه لا ينبغي استخدام الجداول أبدًا"، لكن هذا خطأ تمامًا! ينطبق هذا الاقتراح فقط على استخدام جداول HTML لتحديد تخطيط صفحة الويب، ولكن الجداول مثالية لترتيب صفوف وأعمدة معلومات البيانات بشكل ملائم، وإذا كان يجب عليك عرض بيانات جدولية على الصفحة، فيجب عليك استخدامها! ولم لا؟ ومع ذلك، في هذه الحالة، يتجاهل بعض الأشخاص وجود علامات HTML معينة للجداول ولا يعرفون كيفية استخدامها بشكل صحيح.

يحتوي HTML على 10 علامات مرتبطة بالجدول. فيما يلي قائمة تحتوي على مقدمة، ولكن أولاً، يجب تعريف المستند بشكل صحيح ضمن HTML 4.01/XHTML 1 أو HTML 5:

• <caption> يحدد عنوان الجدول (4، 5)
• <col> يحدد سمات أعمدة الجدول (4، 5)
• <colgroup> يحدد تجميع أعمدة الجدول (4، 5)
• <table> يحدد الجدول (4، 5)
• <tbody> يحدد نص الجدول (4, 5)
• <td> يحدد الخلية (4، 5)
• <tfoot> يحدد الحاشية السفلية (أسفل) الجدول (4، 5)
• <th> يحدد رأس الجدول (4، 5)
• <thead> يحدد رأس الجدول (4، 5)
• <tr> يحدد صفوف الجدول (4، 5)

هيكل الجدول الأساسي هو كما يلي:

يحتوي على عنوان ورأس ونص وتذييل. الترتيب الصحيح لعناصر HTML هو:

1. <الجدول>
2. <تسمية توضيحية>
3. <الرأس>
4. <قدم>
5. <الجسم>

يمكنك أيضًا استخدام <col> و<colgroup> لتحديد أعمدة الجدول أو أعمدة المجموعة:

1. <الجدول>
2. <تسمية توضيحية>
3. <كولجروب>
4. <العمود>
5. <الرأس>
6. <قدم>
7. <الجسم>