كيفية إنشاء جدول مقارنة باستخدام HTML في تدوينات بلوجر

في عصر التصميم المتجاوب، أصبح تحسين تجربة المستخدم عبر مختلف الأجهزة هدفًا أساسيًا لمطوري المواقع. وبينما كانت جداول HTML تستخدم قديمًا بشكل واسع لترتيب المحتوى، يثار اليوم التساؤل حول مدى فعاليتها في ظل وجود تقنيات أكثر مرونة مثل Flexbox و Grid.

كيفية إنشاء جدول مقارنة باستخدام HTML في تدوينات بلوجر

دليل خطوة بخطوة لإنشاء جدول مقارنة في بلوجر باستخدام HTML

How to Add a Comparison Table to Your Blogger Post Using HTML

هل يمكن فعلاً الاستفادة من جداول HTML في القوالب المتجاوبة دون التضحية بتجربة المستخدم؟ الإجابة ليست بسيطة، ولكن مع بعض التحسينات والنصائح، قد تكون جداول HTML خيارًا عمليًا لعرض البيانات الجدولية في المواقع الحديثة.

شرح كيفية إنشاء جدول HTML واستخدام الكود

1. الكود الأساسي لإنشاء جدول HTML:

الكود الذي قدمته يحتوي على جدول بسيط ومتجاوب مع تنسيقات CSS. إليك تحليل الأجزاء المهمة:

  • <table>: العنصر الأساسي لإنشاء الجدول.
  • <tr>: يمثل صفًا في الجدول.
  • <th>: خلية رأس الجدول (عادة تكون بخط عريض).
  • <td>: خلية عادية لبيانات الجدول.

2. الكود مع التوضيح:

<style>

.CNMU-Table table { border-spacing: 0; width: 100%!important; }

.CNMU-Table table, .CNMU-Table th, .CNMU-Table td { border: 1px solid #999; border-collapse: collapse; text-align: center; word-break: keep-all; }

.CNMU-Table tr { line-height: 48px !important; }

.CNMU-Table * { line-height: inherit !important; }

.CNMU-Table table tr:first-child { background-color: #446EAC; color: #fff; }

.CNMU-Table tr:nth-child(odd) { background-color: #f2f2f2 }

.CNMU-Table th, .CNMU-Table td { padding: 0 10px; }

@media screen and (max-width: 800px) {

  .CNMU-Table { overflow-x: auto; }

}

</style>


<div class="CNMU-Table">

  <table>

    <tr>

      <th>الخانة الأولى</th>

      <th>الخانة الثانية</th>

    </tr>

    <tr>

      <td>معلومة 1</td>

      <td>وصف 1</td>

    </tr>

    <tr>

      <td>معلومة 2</td>

      <td>وصف 2</td>

    </tr>

    <tr>

      <td>معلومة 3</td>

      <td>وصف 3</td>

    </tr>

  </table>

</div>

معاينة

الخانة الأولى الخانة الثانية
معلومة 1 وصف 1
معلومة 2 وصف 2
معلومة 3 وصف 3

كيفية التعامل مع الجدول:

1. تعديل لون رأس الجدول

لتغيير لون رأس الجدول، ابحث عن اللون #446EAC في الكود وعدله إلى اللون الذي تفضله.

2. زيادة الخانات في الجدول

لقد قمت بإضافة كود الخانة الأخيرة في الجدول لتمكينك من إضافة خانة جديدة بسهولة. كل ما عليك فعله هو تكرار الكود لزيادة المزيد من الخانات.

3. زيادة الأعمدة

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

تحرير

<th>الخانة الثالثة</th>

ثم أضف قيمة جديدة في كل صف لتوافق العمود الجديد.

كيفية التعديل:

1. تغيير لون رأس الجدول:

يمكنك تعديل لون الرأس عبر تغيير قيمة background-color من الكود التالي:

.CNMU-Table table tr:first-child { background-color: #446EAC; color: #fff; }

استبدل #446EAC بأي لون آخر.

2. إضافة صف جديد:

أضف الصف التالي مباشرة أسفل آخر صف موجود:

<tr>

<th>الخانة الأولى</th> 

<th>الخانة الثانية</th>   

<th>الخانة الثالثة</th>

</tr> 

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

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

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

معاينة 

الخانة الأولى الخانة الثانية الخانة الثالثة الخانة الثانية الخانة الثانية
معلومة 1 وصف 1 وصف 1 وصف 1 الخانة الثانية
معلومة 2 وصف 2 وصف 1 الخانة الثانية وصف 1
معلومة 3 وصف 3 وصف 1 وصف 1 الخانة الثانية
معلومة 3 وصف 3 وصف 1 وصف 1 الخانة الثانية
معلومة 3 وصف 3 وصف 1 وصف 1 الخانة الثانية
معلومة 3 وصف 3 الخانة الثانية وصف 1 وصف 1

3. إضافة عمود جديد:

قم بإضافة خلية رأس جديدة:

<th>الخانة الثالثة</th>

ثم أضف خلايا جديدة في كل صف:

<td>بيان جديد</td>

مشكلة التجاوب وحلها:

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

@media screen and (max-width: 800px) {

  .CNMU-Table { overflow-x: auto; }

}

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

ملاحظة:

  • يمكن تحسين التجاوب باستخدام تقنيات مثل Flexbox وGrid إذا لم يكن استخدام الجداول ضروريًا.
  • يفضل دائمًا اختبار الجدول على مختلف الأجهزة.
  • هل تحتاج أي تحسين إضافي أو دعم في استخدام هذا الجدول؟

 نصائح

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

ملاحظات

  • جداول HTML ليست الخيار الأمثل دائمًا، لكنها مناسبة لعرض البيانات الجدولية بوضوح.
  • التأكد من أن الجدول متوافق مع معايير الوصول الرقمي (Accessibility).

أسئلة وأجوبة

هل يمكن استبدال الجداول بـ Grid أو Flexbox؟

نعم، في معظم الحالات يمكن استخدام Flexbox أو Grid، لكن الجداول تظل مثالية عند الحاجة لعرض بيانات متسلسلة.

هل هناك تأثير سلبي على الأداء عند استخدام الجداول؟

عادة لا تؤثر الجداول الصغيرة على الأداء، لكن جداول كبيرة جدًا قد تكون غير مثالية للأداء على الأجهزة القديمة.

ملخص

استخدام جداول HTML مع القوالب المتجاوبة ممكن وفعال إذا تم تطبيق الأساليب المناسبة لتكييفها مع مختلف الأجهزة. الالتزام بممارسات التصميم المتجاوب وتحسين تجربة المستخدم يجعل من الجداول خيارًا صالحًا في ظروف معينة.

التعليقات والاقتراحات

ما رأيك في استمرار استخدام جداول HTML؟

هل واجهت تحديات أثناء جعل الجداول متجاوبة؟

شارك أفكارك أو استفساراتك!

هل ترغب في أي تحسين إضافي أو تنسيق خاص؟

تعليقات