الفصل السادس
التعامل مع الجداول
الجداول
الجداول تعتبر أهم الأدوات المستخدمة في تنسيق صفحات الويب, فغالبية مصممو صفحات الويب يقومون بوضع كل مكونات صفحة الويب بداخل جدول, وقد لا تظهر حدود هذا الجدول, ولكن تظهر محتويات الجدول من النصوص والصور التي تحتوي عليها صفحة الويب بشكل مرتب, فالجدول نفسه لا يظهر, وإنما ما يظهر هو محتويات الجدول.
وتستخدم الجداول أيضاً في وضع بعض المكونات الموجودة في صفحة الويب كالاستخدام العادي للجداول في مستندات النصوص الأخرى, فقد تستخدم الجدول مثلا لوضع محتويات قائمة أشعار فيه, أو نتيجة امتحانات طلاب إحدى الفرق بإحدى الجامعات.
وفي لغةhtmlيتم إنشاء الجدول بالعلامة المزدوجة</table> <table…..> ويوضع بين حدي هذه العلامة جميع مكونات الجدول, ويتكون الجدول في لغة htmlمن مجموعة من الصفوف التي يتم إنشاؤها باستخدام علامة </tr> <tr….>, ويوضع بين حدي العلامة كل مكونات الصف, ويتكون كل صف من صفوف الجدول من مجموعة من الخلايا، يتم إنشاء كل خلية منها باستخدام العلامة<td…> </td>, ويوضع بين حدي هذه العلامة محتويات خلية من الجدول.
والكود التي توضح كيفية إنشاء جدول بسيط يحتوي على صف واحد, هذا الصف يحتوي على ثلاثة خلايا:
وتوضع العلامة الخاصة بإنشاء الجدول بين حدي علامة<body>, على اعتبار أن الجدول أحد مكونات جسم الصفحة.
والمثال التالي يوضح كيفية إنشاء صفحة ويب تحتوي على جدول بسيط, يحتوي هذا الجدول على ثلاثة صفوف, كل صف يحتوي على ثلاثة خلايا:
- قم بتشغيل برنامجnotepad واكتب به نص ملفhtml كما في الشكل التالي:
- قم بحفظ المستند بامتدادhtml. وقم بفتح المستند في متصفح الإنترنت فتحصل على جدول يحتوي على ثلاثة صفوف، كل صف يحتوي على ثلاثة خلايا, كل خلية تحتوي على رقم الخلية, كما في الشكل التالي:
في الكود السابق لاحظ وضع محتويات كل خلية من خلايا الجدول بين حدي العلامة الخاصة بإنشاء الخلية<td> Mtd>, فإذا أردت مثلاً أن تقوم بوضع نص بداخل إحدى خلايا الجدول قم بكتابة هذا النص بين حدي علامة بإنشاء الخلية, ماذا ما أردت وضع صورة بداخل إحدى خلايا الجدول قم بوضع الكود الخاص بوضع الصورة بداخل حدي علامة إنشاء الخلية, وهكذا.
وبداخل علامة الجدول<table…> توضع القيم التي تحدد خواص الجدول من حيث عرض حدود الجدول, والمسافة بين خلايا الجدول, ولون خلفية الجدول وكذلك يوضع بداخل علامة الصف<tr….> القيم التي تحدد خواص الصف, ويداخل علامة الخلية<td…..> القيم التي تحدد خواص الخلية.
