أخر الاخبار

طريقة انشاء جدول في مقال بلوجر 7 اشكال مميزة يمكنك تخصيصها بسهولة

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


كيف تنشئ جدول في مقال مدونه بلوجر؟

طريقة انشاء جدول في مقال بلوجر 7 اشكال مميزة يمكنك تخصيصها بسهولة

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

يعد إدراج قائمة بالمحتوى في جدول منشورات blogger طريقة فعالة لعرض المحتوى. تعرف على كيفية انشاء جدول في مقال مدونه بلوجر؟


هل تبحث عن كيفية انشاء جدول في مقال بلوجر Blogger Post؟ 

تتوفر العديد من المكونات الإضافية في WordPress والتي تتيح لك إنشاء جداول ببضع نقرات فقط. ولكن للأسف، إذا كانت مدونتك على Blogger، فلن تتمكن من إنشاء جداول لمنشوراتك باستخدام مكون إضافي.

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

ولهذا السبب، يتعذر على مستخدمي مدونات بلوجراستخدام الجدول داخل منشور المدونة.

سأشرح في منشور المدونة هذا كيفية انشاء جدول في منشور بلوجر Blogger Post، بمساعدة هذا المقال، يمكنك بسهولة انشاء جدول في مقال بلوجر Blogger Post، سأوضح الطريقة خطوة بخطوة فقط تابع الشرح.



كيفية انشاء جدول في منشور مدونه بلوجر؟

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

ولكن قبل المتابعة سأشرح معنى علامة HTML الأساسية. نحتاج إلى استخدام ثلاثة أنواع من أكواد HTML لإنشاء جدول. <table> ... </table> ، <tr> ... </tr> ، <td> ... </td>

كود HTML
  • <table> ...... </table> يساعد هذا الأمر في إنشاء جدول.
  • <tr> .............. </tr> يساعد هذا الأمر في رسم الخط.
  • <td> ............. </td> لإنشاء الأعمدة يستخدم هذا الأمر.


كيفية انشاء جدول أساسي 1 صف  × 5 عمود باستخدام علامة HTML؟

سنقوم الآن بـ انشاء جدول مكون من 5 أعمدة في صف واحد (صف واحد × 5 عمود) باستخدام علامة HTML. 
سيكون بالشكل التالي.

انشاء جدول في مقال بلوجر

الكود

<table border="1">
<tbody>
<tr>
<td>Alkoptantech</td>
<td>ضع هنا المحتوي</td>
<td>ضع هنا المحتوي</td>
<td>ضع هنا المحتوي</td>
<td>ضع هنا المحتوي</td> 
</tr>
</tbody>
</table>
  

كيفية انشاء جدول داخل المقال 2 صف × 5 أعمدة باستخدام علامة HTML؟

لقد تعلمنا انشاء جدول صف واحد × 5 أعمدة، والآن سنتعرف علي كيفية انشاء جدول داخل المقال في مدونه بلوجر 2 صف × 5 عمود.

كيفية انشاء جدول في مقال بلوجر

الكـــــود
<table border="1" style="width: 500px;">
<tbody>
<tr>
<td style="text-align: center;">ضع هنا المحتوي</td>
<td style="text-align: center;">ضع هنا المحتوي</td>
<td style="text-align: center;">ضع هنا المحتوي</td>
<td style="text-align: center;">ضع هنا المحتوي</td>
<td style="text-align: center;">ضع هنا المحتوي</td>
</tr>
<tr>
<td style="text-align: center;">ضع هنا المحتوي</td>
<td style="text-align: center;">ضع هنا المحتوي</td>
<td style="text-align: center;">ضع هنا المحتوي</td>
<td style="text-align: center;">ضع هنا المحتوي</td>
<td style="text-align: center;">ضع هنا المحتوي</td>
</tr>
</tbody>
</table>
  

تخصيص إعدادات الجدول

  • لزيادة سمك حدود الجدول قم بتغيير 1 الي 2/3
  • لزيادة عرض الجدول أو إنقاصه غيّر 500px



كيفية انشاء جدول 4 صفوف × 5 أعمدة مع لون جدول العناوين؟

ألان، سنقوم بـ انشاء جدول مكون من 4 صفوف × 5 أعمدة برأس ملون. بشكل عام، في العنوان يمكننا إضافة تفاصيل وفي الخانات الأخرى، يمكننا كتابة بيانات المحتوي.

بعد أنشاء الجدول سيكون بهذا الشكل.
كيفية انشاء جدول 4 صفوف × 5 أعمدة مع لون جدول العناوين

كيفية انشاء جدول في مقال بلوجر

الكــــCODـــود

<table border="1" style="width: 500px;">
<tbody>
<tr bgcolor="#E73A3A">
<td style="text-align: center;"><span style="color: white;">ضع هنا المحتوي</span></td>
<td style="text-align: center;"><span style="color: white;">ضع هنا المحتوي</span></td>
<td style="text-align: center;"><span style="color: white;">ضع هنا المحتوي</span></td>
<td style="text-align: center;"><span style="color: white;">ضع هنا المحتوي</span></td>
<td style="text-align: center;"><span style="color: white;">ضع هنا المحتوي</span></td>
</tr>
<tr>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
</tr>
<tr>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
</tr>
<tr>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
<td style="text-align: center;">Alkoptantecch</td>
</tr>
</tbody>
</table> 

تخصيص إعدادات الجدول
  • لزيادة سمك حدود الجدول قم بتغيير 1 الي 2/3
  • لزيادة عرض الجدول أو إنقاصه غيّر 500px
  • لتغير لون جدول العنوان غير الرمز "#E73A3A" الي اي لون أخر.

أكواد بعض الألوان التي يمكنك الاستعانة بها للتغير
  •  لون أزرق   "1c2fe6"
  •  لون برتقالي "e8d71d"
  •  لون موف    "9900ff" 


كيفية انشاء جدول في مقال بلوجر 4 صفوف × 5 أعمده جدول متعدد الألوان؟

إليك طرقة أخري في كيفية انشاء جدول داخل مقال في مدونة بلوجر Blogger Post، سنقوم ألان بـ انشاء جدول متعدد الألوان مع مزيد من التخصيص.

كيفية انشاء جدول 4 صفوف × 5 أعمده جدول متعدد الألوان ؟
الشكل رقم (1)

كيفية انشاء جدول 4 صفوف × 5 أعمده جدول متعدد الألوان
الشكل رقم (2)

الكـود

<table border="1" style="width: 500px;">
<tbody>
<tr bgcolor="#E73A3A">
<td style="text-align: center;"><span style="color: white;">ضع هنا المحتوي</span></td>
<td style="text-align: center;"><span style="color: white;">ضع هنا المحتوي</span></td>
<td style="text-align: center;"><span style="color: white;">ضع هنا المحتوي</span></td>
<td style="text-align: center;"><span style="color: white;">ضع هنا المحتوي</span></td>
<td style="text-align: center;"><span style="color: white;">ضع هنا المحتوي</span></td>
</tr>
<tr bgcolor="#0092FF">
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
</tr>
<tr bgcolor="#00FFA8">
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
</tr>
<tr bgcolor="#FCFF00">
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
</tr>
</tbody>
</table>

كود الشكل رقم 2

<table border="1" style="width: 500px;">
<tbody>
<tr bgcolor="#110718">
<td style="text-align: center;"><span style="color: white;"><b>ضع هنا المحتوي</b></span></td>
<td style="text-align: center;"><span style="color: white;"><b>ضع هنا المحتوي</b></span></td>
<td style="text-align: center;"><span style="color: white;"><b>ضع هنا المحتوي</b></span></td>
<td style="text-align: center;"><span style="color: white;"><b>ضع هنا المحتوي</b></span></td>
<td style="text-align: center;"><span style="color: white;"><b>ضع هنا المحتوي</b></span></td>
</tr>
<tr bgcolor="#bdb6c1">
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
</tr>
<tr bgcolor="#bdb6c1">
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
</tr>
<tr bgcolor="#bdb6c1">
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
<td style="text-align: center;">Alkoptan</td>
</tr>
</tbody>
</table><div><br /></div>


تخصيص إعدادات الجدول
  • لزيادة سمك حدود الجدول قم بتغيير 1 الي 2/3.
  • لزيادة عرض الجدول أو إنقاصه غيّر 500px.
  • لتغير ألون خلفية الجدول غير الرموز الي أي لون أخر. (E73A3A# ، #0092FF ، #00FFA8 #FCFF00).


كيف يتم تنفيذ الجدول في منشور مدونة بلوجر؟

لإضافة الجدول في مقال وجعل هذا الرمز يعمل، عليك أتباع الطريقة:
  1. قم بتسجيل الدخول إلى حسابك على بلوجر Blogger وانتقل إلى  لوحة التحكم الرئيسية.
  2. من  لوحة التحكم الرئيسية ، انقر فوق + مشاركة جديدة.
  3. قم بإنشاء منشور جديد وقم بكتابة المنشور(المحتوي) الخاص بك.
  4. من محرر النشر، غير عرض وضع الإنشاء إلي عرض HTML، ثم أضف رمز الجدول في المكان الذي تريده، كما موضح بالصورة.
انشاء جدول في منشور بلوجر

5. بعد تطبيق كود الجدول أرجع إلي وضع الإنشاء سيظهر معك الجدول بالشكل التالي.

- الأن يمكنك تعديل المحتوي بالجدول بكل سهولة.

Blogger Post

6. أخيراً أنشر منشور المدونة الخاص بك، وتحقق الآن من المنشور وشاهد الجدول الذي تم إنشاؤه بواسطة كود HTML.


الأسئلة الشائعة

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

لا يؤثر كود HTML المستخدم بالشرح علي سرعة الصفحة.

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



تعليقات



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -