الجداول في الووردبريس: يمين، يسار، وسط

نظرة عامة عن إنشاء الجداول ب html و CSS  في صفحات الويب 


 

  المقـدمـة:  الجداول في الووردبريس: يمين، يسار، وسط .

سبق لي أن كتبت مقالات  لكيفية إنشاء الجداول و كيفية تنسيقها مع دمج خلاياها  وتلوين خلفياتها ولكني لم أكن أفكر آنذاك في  شرح كيفية تحديد اتجاهها حين تكون أبعادها أصغر من 100% .

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

 

 قائمـة المقالات ذات صلـة :

كيفية التحكم في اتجاهات الجدول ب CSS في الووردبريس


 

أول ما سأقوم به هو إنشاء جدول من 3 أعمدة و 3 صفوف :

الجدول الجدول الجدول
1 1 1
2 2 2

الجدول هنا تم إنشاؤه بالعرض الكامل 100%. لذلك فهو يظهر بهذا الوضع.

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

قسم نص في محرر النصوص ووردبريس

الجداول في الووردبريس: يمين، يسار، وسط

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

 شفيرة  الجدول في الأعلى

  ماذا لو قمنا بتغيير  عرض الجدول من 100% إلى 60% ؟ أكيد أننا سنلاحظ الفرق . إذن قم بتغيير هذه القيمة « width: 100% » واجعلها « width: 60% ». ستحصل على هذه النتيجة

الجدول الجدول الجدول
1 1 1
2 2 2

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

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

توسيط الجدول: 


لتوسيط الجدول نضيف إلى  شفيرة  table ما يلــــــي:

فتصبح شفيرة الجدول كما يلــي:

والنتيجة تبدو واضحة ، وقد أصبح الجدول في الوسط:

الجدول الجدول الجدول
1 1 1
2 2 2

 

جعل الجدول على اليسار


لجعل الجدول يستقر على لبيسار، نضيف إلى  شفيرة  table ما يلــــــي:

ليصبح الكود مثل هذا:

والنتيجة تبدو واضحة ، وقد أصبح الجدول جهة اليسار الذي هو يمين الصفحة:

  الجدول الجدول الجدول
1 1  1
2 2 2

جعل الجدول على اليمين


لجعل الجدول يستقر على اليمين، نضيف إلى  شفيرة  table ما يلــــــي:

ليصبح الكود مثل هذا:

والنتيجة تبدو واضحة ، وقد أصبح الجدول جهة اليميــن الذي هو يسار الصفحة:

الجدول الجدول الجدول
1 1  1
2 2 2

المَقالاتُ الْجَيِّدَةُ هِيَ وَلِـيدَةُ أَفْكارٍ مُتَجَدِّدَةٍ وَهَدَفٍ وَاضِحٍ ومُحَدَّد

جدول يمين أو يسار الكتابة


من الإضافات الجميلة التي نشاهدها في بعض المقالات هي إدراج جدول يمين أو يسار  النص ، ونفكر دائماً في البحث عن إسم المكون الاضافي الذي يمكن أن يقوم بهذه الوظيفة. ولكن ما رأيكم لو أدرجنا هذا الجدول بدون إضافات ، فقط نستعمل كود css بسيط نضيفه إلى شفيرة <table> ويصبح الجدول يمين النص أو يساره . كيف ذلك؟ تابع معي ..

  محرك البحث جوجل  باقي محركات البحث
97%  3%

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

العملية تبدو جد مألوفة للذين سبق لهم التعرف على لغة CSS، فقط نضيف هذه العلامة: float: left; إلى <table> لتصبح الشفيرة على هذا الشكل:

 

  محرك البحث جوجل  باقي محركات البحث
97%  3%

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

ولفعل هذا الجدول على اليمين، نضيف هذه العلامة: float: right; إلى <table> لتصبح الشفيرة على هذا الشكل:

 

إضافة جدولين متقابلين


 

وأنا أحاول إنهاء كتابة هذه المقالة، تبادر إلى دهني إنشاء جدولين متقابلين . الطريقة جد سهلة، يكفي أن ننشئ الجدول الأول مع إضافة العلامة float: right;  إلى <table> ثم ننشئ جدول ثاني  مع  إضافة العلامة float: left; إلى <table> وستحصل على جدولين متقابلين كما في المثال التالي:

  محرك البحث جوجل  باقي محركات البحث
97%  3%
الجدول الثاني على اليسار

خلاصة:  كما تعلمنا في الأمثلة السابقة : كيف نضع الجدول في وسط الصفحة، بإضافة العلامة margin:auto; إلى شفيرة <table>  ثم أضفنا العلامة margin-right: auto; لجعل الجدول يسار  الصفحة ، و margin-left: auto; لجعل الجدول يمين الصفحة . لكننا الآن نريد إدراج الجدول يسار الكتابة أو يمين الكتابة. وذلك بإضافة العلامة float: right; أو float: left; إلى <table> .

الجدول الأول على اليمين

في كثير من الأحيان عندما أكون منشغلاً بكتابة مقالة أو صفحة أتعمد استعمال محرر الكتابة في التبويب « نص» كي أبقى على صلة بلغة HTML الجميلة . و من خلالها أجرب بعض أكواد html و css  لإضفاء بعض الجمالية على النص.

 

أرى أن هذه المواضيع قد تهمك:

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 445 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

41 عدد المشاهدات لهذا المحتوى
Scroll to Top