نظرة على طريقة عمل الجداول

create tables in an HTML and CSS
تعتبر الجداول من الأشياء الهامة التي تساهم في عمل عرض جيد للكلمات والروابط والصور وتتعدد إستخداماتها لكن قليل من المدونين من يستخدمها والكثير يراها معقده ولا يفهم طريقة اعداداتها سنبسط طريقة عمل الجداول بأسهل شكل بحيث تتمكن من ادراجها بكل سهولة في مدونتك أو تصنع منها ادوات او أى شئ تريده البعض يظن أن الجداول هي فقط عمل جدول كتابي ولكن يمكن للجداول ان تصنع منها العديد من الاشياء لو نظرنا للصورة الخاصة بالموضوع لوجدنا جداول لمقارنات بين منتجات أو تصنيف يدخل بها رموز دول أو أسعار منتجات او يمكنك عمل بها أشياء اخرى مثل نتيجة أو جدول لدرجات الحرارة أو مواقيت الصلاة أو البومات للصور والروابط حتى التبادل الإعلاني والصور التي نستخدمها به هي جداول لذلك معرفة طريقة عملها مهم جداً لمدوني بلوجر

نبدا على بركة الله
هذا هو أبسط شكل منسق للجداول

العنصر الأولالعنصر الثانيالعنصر الثالث
العنصر الأولالعنصر الثانيالعنصر الثالث

وهذا هو الكود وسنقوم بشرحة


style="background:#F66">














العنصر الأولالعنصر الثانيالعنصر الثالث
العنصر الأولالعنصر الثانيالعنصر الثالث

جزء الستايل

الجزء الأزرق باكمله من البداية للنهاية هو الجزء الذي يتم تحديد فيه التنسيق الرئيسي للجدول
ما يهمنا بداخله هي الأكواد المعلمة بالاحمر
أول كودين هم حجم الصور التي ستوضع في الجدول العرض 125 والإرتفاع 125 بحيث يتم تصغير أو تكبير جميع الصور بهذا الشكل يمكن تغيير القيم كما تشاء أو احذف الجزء البرتقالي بما فيه أكواد العرض والطول لتصبح الصور تتخذ حجمها الطبيعي

بالنسبة لهذا الكود border:1px solid #000; الرقم 1 هو حجم الإطار الذي يفصل بين الخانات واللون #000 هو لو الإطار

أما الكود الاخير width:125px; فهو يعبر عن عرض الخانات

هذا هو الجزء الأساسي في التنسيق وطبعا من له خبره في Css سيستطيع التعامل معه بشكل أفضل

جزء الـ HTML


يتكون الجدول من الوسم



ببساطة الوسم = بداية سطر حتى وسم الإغلاق هنا ينتهي السطر
أما الوسم  فهو يساوي خانة بمعنى أن ما كتبناه هو سطر به خانة واحده
لو كررنا بهذا الشكل



 

أصبح هكذا سطر يحتوي ثلاث خانات 
 


 




 

هكذا أصبح لدينا سطرين كل منهما يحتوي ثلاث خانات
لو نظرنا للمثال الموجود سنجده أنه أيضا جدول مكون من ثلاث أسطر كل منهما يحتوي ثلاث خانات
طبعا يمكن الزيادة في عدد الخانات لكن هناك جزء زائد وهو
style="background:#F66"
هذا الجزء هو لون الخلفية ان وضعناه بعد وسم السطر سيصبح بهذا الشكل
 #F66">
معناه أن هذا السطر باكمله سيصبح بهذا اللون #F66
وبالتالي يمكنك التلاعب بلون كل سطر

أما لو وضعنا نفس الكود ولكن بعد وسم أحد الخانات بهذا الشكل  فيصبح
#3FC">  
معناه أن تلك الخانة وحدها ستصبح بلون مختلف وهو ما نراه في الجودل
أن الخانة الوسطى من السطر السطر الثاني لونها مختلف

يمكنك تكرار أى عدد من الأسطر والخانات لتنشئ جدولاً

لكن كيف نحدد ما بداخل الخانة هل هو نص أم رابط أم صورة أم صورة قابلة للضغط ؟؟

ببساطة اضف بين كود الخانة أحد هذه الأكواد

إضافة رابطName
إضافة صورة
إضافة صورة قابلة للضغط

lمكان هذا الرمز # تضيف الرابط ومكان كلمة name تضيف أى كلمة تريد
 ومكان هذا # الوجود في هذا الكود src="#" تضيف رابط الصورة
وطبعا هذا مثال لإضافة رابط داخل خانة
أو في المثال الاصلي ستجد الثلاث خانات الأخيرة تحتوي صور
 أتمنى أن يكون الامر واضحاً وهذه مجرد فقط وضع قدمك على سلم التعامل مع الجداول
فابدع وأطلق لمخيلتك العنان
وبالتوفيق