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

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

نبدا على بركة الله

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

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

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

<style type="text/css">
.cnmutable {
    border-collapse:collapse;
    border-spacing:0;
}
.cnmutable img {
    width:125px;
    height:125px;
}
.cnmutable tr, .cnmutable th {
    border:1px solid #000;
    padding:5px 10px;
    text-align:center;
    width:125px;
        }
</style>
<table class="cnmutable">
<tr style="background:#F66">
<th>العنصر الأول</th>
<th>العنصر الثاني</th>
<th>العنصر الثالث</th>
</tr>
<tr style="background:#F66">
<th>العنصر الأول</th>
<th style="background:#3FC">العنصر الثاني</th>
<th>العنصر الثالث</th>
</tr>
<tr style="background:#fff">
<th><img src="http://2.bp.blogspot.com/-UlO34YtXU3g/UqkcO_r4x1I/AAAAAAAACbw/WKiYTsiLq8U/s1600/cnmuvideo.jpg"></img></th>
<th><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm2sO-KeORpzQtBZv3iNTtuMcer46AoMBc1WlSFBK66Eyq8qAd80MUKcyMuCFb-7vgat_L67DqJyhFPuCdfhQhXdFucj2N4cybgIAL7Dd44fnDLrR_IzkXLX8jSmTL5ucT7dkvg7yvNff2/s1600/xnshell.jpg"></img></th>
<th><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg05CWRHfNLCxVpEp-eQiNduC1JK1WmY-SMXqcfuZRSaoJg22Q3O3LrBr4e3xS5Qszfm1RZFOmn-xEKynTny2suR6-R4R_39Pyu79Vrk8U51IeL3BxQoRrWulRfUIw3L5rbJSVzjg7AjIU/s622/slidesubsc.jpg"></img></th>
</tr>
</table>

جزء الستايل

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

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

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

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

جزء الـ HTML

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

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

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

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

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

إضافة رابط	<a href="#">Name</a>
إضافة صورة	<img src="#" /></img>
إضافة صورة قابلة للضغط	<a href="#"><img src="#" /></img></a>

lمكان هذا الرمز # تضيف الرابط ومكان كلمة name تضيف أى كلمة تريد

ومكان هذا # الوجود في هذا الكود src="#" تضيف رابط الصورة

وطبعا هذا مثال لإضافة رابط داخل خانة

أو في المثال الاصلي ستجد الثلاث خانات الأخيرة تحتوي صور
أتمنى أن يكون الامر واضحاً وهذه مجرد فقط وضع قدمك على سلم التعامل مع الجداول

فابدع وأطلق لمخيلتك العنان

وبالتوفيق

201