الدرس السابع الجداول (1)

الدرس السابعالجداول (1)أهلاً وسهلاً بك إلى الدرس السابع من دروسHTML.هذا الدرس سيكون الأول من درسين حول الجداول. وقد فضلت تجزئتها إلىقسمين وذلك لأهمية هذا الموضوع وتعدد خصائص الجداول واحتمالاتاستخدامها في صفحات الويب.تعد الجداول من أقوى الأدوات التي تتضمنها لغةHTMLوأكاد أجزم بأنه لا يوجد موقع في الإنترنت إلا ويستخدمها بصورة أوبأخرى. والحقيقة أن وضع الجداول في صفحات الويب لا يقتصر على تلكالقوائم من البيانات التي نحتاج لترتيبها في صفوف وأعمدة، بل يتعدىذلك إلى استخدامها في تصميم الصفحات نفسها وتنظيمها، والتحكمبمظهرها بصورة قوية وفعالة لا يمكن أداؤها مهما استخدمنا من وسومخاصة بتنسيق الصفحات.إن التعامل مع الجداول وإدراجها في صفحات الويب سهل جداً مثله مثلأي أداة من أدواتHTMLلكنه قد يبدو لك مربكاً بعض الشيء وخاصة في البداية، وذلك لتعددالخصائص التي تستعمل معها وتعدد الأوجه التي نستطيع التصرف بها.لكن لا تقلق فكل شيء يبدو صعباً في بدايته ولكن سرعان ما يصبحسهلاً.هل أنت مستعد؟ إذن هيّا بنا…بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول...<‎/TABLE>...<‎/TR>وسوم تعريف الجدولTable Rowوسوم تعريف الصف في الجدولCell Data <‎/TD>Table Dataوسوم تعريف الخلايا في الصف وتعريف محتويات كل خليةوالآن لنتكلم بصورة أكثر دقة وتفصيلاً:هذه هي الوسوم التي نبدأ بها لإدراج جدول مكون من خلية واحدة أو منمليون خلية… الأمر سيان... <‎/TABLE>والآن بعد إدراج هذين الوسمين، هناك سؤالين ينبغي الإجابة عليهما.الأول: كم عدد الصفوف التي نريدها في الجدول؟ ثلاثة، أربعة، مائة؟لا بأس، قم بإضافة الوسوم... <‎/TR>بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة.<‎/TR><‎/TR><‎/TR><‎/TABLE>والسؤال الثاني هو، كم عدد الخلايا (أو الأعمدة) التي نريدها في كلصف؟وهنا نضيف الوسوم... <‎/TR>طالما أن الخلايا هي جزء من الصفوف. وهنا سأفترض أننا نريد خليتينفي كل صف، وبذلك يجب تكرار كتابتها مرتين لكل صف.وأذكرك أن النص الذي نريد إدراجه في الخلية يكتب ضمن هذين الوسمين.Data <‎/TD>Data <‎/TD><‎/TR>Data <‎/TD>Data <‎/TD><‎/TR>Data <‎/TD>Data <‎/TD><‎/TR><‎/TABLE>هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا عليها.DataDataDataDataDataDataهناك شيء ما ينقص. بالطبع ... الحدود. انتظر قليلاً وستعرف الخاصيةالتي تقوم بإضافة الحدود للجدول وغيرها من الخصائص الأخرى. لأننيقبل أن أستمر أود أن ألفت نظرك لمسألة معينة في الجداول. وهي أنطريقة التعامل معها تتم على ثلاثة مستويات:مستوى الجدول ككلمستوى الصفوف ككل أو كل واحد على حدهمستوى الخلايا ككل أو كل واحدة على حده.ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائصمشتركة تستخدم مع كل الوسوم.نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم

... <‎/TD>بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم

... <‎/TABLE>وسأقوم أولاً بسردها لك، ومن ثم إدراج بعض الأمثلة التي توضحها.BORDERتقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها،والقيمة الإفتراضية لها هي صفر أي لا حدود‎ BORDER="5">‎‎‎WIDTHنستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبينلتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورةمباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسبعرض نافذة المتصفح. (أي أن عرض الجدول سيختلف باختلاف عرضنافذة المتصفح).‎ WIDTH="600">‎‎‎HEIGHTلتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع من خلالقيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحددارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح‎ HEIGHT="500">‎‎‎CELLSPACINGلتحديد المسافة بين كل خلية من خلايا الجدول‎ CELLSPACING="10">‎CELLPADDINGلتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية.أو لنقل: تحديد حجم الهوامش لخلايا الجدول.‎ CELLPADDING="10">‎ALIGNلتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً.وهو يأخذ القيمright,left‎ ALIGN="Left">‎‎‎BGCOLORويستخدم لتحديد لون الخلفية للجدول‎ BGCOLOR="#00FFFF">‎هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها علىالمثال الوارد في بداية هذا الدرس وسأكتفي بكتابة وسم البداية أماباقي الوسوم فهي نفسها:‎ BORDER="5">‎DataDataDataDataDataData‎ BORDER="5" CELLPADDING="5">‎DataDataDataDataDataData‎ BORDER="5" CELLPADDING="5" CELLSPACING="10">‎DataDataDataDataDataData‎ BORDER="5" CELLPADDING="5" CELLSPACING="10"‎BGCOLOR="#FFFF00">‎DataDataDataDataDataData‎ BORDER="5" CELLPADDING="5" CELLSPACING="10"‎BGCOLOR="#FFFF00" HEIGHT="300">‎DataDataDataDataDataData‎ BORDER="5" CELLPADDING="5" CELLSPACING="10"‎BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">‎DataDataDataDataDataDataونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف ... <‎/TR>ولا بأس من تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم.أما أهم الخصائص التي تضاف لهذا الوسم فهي:ALIGNلتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منهاالصف، والقيم المحتملة لها هيRight, Left, Centerوالقيمة الإفتراضية هيCenterVALIGNلتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إماللأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسيللخلية. وقيمها على التوالي هي:Top, Bottom, Middle,BaselineBGCOLORلتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتمتجاهل لون الخلفية المحدد ضمن وسم

ويتم تطبيق اللون المحدد هنا.ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من خلالالأمثلة التالية:‎ BORDER="5" HEIGHT="300">‎‎ ALIGN="Left">‎‎‎Data <‎/TD>Data <‎/TD><‎/TR>‎Data <‎/TD>Data <‎/TD><‎/TR>‎Data <‎/TD>Data <‎/TD><‎/TR><‎/TABLE>DataDataDataDataDataData‎ BORDER="5" HEIGHT="300">‎‎ VALIGN="Top">‎‎‎Data <‎/TD>Data <‎/TD><‎/TR>‎Data <‎/TD>Data <‎/TD><‎/TR>‎Data <‎/TD>Data <‎/TD><‎/TR><‎/TABLE>DataDataDataDataDataData‎ BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF">‎‎ BGCOLOR="#808080">‎‎‎Data <‎/TD>Data <‎/TD><‎/TR>‎Data <‎/TD>Data <‎/TD><‎/TR>‎Data <‎/TD>Data <‎/TD><‎/TR><‎/TABLE>DataDataDataDataDataData‎ BORDER="0" HEIGHT="100%" WIDTH="100%">‎‎ BGCOLOR="#808080">‎‎‎Data <‎/TD>Data <‎/TD><‎/TR>‎Data <‎/TD>Data <‎/TD><‎/TR>‎Data <‎/TD>Data <‎/TD><‎/TR><‎/TABLE>DataDataDataDataDataDataوالآن ماذا بقي لدينا؟ بالطبع بقيت الوسوم الخاصة بالخلايا. وسوفأتابع الحديث عنها في الدرس القادم إن شاء الله. أراك فيالدرس التاليلنتابع الحديث عن موضوع الجداول.المصدر: الدرس السابع الجداول (1)