كيفية إضافة جدول "table" إلى مدونة بلوجر بأكواد HTML و CSS: دليل شامل

يُعد إدراج الجداول في المحتوى من بين الأدوات الأساسية التي تساهم في تنظيم وعرض البيانات بشكل منسق وسهل الفهم. في مدونات "بلوجر"، رغم بساطة النظام، يمكنك إضافة جداول محسّنة واحترافية باستخدام أكواد HTML وCSS. هذا المقال يقدم لك دليلًا شاملاً حول كيفية إضافة جدول إلى مدونتك على بلوجر، مع شرح تفصيلي لأكواد HTML وCSS وتطبيقاتها المختلفة لتحسين مظهر الجدول وجعله أكثر احترافية وجاذبية

🔁 لماذا قد تحتاج إلى إدراج جدول في مدونتك؟

تساهم الجداول في تحسين تجربة المستخدم وتسهيل فهم المعلومات المعقدة، خصوصًا في المحتويات التي تتضمن مقارنات، بيانات إحصائية، قوائم، أو أية بيانات منظمة. من أهم الفوائد التي يمكن أن يحققها إدراج جدول في مدونة "بلوجر" ما يلي:

⬅️- تنظيم البيانات: يجعل البيانات مرتبة ومنظمة بشكل يسهل على القارئ استيعابها.

⬅️- جعل المحتوى أكثر احترافية: الجداول تضفي لمسة احترافية على المحتوى، خاصة إذا كانت مخصصة بتصميم جذاب.

⬅️- تحسين تجربة المستخدم: من خلال عرض البيانات بطريقة بصرية منظمة وسهلة القراءة.

⬅️- تعزيز تحسين محركات البحث (SEO): يمكن للجداول أن تسهم في تحسين هيكل المحتوى، مما يجعل محركات البحث تفهمه وتعرضه بشكل أفضل في النتائج.

🔁كيف يمكنك إضافة جدول إلى مدونة بلوجر؟

إدراج جدول في "بلوجر" يعتمد بشكل أساسي على أكواد HTML لتحديد هيكل الجدول، بينما تُستخدم أكواد CSS لتصميمه وتخصيص مظهره. هناك خطوتان أساسيتان لإضافة جدول إلى مدونتك:

📌 إضافة HTML للجدول:

⬅️1. انتقل إلى "لوحة التحكم" في حساب بلوجر.

⬅️2. اختر "مشاركة جديدة" أو افتح مشاركة موجودة تريد تعديلها.

⬅️3. انتقل إلى "وضع HTML"في محرر النصوص (بدلًا من وضع التأليف العادي أو وضع الإنشاء).

⬅️4. الصق كود HTML وCSS الذي ترغب في إضافته.

⬅️5. عد إلى وضع التأليف العادي أو وضع الإنشاء لترى الجدول الذي أنشأته، ومن ثم يمكنك كتابة ما تريد داخل الجدول الذي قمت بتحديد صفوفه واعمدته مسبقاً أثناء وضع الكود.

⬅️6. بعد الانتهاء من التعديلات، انقر على "نشر"

🆎كود HTML

  <table> <thead> <tr> <th>العمود الأول</th> <th>العمود الثاني</th> <th>العمود الثالث</th> </tr> </thead> <tbody> <tr> <td>البيانات 1</td> <td>البيانات 2</td> <td>البيانات 3</td> </tr> <tr> <td>البيانات 4</td> <td>البيانات 5</td> <td>البيانات 6</td> </tr> <tr> <td>البيانات 7</td> <td>البيانات 8</td> <td>البيانات 9</td> </tr> </tbody> </table> نسخ الكود

⬅️شكل الجدول في وضع الإنشاء 

📌2. إضافة CSS لتصميم الجدول:

لتحسين مظهر الجدول باستخدام CSS، يمكنك إضافة الكود التالي في مربع HTML أيضاً.

  <style> table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: left; border: 1px solid #ddd; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f9f9f9; } tr:hover { background-color: #f1f1f1; } </style> نسخ الكود 

⬅️شرح الكود:

📀- <table>: تحدد بداية ونهاية الجدول.

📀- <thead>: تشير إلى رأس الجدول، وهو المكان الذي توجد فيه عناوين الأعمدة.

📀- <tr>: يشير إلى صف في الجدول. يوجد صف داخل رأس الجدول، وصفوف داخل جسم الجدول.

📀- <th>: يستخدم لعنوان العمود في رأس الجدول.

📀- <td>: يمثل خلية بيانات داخل صفوف الجدول.

⬅️شرح CSS:

📀- table { width: 100%; }: يجعل الجدول يمتد ليشغل عرض الصفحة بالكامل. يمكنك تغير النسبة لتغير عرض الجدول

📀- border-collapse: collapse;: يُزيل الفراغات بين الخلايا ويجعل الجدول متماسكًا.

📀- th, td { padding: 10px; }: يحدد المسافة الداخلية بين النص وحدود الخلية لجعل الجدول أكثر وضوحًا.

📀- nth-child(even): يضيف لونًا مميزًا للصفوف الزوجية لتسهيل قراءة البيانات.

📀- hover: يغير لون الصف عند تمرير المؤشر فوقه لجعله أكثر تفاعلية.

بعد إدخال الكود في محرر Blogger، يمكنك حفظ ونشر المقال أو الصفحة وستظهر الجدول بالتصميم المخصص.

🔁كيفية التحكم في الصفوف والأعمدة

التحكم في الصفوف والأعمدة في الجداول باستخدام أكواد HTML وCSS يتيح لك القدرة على تخصيص الجداول وتعديلها بناءً على احتياجات المحتوى. في هذا الشرح، سنوضح كيفية إضافة وحذف الصفوف والأعمدة بسهولة.

📌التحكم في الصفوف والأعمدة باستخدام HTML

⬅️1. إضافة صفوف جديدة

لإضافة صف جديد في الجدول، يجب إضافة كود HTML الخاص بالصف داخل علامة <tbody> إذا كنت تعمل على صفوف البيانات.

على سبيل المثال، إذا كان لديك جدول بسيط يحتوي على ثلاثة صفوف، يمكنك إضافة صف رابع كما يلي:

🆎قبل الإضافة

  <table> <thead> <tr> <th>العنوان الأول</th> <th>العنوان الثاني</th> <th>العنوان الثالث</th> </tr> </thead> <tbody> <tr> <td>البيانات 1</td> <td>البيانات 2</td> <td>البيانات 3</td> </tr> <tr> <td>البيانات 4</td> <td>البيانات 5</td> <td>البيانات 6</td> </tr> </tbody> </table> نسخ الكود :

🆎بعد إضافة الصف الجديد:

<table> <thead> <tr> <th>العنوان الأول</th> <th>العنوان الثاني</th> <th>العنوان الثالث</th> </tr> </thead> <tbody> <tr> <td>البيانات 1</td> <td>البيانات 2</td> <td>البيانات 3</td> </tr> <tr> <td>البيانات 4</td> <td>البيانات 5</td> <td>البيانات 6</td> </tr> <tr> <td>البيانات 7</td> <td>البيانات 8</td> <td>البيانات 9</td> </tr> </tbody> </table> نسخ الكود 

في هذا المثال، أضفنا صفًا جديدًا يحتوي على "البيانات 7، البيانات 8، البيانات 9".

بحيث يصبح البيان 1,4,7 تحت العنوان الأول 

و البيان 2,5,8 تحت العنوان الثانى 

والبيان 3,6,9 تحت العنوان الثالث

⬅️2. حذف صفوف

لحذف صف من الجدول، كل ما عليك فعله هو إزالة الكود الخاص بهذا الصف. على سبيل المثال، لحذف الصف الثاني في المثال السابق:

🆎قبل الحذف:

<tr> <td>البيانات 4</td> <td>البيانات 5</td> <td>البيانات 6</td> </tr> نسخ الكود 

🆎بعد الحذف:

ما عليك سوى إزالة كود الصف بالكامل من الجدول، ليصبح لديك جدول بصفين فقط:

  <table> <thead> <tr> <th>العنوان الأول</th> <th>العنوان الثاني</th> <th>العنوان الثالث</th> </tr> </thead> <tbody> <tr> <td>البيانات 1</td> <td>البيانات 2</td> <td>البيانات 3</td> </tr> <tr> <td>البيانات 7</td> <td>البيانات 8</td> <td>البيانات 9</td> </tr> </tbody> </table> نسخ الكود 

⬅️3. إضافة أعمدة جديدة

إضافة عمود جديد تعني أنك بحاجة إلى تعديل كل الصفوف في الجدول. على سبيل المثال، إذا كنت ترغب في إضافة عمود رابع، ستحتاج إلى إضافة خلية (<td>) إضافية لكل صف:

🆎قبل الإضافة:

  <table> <thead> <tr> <th>العنوان الأول</th> <th>العنوان الثاني</th> <th>العنوان الثالث</th> </tr> </thead> <tbody> <tr> <td>البيانات 1</td> <td>البيانات 2</td> <td>البيانات 3</td> </tr> <tr> <td>البيانات 4</td> <td>البيانات 5</td> <td>البيانات 6</td> </tr> </tbody> </table> نسخ الكود

🆎بعد إضافة العمود الجديد:

  <table> <thead> <tr> <th>العنوان الأول</th> <th>العنوان الثاني</th> <th>العنوان الثالث</th> <th>العنوان الرابع</th> </tr> </thead> <tbody> <tr> <td>البيانات 1</td> <td>البيانات 2</td> <td>البيانات 3</td> <td>البيانات 4</td> </tr> <tr> <td>البيانات 5</td> <td>البيانات 6</td> <td>البيانات 7</td> <td>البيانات 8</td> </tr> </tbody> </table> نسخ الكود

⬅️4. حذف أعمدة

لحذف عمود، يجب إزالة الخلايا المرتبطة بهذا العمود من جميع الصفوف. على سبيل المثال، إذا كنت تريد حذف العمود الثالث:

🆎قبل الحذف:

  <td>البيانات 3</td> <td>البيانات 6</td> نسخ الكود

🆎بعد الحذف: قم بإزالة الخلية من كل الصفوف:

<table> <thead> <tr> <th>العنوان الأول</th> <th>العنوان الثاني</th> </tr> </thead> <tbody> <tr> <td>البيانات 1</td> <td>البيانات 2</td> </tr> <tr> <td>البيانات 4</td> <td>البيانات 5</td> </tr> </tbody> </table> نسخ الكود

 🔁استراتيجيات تحسين تجربة المستخدم باستخدام الجداول

عند إضافة الجداول إلى مدونتك، هناك بعض النقاط التي يجب مراعاتها لتحسين تجربة المستخدم:

⬅️1. التأكد من ملاءمة الجداول للأجهزة المحمولة: من المهم أن يكون الجدول قابلًا للعرض بشكل جيد على الهواتف المحمولة. يمكنك استخدام أكواد CSS لتقليص حجم الجدول أو استخدام مكتبات خارجية مثل "Bootstrap" لعمل جداول مرنة (responsive).

⬅️2. استخدام تصميم بسيط: لا تفرط في استخدام الألوان أو التزيينات في الجدول. الجدول البسيط والمباشر يكون عادةً أسهل على المستخدمين للقراءة.

⬅️3. تخصيص الجدول بناءً على المحتوى: اجعل تصميم الجدول يعكس موضوع مدونتك أو التصميم العام للموقع. الألوان والتنسيق يمكن أن يعززا الانسجام بين الجداول والمحتوى.

⬅️4.استخدام رؤوس أعمدة واضحة: استخدم رؤوس أعمدة تفسر بشكل جيد البيانات المدرجة في الجدول، مما يساعد في تحسين فهم القارئ للمحتوى.

⬅️5. تقسيم الجداول الكبيرة: إذا كان لديك الكثير من البيانات، من الأفضل تقسيمها إلى عدة جداول صغيرة بدلاً من جدول واحد كبير حتى لا يربك القارئ.

🔁تعزيز تحسين محركات البحث (SEO) من خلال الجداول

من الفوائد الإضافية لاستخدام الجداول هو تأثيرها على تحسين محركات البحث (SEO). إليك كيفية تحقيق ذلك:

⬅️1. الكلمات المفتاحية في رؤوس الأعمدة: تأكد من استخدام كلمات مفتاحية ذات صلة بموضوعك في رؤوس الأعمدة أو في خلايا الجدول. هذا يساعد محركات البحث في فهم موضوع الجدول وتصنيفه بشكل أفضل.

⬅️2. سهولة التنقل: استخدام الجداول لتنظيم البيانات يجعل المحتوى أكثر هيكلية وسهولة في الفهم، مما يساعد في تحسين معدل بقاء المستخدمين في الصفحة ويعزز تجربة المستخدم، وهو أمر إيجابي في نظر محركات البحث.

⬅️3.البيانات المنظمة: عندما يتم تنظيم البيانات بشكل جيد داخل الجدول، تكون محركات البحث أكثر قدرة على تصنيفها وفهرستها، مما يساعد على تحسين ترتيب الصفحة في نتائج البحث.

خاتمة

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

الاهتمام بالتفاصيل الدقيقة عند إدراج الجداول، مثل تصميمها، مرونتها على الأجهزة المحمولة، وتحسينها لمحركات البحث، سيساهم في تحسين تجربة المستخدم ويزيد من فعالية محتوى مدونتك بشكل عام.