السلام عليكم، سنرى اليوم كل ما يتعلق بالجداول منها العادية و المتقدمة في HTML و CSS، و سنتطرق أيضاً إلى التعديل على بنية الجدول بإضافة له المرفقات الضرورية لجعله يظهر بمظهر معين.
إنشاء الجدول
إنشاء الجدول في HTML
العنصر المسؤول عن إنشاء الجداول في HTML هو عنصر من نوع Block, و ثنائي الأوسمة، و يسمى 'TABLE' حيث يقحم داخله عنصر مسؤول عن إنشاء الأسطر أو ما تعرف بالأعمدة الأفقية للجدول، ألا و هو عنصر 'TR' و هو عنصر من نوع Block، و ثنائي الأوسمة، و يقحم بحسب عدد الأعمدة الأفقية المراد إنشاؤها في الجدول، بحيث أن عنصر واحد 'TR' مسؤول عن إنشاء عمود أفقي واحد في الجدول، و يقحم داخله عنصر مسؤول عن إنشاء خانة في العمود الأفقي للجدول، و يسمى هذا العنصر إما بـ 'TH' أو بـ 'TD'، حيث أن العنصر الواحد من هذين العنصرين الأخيرين هو مسؤول عن إنشاء خانة واحدة في العمود الأفقي للجدول، فعنصر 'TH' هو عنصر مسؤول عن إقحام خانات عناوين الجدول، أو ما تعرف برؤوس الجدول، و هو عنصر ثنائي الأوسمة حيث يقحم داخله ما يظهر في متصفحات الإنترنت، أما عنصر 'TD' فهو عنصر مسؤول عن إقحام خانة المعلومات، و هو عنصر ثنائي الأوسمة حيث يقحم داخله ما يظهر في متصفحات الإنترنت.
بعد إنشاء بنية الجدول في HTML، يظهر في متصفحات الإنترنت بدون ستايل (حواف، عرض...) مما يلجأ مصممو الويب من التعديل على مظهره بإضافة بعض Attributes مثل 'BORDER' من أجل إعطائه حواف، و في قيمتها يضعون عدد يحدد سمك الحواف، و مثل 'WIDTH' من أجل إعطائه عرض، و في قيمتها يضعون نفس ما يوضع في الخاصية 'WIDTH'، و مثل 'ALIGN' بقيمتها 'CENTER' من أجل توسطه أو محتويات خاناته وسط العناصر المحتوية... لكن ليس من الإحتراف التعديل على المظهر بالـ HTML، لأن كل Attributes الخاصة بالتعديل على المظهر يوجد لها بديل بـ CSS، و نتيجته أحسن.
التعديل على مظهر الجدول في CSS
من أهم تعديلات الجداول في CSS هو إعطاء للعناصر 'TH' و 'TD' حواف، إلا أن هذه الأخيرة تظهر منفصلة في متصفحات الإنترنت، لذا أنشئت الخاصية 'BORDER-COLLAPSE' للصق الحواف ببعضها البعض جاعلة الجدول يظهر بمظهره المعتاد، و هذه الخاصية لديها قيمتين خاصتين و قيمتين شاملتين :
- القيمتين الخاصتين هما القيمة 'SEPARATE' التي هي القيمة التلقائية للخاصية و تجعل الحواف منفصلة فيما بينها، و القيمة 'COLLAPSE' التي تجعل الحواف ملتصقة فيما بينها.
- القيمتين الشاملتين هما القيمة 'INHERIT' التي تورث للعنصر المظهر من العناصر المحتوية لها، و في حالة هذه الخاصية، فالقيمة تورث حالة الحواف للعنصر من العناصر المحتوية له، و القيمة 'INITIAL' التي ترجع العنصر إلى القيمة التلقائية له، و في حالة هذه الخاصية، فالقيمة ترجع العنصر إلى القيمة 'SEPARATE' التي هي القيمة التلقائية للخاصية.
الجداول العادية و الجداول المتقدمة
الفرق بين الجدول العادي و الجدول المتقدم هو أن هذا الأخير يظهر مقسَّم إلى أقسام في ملف HTML، و ذلك بإقحام العناصر 'TR' داخل عنصر من العناصر الثلاث التالية :
* العنصر 'THEAD' : عنصر من نوع Block و ثنائي الأوسمة، و هو المسؤول عن رأس الجدول، أي تقحم داخله العناصر 'TR' التي تحتوي على العناصر 'TH'.
* العنصر 'TBODY' : عنصر من نوع Block و ثنائي الأوسمة، و هو المسؤول عن جسم الجدول، أي تقحم داخله العناصر 'TR' التي تحتوي على العناصر 'TD'.
* العنصر 'TFOOT' : عنصر من نوع Block و ثنائي الأوسمة، و يقحم بين العنصر 'THEAD' و العنصر 'TBODY'، و رغم ذلك يظهر في متصفحات الإنترنت أسفل الجدول بحيث أنه المسؤول عن قدم الجدول، أي تقحم داخله آخر العناصر 'TR' في الجدول.
الغاية من العناصر الثلاث 'TBODY'، 'THEAD' و 'TFOOT' هو تسهيل فهم أكواد الجداول من طرف مصممي الويب، و الأهم هو تخصيص لهذه العناصر مظهر بأكواد CSS.
الفيديو التوضيحي للدرس
مرفقات الجدول
تجعل المرفقات الجدول يظهر بمظهر يسهل فهمه من طرف الزوار، و تساعد أيضاً في إعطاء المظهر لأماكن معينة في الجدول.
عنوان الجدول
يعتبر عنوان الجدول مهماً في حالة تعدد الجداول في نفس صفحة الويب، و الطريقة المثلى لإنشائه هي عبر العنصر 'CAPTION' في ملف HTML، و هو عنصر من نوع Block و ثنائي الأوسمة حيث يتم كتابة العنوان بين وسميه، و يقحم بعد وسم فتح العنصر 'TABLE'.
الدمج الأفقي لخانات الجدول
تدمج الخانات أفقياً في حالة تشارك الخانات المتجاورة أفقياً نفس المحتوى، حينها يتم دمج الخانات المشتركة في الجدول عبر Attribute تسمى 'COLSPAN' حيث يقحم في قيمتها عدد يحدِّد عدد الخانات المراد دمجها، و دائماً تقحم هذه الـ Attribute في أول عنصر الخانات المراد دمجها ثم تحدف عناصر الخانات المتبقية منها.
الدمج العمودي لخانات الجدول
تدمج الخانات عمودياً في حالة تشارك الخانات المتجاورة عمودياً نفس المحتوى، حينها يتم دمج الخانات المشتركة في الجدول عبر Attribute تسمى 'ROWSPAN' حيث يقحم في قيمتها عدد يحدِّد عدد الخانات المراد دمجها، و دائما تقحم هذه الـ Attribute في أول عنصر الخانات المراد دمجها ثم تُحدف عناصر الخانات المتبقية منها.
تحديد أعمدة الجدول العمودية
يسمى العنصر المسؤول عن تحديد الأعمدة العمودية للجدول بـ 'COLGROUP'، و هو عنصر من نوع Block، و ثنائي الأوسمة، و يقحم بعد وسم فتح العنصر 'TABLE' أو بعد العنصر 'CAPTION' إذا كان موجوداً، و يقحم داخله عنصر صاحب وسم يتيم بإسم 'COL'، حيث لذى هذا العنصر Attribute إجبارية بإسم 'SPAN'، و يقحم في قيمتها عدد يحدِّد عدد الأعمدة العمودية المراد التعديل عليها بأكواد CSS، فمثلاً إذا أقحم العدد 1 سيحدَّد العمود العمودي الأول في الجدول، و إذا أقحم العدد 2 سيحددا العمود العمودي الأول و العمود العمودي الثاني في الجدول، و هكذا... و من أجل المزيد من التحديدات للأعمدة العمودية داخل نفس الجدول يجب إقحام عناصر 'COL' أخرى داخل نفس العنصر 'COLGROUP' للجدول مع الأخذ بعين الإعتبار اتباع نفس طريقة التحديد علماً أن توالي التحديدات يتم استناداً على ترتيب العناصر 'COL' داخل العنصر 'COLGROUP'.
الأكواد المستعمة في الدرس