2024208494886170954365459073536587125329324600425355324472245929212525005525530030271027810172575929800065427858557245242200073127892960531555

الثلاثاء، 21 يوليو 2020

صمم موقعك الإلكتروني سريعاً بناء الجداول - الدرس السادس

الجداول

في لغة HTML يمكننا أن نبني جداول وإستخدامها كمنظم للبيانات من خلال وسم <table> وهو وسم له بداية ونهاية ليبين حدود هذا الجدول، ويتكون الجدول من صفوف مقسمة الى خلايا داخلها والتي تعرف بالأعمدة ولنفهم أكثر كيفية بناء الشيفرة علينا أولاً أن نففهم أجزاء الجدول مثال جدول مكون من صفين و3 اعمدة لاحظ الصورة
:
لاحظ أن جدول مكون من صفين و3 أعمدة يعني وجود 6 خلايا نسطيع أن نضع داخلها ما نريد من البيانات 
السطر الأول Table Row يتكون من 3 خلايا Table Data بالتالي بناء الشيفره في لغة HTML تعتمد على وسم الصف <tr> وهو اختصار Table Row و داخل بداية ونهاية هذا الوسم سنضع الخلايا الثلاث و وسمها هنا <td>  اختصار لـ Table Data
وأيضا هذا الوسم له بداية ونهاية ونضع البيانات التي نيردها بين البداية والنهاية لوسم <td> وكل هذه الصفوف والأعمدة نضها بين وسم بداية ونهاية <table>  لاحظ الصورة التوضيحية لأوسمة البداية والنهاية على مخطط الجدول:
تتبع إشارة النهاية للأوسمة المعلمة باللون الأسود .. وبناءا على هذه الهيكيلة يمكننا بسهولة أن نبني شيفرة هذا الجدول :
سنلاحظ هنا أننا فمنا بوضع البيانات الست بين وسم البداية <td> و وسم النهاية <td/> ثلاث منها في السطر الأول <tr> وهي (الرقم، الإسم، العمر).
أما الثلاث الأخرى ففي السطر الثاني و هي أيضا داخل بين وسم البداية <td> و وسم النهاية <td/> والبيانات هي (1،احمد، 25)
كما نلاحظ أن وسم الجدول<table> هنا يحتوي بعض خصائص الجدوال وهي :


خصائص الجدول

1-border :هي خاصية لتحديد حدود وإطار للجدول وتاخذ قيم بالبكسل كما في المثال السابق أخذت 1 بكسل
2- dir : وهي لتحويل إتجاه النصوص داخل الجدول وفي المثال السابق جعلنا الإتجاة مناسب للخط العربي من اليمين الى اليسار rtl وهذه الخاصية مشابة لخاصية وسم الجسم كما وتأخذ القيمة ltr أي من اليسار الى اليمين وهي القيمة التلقائية للجدول.
3- bgcolor: لإعطاء الألوان إما الأساسية منها او بنظام الهكساديسمل راجع الدرس الثاني
4- background: لجعل صورة معينة خلفية للجدول وهي مشابة لخاصية في  وسم الجسم
5- width: لتحديد عرض للجدول بالنسبة للصفحة (بنظام النسب المئوية او نظام البكيسل وهو التلقائي هنا)
6- height: لتحديد طول الجدول بالنسبة للصفحة (بنظام النسب المئوية او نظام البكيسل وهو التلقائي هنا)
7- cellspacing: لزيدة او تقليل المسافة الفاصلة بين الخلايا بنظام البكسل
8- cellpadding: تحدد المسافة بين حدود الخلية والنص الذي تحتويه.
9- align : لتحديد موفع الجدول نسباً الى الصفحة ويأخذ القيم التالية (left, right, center) 
تتبع التغيرات في الشيفرة ونتيجتها:

لاحظ تأثير الخاصية التاسعه align كيف جعلت الجدول في وسط الصفحة.



هنا قد قمنا بتغير قيمة الخاصية التاسعة وإضافة الخاصية الثالثة بقيمة اللون الأزرق.


لاحظ هنا جعنا الطول للجدول 100 بكسل بينما العرض جعلناه بنظام المئوي وهنا 80% من الصفحة.

الخاصية السابعة cellspacing لوجعنا قيمتها 5 بكسل لاحظ النتيجة:


لاحظ النتيجة مسافة بين الخلايا <td> بمقدار 5 بكسل لنقوم بزيادة المسافة ونلاحظ الفرق.


لاحظ المسافات :


اما الخاصية الثامنة cellpadding فلاحظ معي الفرق التي تحدثة :


لاحظ هنا الرقم هو ذاته 20 بكسل لكن خاصية cellpadding تصنع مسافة بين البيانات والخلية ذاتها وليس مسافة بين الخلايا لاحظ:



أخيراً هل يمكننا أن نميز السطر الأول من الجدول وجعلة يبدو وكأنة عناوين أو رؤس للجدول ؟ نعم  وذلك بتحويل <td> الى <th> وهي اختصار لـ Table header لاحظ اين يحدث التغير فقط في السطر الأول:



الأن لنقوم بتحويل وسم البداية والنهاية <td> الى <th> وتفعيل النتيجة:

الأن اصبحت البيانات (الرقم، الإسم، العمر) مميزه بلون غامق عن بقية الجدول يمكننا إضافة سطر جديد أيضا لاحظ:


في الدرس القادم سنستكمل خصائص الخلايا .. الى لقاء جديد بإذن الله

----------------------------------------------------------------------------------------------------------------------------------------- -----------------------------------------------------------------------------------------------------------------------------------------

كافة الحقوق محفوظة لـ مدونة رعد: لإثراء المعرفة التقنية 2019