الجدول يفيد في كثير من الحالات كأنشاء جدول يحوي درجات الطلاب كمثل هذا الجدول في الصورة التالية
يكمن عمل مثل هذا الشكل بالوسوم التالية
بداية نكتب الوسمين
شاهد الصورة التالية ما داخل الأطار الأحمر لتوضح لك ما هو الصف الذي اعنيه
ام العامود فهذا هو
و الوسم الخاص بالأعمدة يوضع ما بين وسمين الصف على هذا الشكل
لتقريبها لك اكثر في الصورة التالية الصف محدد باللون الاخضر و الأعمدة التي على نفس الصف محددة باللون الأحمر
الآن نأتي إلى الحدود في الجدول كيف وضعها فأنت عند كتابة الجدول يأتي على الصورة التالية
لوضع الحدود نضع في الوسم <table> عبارة
سأعطيك مثال تطبيقي على فعلناه
بداية نكتب الوسمين
<table></table>
والذي يعني هيئة الجدول ونكتب داخله مجموعة من الوسوم والتي تحدد الصفوف و الأعمدة
مثلاً لكتابة صف من التسميات نكتب الوسمين
<tr></tr>
يمكن تكرار هذين الوسمين لصنع مجموعة الصفوف شاهد الصورة التالية ما داخل الأطار الأحمر لتوضح لك ما هو الصف الذي اعنيه
<tr>
<td></td>
<tr>
ويمكن تكرار الاعمدة داخل وسمين الصف لكن للتنويه الاعمدة تكون داخل الصف الواحد , فكل صف له اعمدة عندما تنشاً عدة صفوف داخلها أعمدة لتقريبها لك اكثر في الصورة التالية الصف محدد باللون الاخضر و الأعمدة التي على نفس الصف محددة باللون الأحمر
لوضع الحدود نضع في الوسم <table> عبارة
border="1"
ليصبح الوسم بعد ذلك على الشكل التي
<table border="1">
يمكن اضافة شيء آخر بعد كود الحدود للتحكم بعرض الجدول بالكامل و الذي هو
width="500px"
يمكنك التعديل على العدد لضبط العرض , الكود السبق تضعه اذا اردت بعد كود الحدود لكن بعد ترك مسافة بينهم سأعطيك مثال تطبيقي على فعلناه
قم بنسخ المثال السابق و ضعه في مفكرة و أحفظه كما تعلمنا في السابق و عند فتح الملف على المتصفح سيظهر كما في هذه الصورة
إلى الآن نكون قد انتهينا من الجزء الأول شرح الجداول
السلام عليكم و رحمة الله و بركاته
الكاتب : OSAMA ALMOUSA
منشأ مواقع مهتم في جديد التقنية و المعلومات دارس عدة لغات برمجة ومن خلال هذا الموقع اقدم شروحات و دروس أتمنى ان تعجبكم
