دورة html الدرس 6 : الجداول ( الجزء الأول )
السلام عليكم ورحمة الله وبركاته
إن كيفية التعامل مع الجداول من أهم الأمور التي يجب فهمها تماماً في دورتنا HTML ( صراحةً هي دورة xhtml وهذا لصالحكم )
حيث لا تخلو صفحة انترنت في المواقع من الجداول و هي البنية الأساسية لتقسم الصفحة و إعطاء
منظر الصفحة و شكلها و سنقسم درس الجداول إلى درسين حتى لا نكثر على اخواننا المتابعين
بدايةً الوسوم tags الأساسية في التعامل مع الجداول هي ثلاثة :
table الجدول
tr الصف
td العمود
هذه هي الثلاثة الأساسية ويوجد غيرها سنذكره لاحقاً , كما يوجد خصائص لهذه الوسوم من أجل تحكم أكثر في الجدول
على كل حال سنبدأ بجدول بسيط :
يتم افتتاح الجدول و إنهاؤه بالوسم table
حيث يكون كالتالي :
هنا توضع الصفوف و الأعمدة
وبين هاتين الوسمتين توضع وسمات الصفوف و الأعمدة
حيث يعرف الصف بالوسم التالي
هنا تعرف الأعمدة
ومن المهم جداً الانتباه إلى أن الأعمدة تعرف ضمن الصفوف دوماً
حيث تعرف الأعمدة بالوسم td
الآن سنقوم بإنشاء الجدول التالي:
الكود سيكون كما يلي
القرآن الكريم
اسم السورة
رقم السورة
البقرة
1
آل عمران
2
جرب الكود على صفحة الأكواد بالضغط هنا
(ربما لن تظهر حدود الجدول في صفحة الأكواد بشكل استثنائي )
لاحظ كيف بدأنا الجدول ثم وضعنا صف ووضعنا بداخله الأعمدة
ثم كررنا وضع صف ثاني ووضعنا بداخله الأعمدة
ملاحظة :
لا يحوز أن يتغير عدد الأعمدة بين صف و آخر
مثال ثاني :
1
2
3
4
5
6
7
8
النتيجة ستكون كالتالي:
أحياناً يكون الصف الأول ( الذي يحتوي الأرقام من 1 إلى 4 في المثال السابق )
إحياناً تحوي خلاياه على عناوين لما تحته و ربما نرغب بتمييزها عن باقي الخلايا
ولهذا هناك طرق كثيرة ( أغلبها يعتمد على css سندرسه لاحقاً )
مثلاً يمكن جعله بلون غامق ولذلك نستعمل th بدلاً من td
انظر المثال التالي:
الاسم
الدرجة
محمد
6
أحمد
8
النتيجة ستكون كالتالي :
لاحظ أن كلمتي الدرجة و الاسم بخط غامق لأننا وضعنا th بدلاً من td عندهما
مثــــــــــال آخر :
الاسم
محمد
العمر
39
نتيجة التنفيذ:
نأتي إلى خصائص الجدول:
استخدمت في الأعلى احدى الخصائص دون ذكرها
وهي الخاصة border
إنها تستعمل للتحكم بحدود الجدول حيث القيمة صفر 0 لإخفاء الحدود
و القيمة 1 لإظهار الحدود كما في الأمثلة السابقة
تكتب كما يلي :
لاحظ أنها خاصية تابعة للوسم table لذلك تكتب داخله
وإليكم صور توضح الفرق عند تكبير الرقم المعبر عن الحدود
القـــــــــــــيمة 0 :
القـــــــــــــيمة 1 :
القـــــــــــــيمة 3 :
القـــــــــــــيمة 15 :
ملاحظة :
بالنسبة للخلايا الفارغة في الجدول يمكن كتابتها كما يلي :
أو كما يلي :
............... يتبع في الدرس القادم
من يحب أن يجرب شيئاً ما ويضع الكود فهذا من دواعي سروري
التعليقات
(2)
مشكووووووووور يغالي
درس سهل وهام
بارك الله فيك على هالجهود الطيبة المبذولة
وبالنسبة للمشاريع منتظرينها على أحر من الجمر
و بالنسبة للمشاريع قريباً جداً
لحتى تصير المعلومات كافية لعمل شيء