تعتبر الجداول من الأشياء الهامة التي تساهم في عمل عرض جيد للكلمات والروابط والصور وتتعدد إستخداماتها لكن قليل من المدونين من يستخدمها والكثير يراها معقده ولا يفهم طريقة اعداداتها سنبسط طريقة عمل الجداول بأسهل شكل بحيث تتمكن من ادراجها بكل سهولة في مدونتك أو تصنع منها ادوات او أى شئ تريده البعض يظن أن الجداول هي فقط عمل جدول كتابي ولكن يمكن للجداول ان تصنع منها العديد من الاشياء لو نظرنا للصورة الخاصة بالموضوع لوجدنا جداول لمقارنات بين منتجات أو تصنيف يدخل بها رموز دول أو أسعار منتجات او يمكنك عمل بها أشياء اخرى مثل نتيجة أو جدول لدرجات الحرارة أو مواقيت الصلاة أو البومات للصور والروابط حتى التبادل الإعلاني والصور التي نستخدمها به هي جداول لذلك معرفة طريقة عملها مهم جداً لمدوني بلوجر
نبدا على بركة الله
هذا هو أبسط شكل منسق للجداول
| العنصر الأول | العنصر الثاني | العنصر الثالث |
|---|
| العنصر الأول | العنصر الثاني | العنصر الثالث |
|---|
 |  |  |
|---|
وهذا هو الكود وسنقوم بشرحة
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="#" تضيف رابط الصورة وطبعا هذا مثال لإضافة رابط داخل خانة أو في المثال الاصلي ستجد الثلاث خانات الأخيرة تحتوي صور
أتمنى أن يكون الامر واضحاً وهذه مجرد فقط وضع قدمك على سلم التعامل مع الجداول فابدع وأطلق لمخيلتك العنان وبالتوفيق
Yet again another killer dress from She Inside. This particular number is so utterly breezy, even with it's long sleeves, that it's a sublime choice for those summer nights (last three words sung like in Grease... hold the niiiii-hiiiights). You may have seen a little sneak peek of this post on my instagram earlier this week! I spent my Monday doing some styling work & then wandered over to Messina and bought my first ever 'take home tub' of gelato goodness before heading home for the day. Let's just say I got three flavours in the tub and there is now a gaping space where the salted caramel/white chocolate flavour once was.
Photos: Nicola Ramsey emma
|
wearing: Dress - Pink Stitch, shoes - RMK, shades - Oscar Wylee, watch - The Horse & rented grad robe!
