الدرس السادس: القوائم والجداول

هذا الدّرس كما يبدو لنا من العنوان، سيُفصّل كيف يمكن للواحد منا كتابة قائمة أو عمل جدول بواسطة لغة HTML
القوائم تُقسم إلى نوعين بشكلٍ رئيسي : عددية ( Ordered List ) ونقطية (Unordered List) ، وإلى
قائمة تعريفات (Definition list) .. وسيتم شرح الأنواع الثلاثة

• مثال - 1 - : القوائم العددية | Ordered Lists

هناكَ نسَق مُعين أو هيكل موحّد يتم بناء القوائم عليه
لاحظوا الشكل التوضيحي التّالي الذي سيعرض شكل القائمة الذي نرغب بعمله ، ودلالة كل عنصر برمجياً :



<ol> : اختصار لـ Ordered List أي قائمة عددية
<li> : اختصار لـ List item أي عنصر في القائمة

برمجيّاً :




النتيجة :

• مثال - 2 - : القوائم النقطية | Unordered Lists

هاكم الشكل التوضيحي التّالي الذي سيعرض شكل القائمة الذي نرغب بعمله ، ودلالة كل عنصر برمجياً :



<ul> : اختصاراً لـ Unordered List

تابعوا المثال :



والنتيجة

• مثال - 3 - : قائمة التعريفات | Definition list

تحتوي هذه القائمة على مُصطلحات وتعريفاتها
هاكم الشكل التوضيحي التّالي الذي سيعرض شكل القائمة الذي نرغب بعمله ، ودلالة كل عنصر برمجياً :




تابعوا المثال :



والنتيجة :

• مثال - 4 - : الجداول | Tables

كما القوائم ، يوجد للجداول هيكل موّحد خاص بها تُبنى عليه
لاحظوا شكل الجدول وتكوينه البرمجي :



<caption> تعني عنوان ، وبها نقوم بإضافة عنوان للجدول
<table> وسم البداية، يُستخدم للتعريف أن الجدول يبدأ من هنا ، وعند انتهائنا من كتابة الجدول نختم بوسم النهاية
<tr> اختصاراً لـ Table Row ونعني بها أننا الآن قمنا بفتح سطر جديد
<td> اختصاراً لـ Table Cell ونعني بها أننا قمنا بفتح خليّة جديدة

كيف نستخدم كلّ هذه الأمور ؟
تابعوا المثال :



النتيجة :




من الممكن إضافة المزيد من الـ attributes على وسم الـ <table>
مثلاً:



Border : يقوم بإضافة إطار حول الجدول والقيمة المُسندة إليه تعبّر عن عرض الإطار بالبكسل
align : تقوم بإزاحة النص ، وفي المثال اعلاه تقوم بإزاحته للوسط
cellpadding : تستخدم لإنشاء مساحة بين النصّ داخل الجدول والإطار الذي يحيط الخلية ، يقوم بما يشبه التوسعة
للجدول والقيمة المُسندة إليه تعبر عن المساحة بالبكسل
bordercolordark : يغير لون الجهة السفلية وجهة اليمين من الجدول
bordercolorlight : يغير لون الجهة العلوية والشمالية من الجدول

لاحظوا النتيجة :




::

كله تمام ؟
بانتظار أسئلتكم واستفساراتكم