أخر الاخبار

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

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

انشاء جدول في مقال بلوجر - انشاء جدول في منشور بلوجر- Blogger - Blogger Postأنشاء جدول داخل منشور بلوجر بستخدام كود HTML

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

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

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

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

مرحبًا بالمدونين ، سأشرح في منشور المدونة هذا كيفية انشاء جدول في منشور بلوجر Blogger Post، أتمنى أن نكون جميعًا على دراية بأن Google Blogger أو Blogspot لا يسمحان بمكونات إضافية مثل WordPress، ومع ذلك ، بمساعدة هذا المقال ، يمكنك بسهولة انشاء جدول في مقال بلوجر 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 أعمدة مع لون جدول العناوين

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

 الكود 👇

<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. وإذا كنت تعرف المزيد من أفكار التخصيص ، فشاركها في التعليقات.



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

أسئلة شائعة ومتكررة بخصوص انشاء جدول في مقال بلوجر Blogger Post

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

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


👀هل يؤثر أضافة جدول في مقال بلوجر باستخدام كود HTML علي سرعة المدونة؟

👈لا ! يؤثر أطلاقاً كود HTML علي السرعة.


🔺هل يمكن انشاء أكثر من جدول باستخدام كود HTML في مقال واحد ؟

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


هل يمكنني تغير بعض خصائص الجدول ؟

☑👈نعم يمكنك تغير جميع خصائص الجدول بكل سهولة تغير عدد الأعمدة والصفوف وأيضاً يمكنك تغير الألوان.



الخلاصة

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

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

دومتم في أمان الله
Ahmed Alkoptan
بواسطة : Ahmed Alkoptan
أحمد القبطان | أعمل بمجال الكمبيوتر ومصمم جرافيك ومنشئ مواقع ويب وعاشق لمجال التقنية والجرافيك



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