مساحة إعلانية

الخميس، 19 ديسمبر، 2013

الخميس، 19 ديسمبر، 2013

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

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

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

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

وهذا هو الكود وسنقوم بشرحة
<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>
أو في المثال الاصلي ستجد الثلاث خانات الأخيرة تحتوي صور
 أتمنى أن يكون الامر واضحاً وهذه مجرد فقط وضع قدمك على سلم التعامل مع الجداول
فابدع وأطلق لمخيلتك العنان
وبالتوفيق

هناك 13 تعليقًا:

  1. جميل جميل جميل لا اعرف اخي ما اقول لك فقد خانتني الكلمات خصوصا و انا اتذكر نفسي عندما كنت ابحث عن مثل هذا الدرس قبل 3 سنوات لكن بدون جدوى في المواقع العربية الى ان وجدته في موقع الماني و حتى بعد ان عرض الشرح في عذة مواقع عربية لم يكن بالبساطة و التركيز التي عرضته لا يسعني الا ان اقول لك سارفع لك القبعة احتراما رغم اني لا احب ارتداء القبعات.

    ردحذف
    الردود
    1. أخي الحبيب سعيد
      اشتقت لتعليقاتك المشجعة كثيراً يا طيب
      أشكرك شكراً جزيلا على تلك الكلمات الطيبة
      التي لا أستحقها
      سعدت بمرورك كثيراً أخي الحبيب
      تحياتي لك

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

    ردحذف
    الردود
    1. أخي الغالي بدر سعيد أن الشرح نال اعجابك وبإذن الله يكون مفيد في مكتبة الروابط التي كنت تعدها
      وجزيل الشكر على هذا المرور العطر أخي الحبيب
      ربي يسلمك من كل سوء
      ودمت في حفظ الله

      حذف
  3. تظهر قيمة هذا الشرح في وقت الحاجة اليه =a
    شكرا :]

    ردحذف
    الردود
    1. وهذا الهدف من المدونة ان تكون بها تلبية حاجة المدونين شاكر لمرورك يا طيب =r

      حذف
  4. السلام أستادي كن مدون أريد أن أستفسرك عن سؤال بخصوص مدونتي أريد حاليا أن أنشئ جدول أضع فيه ترتيب المؤقت لبطولة كرة القدم يعني النقط و عدد الفوز و التعادل و الخسارة وعدد الأهداف و كدلك جدول لترتيب الهذافين و حدول لمباريات الحالية يكون منسقة بستاسل و أيقونات الفرق هل ممكن أن تشرح لي طريقة عمل هذه الخاصية جازاك اله خيرا elbtola.blogspot.com

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أخي الفاضل مبدأ الجداول واحد كل ما عليك هو تطبيق الموضوع وزيادة الخانات بحسب ما تريد وتغيير الألوان

      حذف
  5. ما شاء الله لا قوة إلا بالله
    مبدع دوما أخي المبارك ........ إلى الأمام دائما بإذن الله.

    ردحذف
  6. السلام عليكم
    جميل لكن لددي استفتار
    اريد ان اصنع حدول يقوم الزائر بالتسجيل فية كثل عملية حجز الخانات
    حدول مكون من 20 مربع وكل شخص يدخل سولف يختار او يحجز مربع محددد - هو عبارة حجز امان وكل مربع يمثل مكان معين هذى الفكرة
    خل استطيع عمل ذلك

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      انت لا تحتاج جدول اخي انت تحتاج اسكريبت يسمح بالتسجيل وتحديد الخانات تحت مبرمج جافا سكريبت
      ليس هذا مجالي

      حذف
  7. جزاك الله خيرا.
    اخي ان لم يكن هناك مانع، اريد ان اضيف فيديو يوتوب مكان الصورة فماذا افعل و جزيت خيرا على مجهوداتك.

    ردحذف
    الردود
    1. وجزاكم الله بالمثل
      بدلا من اضافة كود الصورة أضف كود فديو اليوتيوب
      ويمكنك الحصول على الكود من اسفل الفديو في اليوتيوب من مشاركة ثم تضمين

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©