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

تعتبر الجداول من الأشياء الهامة التي تساهم في عمل عرض جيد للكلمات والروابط والصور وتتعدد إستخداماتها لكن قليل من المدونين من يستخدمها والكثير يراها معقده ولا يفهم طريقة اعداداتها سنبسط طريقة عمل الجداول بأسهل شكل بحيث تتمكن من ادراجها بكل سهولة في مدونتك أو تصنع منها ادوات او أى شئ تريده البعض يظن أن الجداول هي فقط عمل جدول كتابي ولكن يمكن للجداول ان تصنع منها العديد من الاشياء لو نظرنا للصورة الخاصة بالموضوع لوجدنا جداول لمقارنات بين منتجات أو تصنيف يدخل بها رموز دول أو أسعار منتجات او يمكنك عمل بها أشياء اخرى مثل نتيجة أو جدول لدرجات الحرارة أو مواقيت الصلاة أو البومات للصور والروابط حتى التبادل الإعلاني والصور التي نستخدمها به هي جداول لذلك معرفة طريقة عملها مهم جداً لمدوني بلوجر
نبدا على بركة الله
هذا هو أبسط شكل منسق للجداول
العنصر الأول | العنصر الثاني | العنصر الثالث |
---|---|---|
العنصر الأول | العنصر الثاني | العنصر الثالث |
![]() |
![]() |
![]() |
وهذا هو الكود وسنقوم بشرحة
<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="http://3.bp.blogspot.com/-tzDbKKNwLVY/UqfW7ZfjxJI/AAAAAAAACbY/DzGGawOqYjI/s1600/xnshell.jpg"></img></th>
<th><img src="http://1.bp.blogspot.com/-2fCwWU35phE/UQdIvjEFveI/AAAAAAAAAZI/lxA8aYKsj5s/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="#" تضيف رابط الصورة
وطبعا هذا مثال لإضافة رابط داخل خانة
<th><a href="#">Name</a></th>
أو في المثال الاصلي ستجد الثلاث خانات الأخيرة تحتوي صور
أتمنى أن يكون الامر واضحاً وهذه مجرد فقط وضع قدمك على سلم التعامل مع الجداول
أتمنى أن يكون الامر واضحاً وهذه مجرد فقط وضع قدمك على سلم التعامل مع الجداول
فابدع وأطلق لمخيلتك العنان
وبالتوفيق
جميل جميل جميل لا اعرف اخي ما اقول لك فقد خانتني الكلمات خصوصا و انا اتذكر نفسي عندما كنت ابحث عن مثل هذا الدرس قبل 3 سنوات لكن بدون جدوى في المواقع العربية الى ان وجدته في موقع الماني و حتى بعد ان عرض الشرح في عذة مواقع عربية لم يكن بالبساطة و التركيز التي عرضته لا يسعني الا ان اقول لك سارفع لك القبعة احتراما رغم اني لا احب ارتداء القبعات.
ردحذفأخي الحبيب سعيد
حذفاشتقت لتعليقاتك المشجعة كثيراً يا طيب
أشكرك شكراً جزيلا على تلك الكلمات الطيبة
التي لا أستحقها
سعدت بمرورك كثيراً أخي الحبيب
تحياتي لك
مبدع كعادتك ماشاء الله عليك
ردحذفالموضوع مهم جدا وحصري كما قال الأخ سعيد خربوش
لايوجد مثل هذا الموضوع في المحتوى العربي أهنيك على تميزك أخي الغالي عمرو
وأشكرك على شرحك المبسط لمن ليس لديه معرفة بالتعامل مع الأكواد مثلي
الله يجزاك بالخير والعافية كم كنت أنتظر مثل هذا الشرح لهذه الإضافة
دمت ودام تميزك وسلمت يداك لك ودي واحترامي في أمان الله
أخي الغالي بدر سعيد أن الشرح نال اعجابك وبإذن الله يكون مفيد في مكتبة الروابط التي كنت تعدها
حذفوجزيل الشكر على هذا المرور العطر أخي الحبيب
ربي يسلمك من كل سوء
ودمت في حفظ الله
تظهر قيمة هذا الشرح في وقت الحاجة اليه =a
ردحذفشكرا :]
وهذا الهدف من المدونة ان تكون بها تلبية حاجة المدونين شاكر لمرورك يا طيب =r
حذفالسلام أستادي كن مدون أريد أن أستفسرك عن سؤال بخصوص مدونتي أريد حاليا أن أنشئ جدول أضع فيه ترتيب المؤقت لبطولة كرة القدم يعني النقط و عدد الفوز و التعادل و الخسارة وعدد الأهداف و كدلك جدول لترتيب الهذافين و حدول لمباريات الحالية يكون منسقة بستاسل و أيقونات الفرق هل ممكن أن تشرح لي طريقة عمل هذه الخاصية جازاك اله خيرا elbtola.blogspot.com
ردحذفوعليكم السلام ورحمة الله وبركاته
حذفأخي الفاضل مبدأ الجداول واحد كل ما عليك هو تطبيق الموضوع وزيادة الخانات بحسب ما تريد وتغيير الألوان
ما شاء الله لا قوة إلا بالله
ردحذفمبدع دوما أخي المبارك ........ إلى الأمام دائما بإذن الله.
السلام عليكم
ردحذفجميل لكن لددي استفتار
اريد ان اصنع حدول يقوم الزائر بالتسجيل فية كثل عملية حجز الخانات
حدول مكون من 20 مربع وكل شخص يدخل سولف يختار او يحجز مربع محددد - هو عبارة حجز امان وكل مربع يمثل مكان معين هذى الفكرة
خل استطيع عمل ذلك
وعليكم السلام ورحمة الله وبركاته
حذفانت لا تحتاج جدول اخي انت تحتاج اسكريبت يسمح بالتسجيل وتحديد الخانات تحت مبرمج جافا سكريبت
ليس هذا مجالي
جزاك الله خيرا.
ردحذفاخي ان لم يكن هناك مانع، اريد ان اضيف فيديو يوتوب مكان الصورة فماذا افعل و جزيت خيرا على مجهوداتك.
وجزاكم الله بالمثل
حذفبدلا من اضافة كود الصورة أضف كود فديو اليوتيوب
ويمكنك الحصول على الكود من اسفل الفديو في اليوتيوب من مشاركة ثم تضمين