B |
في المثال التالي قمنا بدمج الخانة الثانية و الثالثة في السطر الثاني مع الخانة الثانية و الثالثة الموجودة تحتها في السطر الثالث. المثال الثالث
E |
F |
وضع عنوان خاص للجدول
إذا أردت وضع عنوان خاص للجدول, يمكنك كتابة العنوان بداخل الوسم
مع الإشارة إلى أنه يجب وضع هذا الوسم كأول وسم في الجدول. جدول فارغ من ثلاث خانات. في المثال التالي قمنا بوضع عنوان للجدول بواسطة الوسم
. Final semester marks...
جرب الكود
لتحرير النص الافتراضي أو إزالته من عنصر تحكم، انقر فوق عنصر التحكم، ثم قم بتحديث النص حسب الحاجة. تلميح: إذا لم تتمكن من رؤية النص بالكامل، فانقر فوق أحد مقابض التحكم واسحبها حتى تتمكن من قراءته كله. لا يمكن تحرير حجم عنصر التحكم والمسافة بينه وبين النص. تنسيق عنصر التحكم
بعد أن تقوم بإدراج خانة اختيار أو زر خيار، قد ترغب في التأكد من أنه يعمل بالطريقة التي تريدها. على سبيل المثال، قد ترغب في تخصيص المظهر أو الخصائص. ملاحظة: لا يمكن تعديل حجم زر الخيار داخل عنصر التحكم ولا المسافة بينه وبين النص المقترن به. لتنسيق عنصر تحكم، انقر ب زر الماوس الأيمن فوق عنصر التحكم، ثم انقر فوق تنسيق عنصر تحكم. في مربع الحوار تنسيق عنصر التحكم ، على علامة التبويب عنصر التحكم ، يمكنك تعديل أي من الخيارات المتوفرة:
محدد: يعرض زر خيار تم تحديده. غير محدد: يعرض زر خيار غير محدد. جدول من ثلاث خانات. في المربع ارتباط الخلية ، أدخل مرجع الخلية التي تحتوي على الحالة الحالية لزر الخيار. تُرجع الخلية المرتبطة رقم زر الخيار المحدد في مجموعة الخيارات. استخدم الخلية المرتبطة نفسها لجميع الخيارات في مجموعة ما. يُرجع زر الخيار الأول (أ 1)، ويرجع زر الخيار الثاني (أ 2)، و هكذا.
يمكن دمج خليتين أو أكثر في الصف نفسه أو العمود نفسه ضمن خلية واحدة. على سبيل المثال، يمكنك دمج عدة خلايا أفقياً لإنشاء عنوان جدول يمتد على أعمدة متعددة. حدد الخلايا التي تريد دمجها. ملاحظة: في حال عدم وجود حدود مرئية للخلايا في جدولك، قد تجد أن إظهار خطوط الشبكة قد يكون مفيداً. انقر فوق أدوات الجدول > تخطيط > عرض خطوط الشبكة. انقر بزر الماوس الأيمن فوق الخلايا المحددة، ثم انقر فوق دمج خلايا. هل تحتاج إلى مزيد من المساعدة؟
🏃♂️ 🗣 كل هذا التعب، 🛠 وفي الأخير جدول بلا حدود ؟! لا بد من حـل! لا تقلق فأنت في قسم HTML ، أنت فقط تنشئ هيكل الجدول! أما تحسين الجدول فهو من اختصاص CSS ، هل نسيتَ ذلك؟
وإن كنت في شك، فإن إضافة الحدود بسيطة جداً ، فلا شك أنك مازلت تذكر كود CSS المخصص لذلك! لا تنسـى زيارة درس إنشاء الحدود في CSS ففيه ما يـ…. ( لابأس إكتشفه بنسفك واتركنا مع الجداول). الطريقة هنا سهلة، فقط أضف هذه الشفيرة إلى ملف CSS أو إلى style في ملف HTML:
table /*إنشاء حدود للجدول { border-collapse: collapse; /* هاته الحدود ستجمع كل المحتوى ليبدو رائعاً */} td /* إنشاء حدود لكل خلايا الجدول... */ { border: 1px solid #A8A8A8; /* أحب اللون الرمادي في الحدود */}
علية
كريم
جمال
خديجة
جدول بالجدود
🔶 سـطــر الرأس
الآن بعد أن أصبح لدينا جدولاً بحدوده ، سنضيف له سطر العنوان. في المثال السابق كانت عدة أسماء ولم نبين صفاتها، لكن بإضافة سطر العنوان سنعرف لماذا وضعنا حميدو في العمود الأول ولم نضعه في العمود الثالث. سنعرف ذلك الآن، وسنكتب في العناوين "الناجحون" و "المستدركون" و "الراسبون". يتم إنشاء سطر العنوان بعلامة
< tr > كما فعلنا في الجداول السابقة ، ولكن الخلايا التي يحتوي عليها هذه المرة ، مؤطرة بعلامات
< th > وليست
< td >!
لنـــــرى:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
الناجحون | المستدركون | الراسبون |
رشيد | عليه | عبلة |
كمال | سميرة | عابد |
غانم | ميلود | رقية |
حميدو | علال | شهرزاد |
الناجحون
المستدركون
الراسبون
جدول بسطر الرأس
إضــافــة: كما تلاحظون ، قام متصفحك بكتابة نص خلايا الرأس بخط غليظ. هذا ما يمكن أن تراه عادة ، ولكن إذا كنت تريد فعل شيئ آخر، مثل تغيير لون خلفية خلايا الرأس والخط والحدود وما إلى ذلك، يمكنك أن تلجأ إلى استخدام CSS إنه يوفي بالغرض 👍
🔶 عنـوان الجـدول
في الحقيقة ينقصنا عنصر مهم في هذا الجدول، إنه العنوان. إن العنوان له أهمية بالنسبة للزائر، فهو يعلم بسرعة عن محتوى الجدول. المثال الموجود بين أيدينا يمثل لائحة لنتائج تلاميذ أحد الأقسام داخل مدرسة. ولكن بالنسبة للزائر سيشرد فكره حين يرى الجدول، لن يستطيع تحديد موضوعه ، ولن يعرف عن من يتحدث. إذن ماذا ينقصنا؟ ينقصنا عنوان الجدول طبعاً.
في كل سطر
< tr > تتم الإشارة إلى محتويات الخلايا المختلفة
< td >. بشكل تخطيطي ، يتم إنشاء جدول كما في الشكل التالي:
جدول يحتوي على 4 سطور و 12 خانة
نبدأ بالشــرح:
نقول السطـر
< tr > هو ما نراه في المثال مرسوم بشكل أفقي ◻️ والذي يضم ثلاث خانات.