كيفية إنشاء جدول في العنصر (4 طرق، مع الخطوات)

الوجبات السريعة الرئيسية

• لا يحتوي Elementor على عنصر واجهة مستخدم جدول في المكون الإضافي الأساسي أو في Elementor Pro، لذا يأتي الجدول في Elementor من كود HTML أو حاويات أو مكون إضافي للجدول أو عنصر واجهة مستخدم إضافي.
• أداة HTML هي الطريقة لإنشاء جدول في Elementor بدون مكون إضافي: لصق علامات الجدول وtr وth وtd وإضافة كتلة نمط قصيرة للحدود والحشو.
• يمكن لحاوية الشبكة تقليد جدول، لكن الجدول المكون من 3 أعمدة و4 صفوف يحتاج إلى 12 عنصر واجهة مستخدم منفصل لمحرر النصوص والنتيجة ليست جدول HTML حقيقيًا.
• يضيف TablePress 3.4 عنصر واجهة المستخدم Elementor الخاص به والذي يسمى TablePress table، ويمكن للزائرين فرز جداوله والبحث فيها وترقيم الصفحات.
• تقوم أداة Master Addons Dynamic Table بإنشاء جدول HTML حقيقي من خلايا الرأس والجسم في لوحة Elementor وتكدس الصفوف في بطاقات على أجهزة يصل عرضها إلى 768 بكسل.

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

لقد قمنا ببناء جدول بكل طريقة من الطرق الأربع على Elementor 4.3 ونظرنا إلى كل واحدة منها على سطح المكتب وعلى الهاتف.

هل يحتوي Elementor على عنصر واجهة مستخدم للجدول؟

رقم البحث عن “table” في لوحة Elementor والنتائج الوحيدة المضمنة هي جدول المحتويات وجدول الأسعار، وكلاهما ينتمي إلى Elementor Pro. لا أحد يصنع صفوفًا وأعمدة من البيانات. جدول الأسعار عبارة عن بطاقة تسعير واحدة، وجدول المحتويات يسرد العناوين الموجودة على الصفحة.

ما هي الطريقة التي يجب أن تستخدمها؟

اختر حجم الجدول ومن سيقوم بتحريره لاحقًا.

الطريقة الأولى: إنشاء جدول في Elementor باستخدام عنصر واجهة مستخدم HTML

هذه هي الطريقة لإنشاء جدول في Elementor بدون مكون إضافي. تكتب جدول HTML عاديًا ويقوم Elementor بطباعته كما هو.

1. قم بتحرير الصفحة باستخدام Elementor واسحب إتش تي أم أل القطعة في حاوية.
2. لصق الرمز أدناه في كود HTML مجال.
3. تغيير النص بين العلامات. كل tr هو صف، كل th هي خلية رأس وكل منها td هي خلية الجسم.
4. انقر ينشر.

<table class="simple-table">
  <thead>
    <tr><th>Plan</th><th>Storage</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Starter</td><td>10 GB</td><td>$5 a month</td></tr>
    <tr><td>Team</td><td>100 GB</td><td>$15 a month</td></tr>
    <tr><td>Business</td><td>1 TB</td><td>$45 a month</td></tr>
  </tbody>
</table>

<style>
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 12px 16px; border: 1px solid #e4e7ec; text-align: left; }
.simple-table th { background: #101223; color: #fff; }
.simple-table tbody tr:nth-child(even) { background: #f6f6f7; }
</style>

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

الطريقة الثانية: قم ببناء طاولة باستخدام حاوية الشبكة

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

1. أضف حاوية وقم بتعيينها تخطيط الحاوية إلى شبكة.
2. تعيين الأعمدة إلى عدد الأعمدة التي تحتاجها و صفوف إلى عدد الصفوف، الرأس متضمن.
3. تعيين الفجوات إلى 0 حتى تتلامس الخلايا.
4. اسحب واحدة محرر النصوص القطعة في كل خلية واكتب نصها.
5. على كل القطعة مفتوحة متقدمثم أضف الحشو و1px حدود. أعط خلايا الرأس لون الخلفية.

عدد عناصر واجهة المستخدم ينمو بسرعة. تحتاج ثلاثة أعمدة وأربعة صفوف بالفعل إلى 12 عنصر واجهة مستخدم، ويحتاج الجدول 5 في 10 إلى 50. تتضاعف الحدود حيث تلتقي الخلايا ما لم تقم بضبط كل جانب. الإخراج عبارة عن مجموعة من divs، لذلك لا يعلن عنها قارئ الشاشة كجدول. احتفظ بهذه الطريقة لعدد قليل من الخلايا.

الطريقة الثالثة: إضافة جدول اضغط على Elementor

TablePress هو مكون إضافي للجدول يحتوي على أكثر من 600000 عملية تثبيت نشطة. يمكنك إنشاء الجدول على شاشة الإدارة الخاصة به ثم وضعه في Elementor. إنه الاختيار الصحيح للجداول الطويلة، لأنه يستورد ملفات Excel وCSV وHTML وJSON ويتيح للزائرين الفرز والبحث والصفحة عبر الصفوف.

1. تثبيت وتنشيط TablePress.
2. اذهب الى TablePressإذن أضف جديد لكتابة جدول، أو يستورد لتحميل ملف.
3. احفظ الجدول ولاحظ معرفه.
4. قم بتحرير صفحتك باستخدام Elementor وابحث عنها جدول اضغط على الجدول. اسحب عنصر واجهة المستخدم إلى الداخل واختر الجدول الخاص بك في طاولة اسقاط.
5. إذا كنت تفضل الرمز القصير، اسحبه إلى الرمز القصير القطعة والدخول [table id=1 /] مع هويتك الخاصة.

لا تحتوي الأداة على علامة تبويب "النمط"، لذا تأتي الألوان والخطوط من إعدادات TablePress وCSS الخاص بك. على هاتف الاختبار 390px الخاص بنا، كان الجدول المكون من خمسة أعمدة يمر أيضًا عبر الحافة اليمنى حتى نفتحه التمرير الأفقي في إعدادات الجدول.

الطريقة الرابعة: استخدم أداة الجدول

تحافظ أداة الإضافة على المهمة بأكملها داخل Elementor. تقوم بكتابة الخلايا في اللوحة وتصميم الجدول في علامة التبويب "النمط"، بنفس الطريقة التي تعمل بها مع أي عنصر واجهة مستخدم آخر. سنستخدم عنصر واجهة المستخدم Dynamic Table من Master Addons هنا.

1. قم بتثبيت الإضافات الرئيسية وتحقق من ذلك الجدول الديناميكي يتم تشغيله في إعدادات عناصر واجهة المستخدم الخاصة به.
2. قم بتحرير الصفحة باستخدام Elementor، ابحث عنها الجدول الديناميكي واسحبه للداخل. يبدأ بنموذج جدول مكون من أربعة أعمدة.
3. يفتح رأس الطاولة. أضف واحدة خلية رأس الجدول لكل عمود واكتب كل منهما اسم العمود.
4. يفتح جسم الطاولة. أضف واحدة خلية جسم الطاولة لكل خلية، من اليسار إلى اليمين. تشغيل صف جديد؟ على الخلية الأولى من كل صف بعد الأولى.
5. لدمج الخلايا، افتح الخلية خيارات علامة التبويب وتعيين امتداد العمود أو امتداد الصف.
6. قم بتصميم الرأس والجسم والخطوط في أسلوب علامة التبويب، ثم نشر.

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

هل تريد رؤيته قبل تثبيت أي شيء؟ ال صفحة الجدول الديناميكي يحتوي على ثلاث طاولات حية وثمانية تخطيطات تجريبية يمكنك فتحها.

لا يقوم Dynamic Table بفرز الملفات أو البحث عنها أو ترقيم الصفحات أو استيرادها. تتم كتابة كل خلية يدويًا، وهو أمر جيد بالنسبة لـ 30 خلية ومتعب بالنسبة لـ 300 خلية، لذلك بالنسبة لمجموعات البيانات الضخمة، عد إلى الطريق 3.

أخطاء لتجنبها

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

الأسئلة المتداولة

الأفكار النهائية

هناك أربع طرق لإنشاء جدول في Elementor. استخدم عنصر واجهة مستخدم HTML لجدول صغير واحد وبدون مكون إضافي، وحاوية Grid لعدد قليل من الخلايا التي تحتوي على أزرار أو صور، وTablePress للبيانات الطويلة أو المستوردة، وعنصر واجهة مستخدم الجدول عندما تريد تحرير الجدول وتصميمه داخل Elementor.

إذا كان الأخير يناسب، الجدول الديناميكي هو جزء من الإضافات الرئيسية جنبا إلى جنب مع الحاجيات الأخرى.

القراءة ذات الصلة

• نصائح جدول تسعير العنصر
• أفضل المكونات الإضافية لجدول المحتويات لـ WordPress