نظرة عامة عن إنشاء الجداول ب html و CSS في صفحات الويب
المقـدمـة: الجداول في الووردبريس: يمين، يسار، وسط .
سبق لي أن كتبت مقالات لكيفية إنشاء الجداول و كيفية تنسيقها مع دمج خلاياها وتلوين خلفياتها ولكني لم أكن أفكر آنذاك في شرح كيفية تحديد اتجاهها حين تكون أبعادها أصغر من 100% .
في هذا المقال، سأعرض روابط الدروس التي تناولت فيها إنشاء الجداول سواءٌ ب HTML أو تنسيقاتها ب CSS، وبعدها سأشرح كيفية إدراج أكواد تحديد اتجاهات الجداول، يمين ، شمال ، وسط .
|
قائمـة المقالات ذات صلـة : |
كيفية التحكم في اتجاهات الجدول ب CSS في الووردبريس
أول ما سأقوم به هو إنشاء جدول من 3 أعمدة و 3 صفوف :
| الجدول | الجدول | الجدول |
| 1 | 1 | 1 |
| 2 | 2 | 2 |
الجدول هنا تم إنشاؤه بالعرض الكامل 100%. لذلك فهو يظهر بهذا الوضع.
≡ لإنشاء جدول مثل هذا 
داخل مقالات أوصفحات موقعك ووردبريس، إختر قسم نص في محرر النصوص ، مثل ما في الصورة↓ رقم 
الجداول في الووردبريس: يمين، يسار، وسط
ثم قم بنسخ الشفيرة التالية 
وألصقها بالمحرر ، قسم نص ، ثم عًدْ إلى قسم مرئي لمشاهدة الجدول.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> |
شفيرة الجدول في الأعلى
≡ ماذا لو قمنا بتغيير عرض الجدول من 100% إلى 60% ؟ أكيد أننا سنلاحظ الفرق . إذن قم بتغيير هذه القيمة « width: 100% » واجعلها « width: 60% ». ستحصل على هذه النتيجة
| الجدول | الجدول | الجدول |
| 1 | 1 | 1 |
| 2 | 2 | 2 |
≡ كما تلاحظون أن الجدول اتخذ مكاناً له على اليمين بشكل افتراضي. هذا طبعاً لمن له موقع عربي وإلا سيكون على اليسار، لكنه أبداً لن يكون في الوسط مهما تغيرت اللغات.
♦ إذن يلزمنا إضافة بعض علامات CSS إلى شفيرة هذا الجدول كي يتم تحويله إلى الموضع الذي نريده أن يكون.
توسيط الجدول:
لتوسيط الجدول نضيف إلى شفيرة table ما يلــــــي:
|
1 |
margin:auto; |
فتصبح شفيرة الجدول كما يلــي:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table style="border-collapse: collapse; width: 60%; margin:auto;"> <tbody> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> |
والنتيجة تبدو واضحة ، وقد أصبح الجدول في الوسط:
| الجدول | الجدول | الجدول |
| 1 | 1 | 1 |
| 2 | 2 | 2 |
جعل الجدول على اليسار
لجعل الجدول يستقر على لبيسار، نضيف إلى شفيرة table ما يلــــــي:
|
1 |
margin-right: auto; |
ليصبح الكود مثل هذا:
|
1 |
<table style="border-collapse: collapse; width: 60%; margin-right: auto;"> |
والنتيجة تبدو واضحة ، وقد أصبح الجدول جهة اليسار الذي هو يمين الصفحة:
| الجدول | الجدول | الجدول |
| 1 | 1 | 1 |
| 2 | 2 | 2 |
جعل الجدول على اليمين
لجعل الجدول يستقر على اليمين، نضيف إلى شفيرة table ما يلــــــي:
|
1 |
margin-left: auto; |
ليصبح الكود مثل هذا:
|
1 |
<table style="border-collapse: collapse; width: 60%; margin-left: auto;"> |
والنتيجة تبدو واضحة ، وقد أصبح الجدول جهة اليميــن الذي هو يسار الصفحة:
| الجدول | الجدول | الجدول |
| 1 | 1 | 1 |
| 2 | 2 | 2 |
المَقالاتُ الْجَيِّدَةُ هِيَ وَلِـيدَةُ أَفْكارٍ مُتَجَدِّدَةٍ وَهَدَفٍ وَاضِحٍ ومُحَدَّد
جدول يمين أو يسار الكتابة
من الإضافات الجميلة التي نشاهدها في بعض المقالات هي إدراج جدول يمين أو يسار النص ، ونفكر دائماً في البحث عن إسم المكون الاضافي الذي يمكن أن يقوم بهذه الوظيفة. ولكن ما رأيكم لو أدرجنا هذا الجدول بدون إضافات ، فقط نستعمل كود css بسيط نضيفه إلى شفيرة <table> ويصبح الجدول يمين النص أو يساره . كيف ذلك؟ تابع معي ..
| محرك البحث جوجل | باقي محركات البحث |
| 97% | 3% |
نلاحظ في هذا المثال أن الجدول يأخذ مكانه على يسار الكتابة ، تماماً مثل الصورة العائمة التي رأيناها في درس CSS. وتبدو هذه الطريقة مهمة لشرح بعض الأمور التي تستوجب إدراج جدول توضيحي، خصوصاً تلك المتعلقة بالأرقام و النسب المئوية من تحاليل و إحصائيات .
العملية تبدو جد مألوفة للذين سبق لهم التعرف على لغة CSS، فقط نضيف هذه العلامة: float: left; إلى <table> لتصبح الشفيرة على هذا الشكل:
|
1 |
<table style="border: 1px solid #407436; float: left; width: 40%; height: 96px;"> |
| محرك البحث جوجل | باقي محركات البحث |
| 97% | 3% |
نلاحظ في هذا المثال أن الجدول يأخذ مكانه على يمين الكتابة ، تماماً مثل الصورة العائمة التي رأيناها في درس CSS. وتبدو هذه الطريقة مهمة لشرح بعض الأمور التي تستوجب إدراج جدول توضيحي، خصوصاً تلك المتعلقة بالأرقام و النسب المئوية من تحاليل و إحصائيات .
ولفعل هذا الجدول على اليمين، نضيف هذه العلامة: float: right; إلى <table> لتصبح الشفيرة على هذا الشكل:
|
1 |
<table style="border: 1px solid #407436; float: right; width: 40%; height: 96px;"> |
إضافة جدولين متقابلين
وأنا أحاول إنهاء كتابة هذه المقالة، تبادر إلى دهني إنشاء جدولين متقابلين . الطريقة جد سهلة، يكفي أن ننشئ الجدول الأول مع إضافة العلامة 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 لإضفاء بعض الجمالية على النص. |
 أرى أن هذه المواضيع قد تهمك: |
شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.