أنت تمسك ورقة مكتوباً فيها عشرات الأسماء وأرقام الدرجات في مواد متفرّقة. لحظة واحدة أمامها كافية لتعرف أنّ محاولة قراءتها كنصّ متواصل ستشتت تركيزك وتُفقدك الأرقام بين السطور. الحلّ يكمن في الجداول داخل HTML، فهي ترتّب البيانات في شبكة واضحة يرتاح لها الذهن ويلتقطها بسرعة. وعلى الطرف الآخر، حين تريد أن يدخل زوّار موقعك بياناتهم أو يبعثوا إليك برسالة، فأنت أمام النماذج. هذان العنصران محور هذا الدرس، وسنرافقك في كل خطوة لتبنيهما بثقة.
أولاً: الجداول في HTML
الجدول ليس خطوطاً متقاطعة وأعمدة متراصّة فحسب، إنّه أسلوب ذكي لسرد معلومات مترابطة. تخيّله كقصّة قصيرة: كل صفّ يروي فصلاً منها، وكل خانة تحمل تفصيلة من هذا الفصل.
الهيكل الأساسي للجدول
لبناء أي جدول، تحتاج إلى ثلاثة وسوم تتعاون فيما بينها بانتظام:
- وسم الجدول، وهو الإطار الذي يحتضن بقيّة العناصر.
- وسم الصف، ويمثّل سطراً أفقياً واحداً.
- وسم الخلية، ويضمّ البيانات داخل الصفّ.
يبدأ الجدول عادةً بصفّ مميّز يُعرف بصفّ الترويسة، مهمّته لفت الانتباه إلى عناوين الأعمدة وتسهيل قراءتها. يلي ذلك صفوف البيانات التي تحمل القيم الفعلية. هذه الترويسة ليست لمسة جمالية فقط، بل تمنح القارئ مفتاحاً سريعاً لفهم محتوى كل عمود.
دمج الخلايا وتسهيل القراءة
قد تحتاج أحياناً إلى خلية تتّسع لعمودين معاً، كأن يكون اسم الطالب في خانة عريضة ودرجاته موزّعة على خانات أصغر بجانبها. خاصيّة الدمج الأفقي تتيح لك ذلك، وتمنح التصميم مرونة أكبر وتبعد عنك التكرار الذي يثقل الجدول.
ولا تنسَ إلحاق وصف موجز بالجدول عبر الوسوم المخصّصة لذلك. لن يظهر هذا الوصف أمام الزائر بشكل مباشر، لكنه يساعد المتصفّح وأدوات القراءة على فهم طبيعة البيانات. خطوة صغيرة هذه، لكنّها تصنع فارقاً ملموساً في تجربة الاستخدام وإمكانية الوصول.
ثانياً: النماذج في HTML
ما الجدول إلّا أداة عرض، أمّا النموذج فهو أداة استقبال. النماذج هي الجسر بينك وبين من يزور صفحتك، تعليقاً كان أو تسجيلاً أو بحثاً عن سلعة.
العناصر الأساسية للنموذج
ينطلق أي نموذج جيّد من حاوية واضحة تُحدّد الوجهة التي ستصل إليها البيانات. داخلها تصطفّ عناصر متنوّعة، لكلّ منها دور محدّد:
- حقل النص لكتابة كلمات أو جمل قصيرة.
- حقل البريد الإلكتروني الذي يتحقّق من صحّة التنسيق قبل الإرسال.
- قائمة الاختيار حين تريد للزائر أن يختار من بين خيارات معدّة سلفاً.
- أزرار الاختيار حين يكون الاختيار واحداً فقط من مجموعة محدودة.
- مربع النص الكبير لإدخال رسائل طويلة أو ملاحظات مفصّلة.
- زر الإرسال الذي يضغط عليه الزائر لإنهاء العملية.
لمسات تُحسّن تجربة المستخدم
لا ترمِ الحقول كيفما اتفق، بل رتّبها بتسلسل منطقي: الاسم أوّلاً، ثم البريد، فالرسالة. أضف نصوصاً إرشادية صغيرة تظهر داخل الحقل وتتلاشى لحظة الكتابة، فهي ترشد الزائر من دون أن تحتلّ مساحة دائمة على الشاشة.
واجعل الحقول الجوهريّة كالبريد الإلكتروني إلزاميّة، في حين تترك البقيّة اختياريّة، حتى لا يشعر الزائر أنّه أمام استجوان مطوّل. كلّما قلّلت الحواجز أمامه، زادت فرصة أن يكمل ملء النموذج بنجاح.
ثالثاً: ربط الجداول بالنماذج
قد يخطر ببالك: ما صلة الجدول بالنموذج؟ في الحقيقة، كثير من المواقع تعرض بياناتها داخل جداول وتتيح للزائر تعديلها عبر نموذج يظهر إلى جوارها. تخيّل لوحة تحكّم بمنتجات متعدّدة: كل صفّ يعرض منتجاً، وفي آخره زرّ “تعديل” يستدعي نموذجاً جاهزاً.
هذا التكامل بين العرض والإدخال يضفي على صفحاتك حياة، ويحوّلها من وثائق جامدة إلى واجهات تفاعليّة حقيقيّة.
نشاط تطبيقي
تعلّمنا كيف نرسم جدولاً منظّماً يضمّ بيانات واضحة، وكيف نصمّم نموذجاً سلساً يلتقط مدخلات الزائرين. الجدول يرتّب، والنموذج يجمع، وكلاهما يمنح الصفحة نفعاً مضاعفاً.
آن أوان التطبيق: أنشئ صفحة HTML تحوي جدولاً يمثّل جدولك الدراسي لأسبوع كامل، الأيام في الأعمدة والحصص في الصفوف. وتحته مباشرة، أضف نموذجاً يطلب من الزائر اختيار المادة التي يفضّلها وكتابة سبب اختياره في حقل مخصّص. ستلاحظ كيف تتكامل البيانات المعروضة مع البيانات المجمّعة في صفحة واحدة منسجمة.