مقدمة
- لمن هذه المقالة هى للاشخاص المهتمين بمقالات نشر النتائج هنا ويسألون باستمرار عن زيادة الاعمدة او دمج خلايا ولا تعتبر مرجع لمن اراد تعلم html بإتقان
- لابد ان تعرف ان سكربتات النتائج مبنية على html ومعها جافا سكربت وعليك فهم ومراعاة الآتي :
- لغة html لغة صماء تستخدم لعرض نصوص وكائنات بشكل صامت غير تفاعلي.
- لإضافة روح وتفاعل للغة html تستخدم معها لغة جافا سكربت وهى حقاً رائعة وممتعة
- في هذه المقالة سأشرح بشكل مختصر فكرة بناء الجدول وما قد احتاج الى ذكره في HTML.
الإعداد لفهم الامر
- كيفية بناء صفحة ستحتاج الى اي برنامج نصوص بسيط مثل notepad وهو متوفر بشكل تلقائي في ويندوزقم بفتح البرنامج واكتب فيه
<html>
<body>
<center> اهلا هذه صفحة لاعداد جدول </center>
</body>
</html>
- من قائمة ملف اختر حفظ او اضغط ctrl+ s
- في نافذة حفظ باسم حدد المكان سطح المكتب واسم الملف كما يلي بالضبط : index.html
- اترك نوت باد مفتوح سنحتاج اليه
- اذهب لسطح المكتب ستجد صفحة انترنت باسم index افتحها لترى نتيجة عملك
- اذا اغلقت نود باد لاي سبب واردت العودة انقر على index يمين وافتحها باستخدام المفكرة notepad
- اذا احببت الفكرة فيمكن تجربة الامر باستخدام ++Notepad او باستخدام VS Code متوفران على الانترنت بشكل مجاني وسيجعلان الامر ممتع وسهل .
فهم الامور المتعلقة بالاوامر ( الاوسمة )
- <html> وهذا الامر أو تعليمة او كود في اللغة تسمى وسم وتوضع بين <>.
- والوسم منه وسم فردي مثل <br> ويعني انه مكتفي بذاته وتأثيره يؤثر في العبارات التالية له ولا يمتد فلن تحتاج لإغلاقه مثل <br/>.
- وهناك وسم زوجي يحتاج اغلاق حتى يتوقف تأثيره لانه ممتد مثلا <p> لابد من اغلاقه اذا اردت ايقاف تأثيره <p/>.
- العنصر br كان لادراج سطر وانتهى الامر فلن يدرج الا سطر واحد وتحتاج لتكراره اذا اردت سطور اخرى
- العنصر p كان لإدراج فقرة فكل ما يليله من نصوص سيكون تابع لنفس الفقرة واذا اردت ايقاف تأثيره او إدراج فقرة اخرى مستقلة عليك اغلاقه.
- اذا تم فتح عناصر كثيرة بداخل بعضها و تحتاج الى اغلاق فأول ما تم فتحه هو اخر مايغلق.
- لاحظ في الصورة أول المقالة اول ما فتح يغلق اخر ولا تتقاطع اي اوسمة مع بعضها يشبه فكرة الاقواس في المعادلة الرياضية اذا صح التعبير.
اعداد جدول
نقاط مهمة اذا فهمت ما سبق فعليك فهم التالي:
- عند ادراج جدول نعطي امر لرسم جدول ثم امر لادراج الصف ثم الاعمدة وبما اننا بدأنا بفتح الجدول ثم صف ثم عمود سيكون الاغلاق عمود ثم صف ثم جدول وبذلك ستكتشف ان اوامر الاعمدة داخل الصف والصف داخل الجدول
- نضرب مثال اريد تصميم جدول به العمود الاول يحتوي على رقم والثاني اسم الطالب والثالث نتيجته
- فستكون الاوامر بالترتيب ادرج جدول ثم امر صف ثم ثلاث اوامر للاعمدة
- ولاضافة الصف الثاني يتم كتابة امر للصف الثاني بعد غلق الصف الاول وقبل غلق الجدول
وبالمثال يتضح الكلام
| رقم الطالب | اسم الطالب | النتيجة |
| 1 | فلان | 10 |
والاوامر كالآتي :
<table border="1">
<tr>
<td>رقم الطالب</td>
<td>اسم الطالب</td>
<td>النتيجة</td>
</tr>
<tr>
<td>1</td>
<td>فلان</td>
<td>10</td>
</tr>
</table>
انسخ الاكواد التالية الموجودة داخل مربع النص واستبدلها بما كتبته قبل ذلك في notepad ثم احفظ واعد تحميل صفحة index الموجودة على سطح المكتب
- لاحظ ظهور الوسم <-- جملة --!> وهو وسم لجعل الجملة تعليق يظهر للمبرمج وقت التحرير ولا تظهر عند استعراض صفحة الويب.
- الان يمكن العودة الى سكربت النتائج الذي ترغب في تعديله واستخدام نفس الاسلوب
- اقترح عليك نسخ الاوامر ووضعها في نوت باد المفكرة والتجربة عليها الى ان تصل الى الشكل النهائي ثم اعادة نقلها الى حاويات البرمجة في جوجل سكربت ومع ملاحظة عند تعديلك على سطح المكتب لن ترى النتائج وانا سترى الشكل النهائي لها
ابرز الاوامر المستخدمة مع الجدول
لعرض جدول في الصفحة نستخدم الوسوم التالية:
- <table> </table> هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل جدول.
- <tr> </tr> تستخدمه لإضافة سطر في الجدول.
- <th> </th> تستخدمه لإضافة خانة في السطر تمثل عنوان، أي النص الذي تضعه فيها يظهر بخط عريض و في المنتصف.
- <td> </td> تستخدمه لإضافة خانة في السطر تمثل معلومة عادية، أي النص الذي تضعه فيها يظهر كنصر عادي.
- <caption> </caption>إذا أردت وضع عنوان خاص للجدول، يمكنك كتابة العنوان بداخل الوسم
- border يمكنك استخدامها لإظهار خطوط الجدول، الرقم الذي نعطيه لها يمثل حجم الخطوط التي سيتم وضعها بين الأسطر و الأعمدة.
- width يمكنك استخدامها لتحديد عرض الجدول بدل جعل المتصفح يفعل ذلك، الرقم الذي تعطيه لها يمثل عرض الجدول.
- height يمكنك استخدامها لتحديد طول الجدول بدل جعل المتصفح يفعل ذلك، الرقم الذي تعطيه لها يمثل طول الجدول.
- colspan نستخدمها لدمج الخانات الموجودة على نفس السطر.
- rowspan نستخدمها لدمج الخانات الموجودة على أكثر من سطر.
الخاتمة
- حاولت ان اعطيك فكرة كيفية بناء الجدول بشكل عام وعليك التجربة حتى تفهمها
- لم ارد ان اخوض في الامر بالتفصيل حتى لا تمل منه ولن تتعلم الا بالتجربة
- استخدمت في المثال السمة align="center" لجعل محتوى الخلية في الوسط
- هذا رابط ممتع لشرح جداول html
دمتم بخير
قد يعجبك ايضا