انشاء جدول في بلوجر داخل المقالات بأكواد HTML و CSS

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

1-هل يجوز لى انشاء جدول في بلوجر عن طريق الوورد او الاكسل ووضعه بالمشاركة داخل مدونة بلوجر؟

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

2-هل يمكن انشاء جدول في بلوجر عن طريق اكواد جاهزة لتركيبها مباشرة فى المشاركة وعمل الجدول؟

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

كل ماعليك هو نسخ الكود التالى ووضعه بأى مكان تريد بالمشاركة بعد تحويلها من صيغة تأليف الى HTML
الكود

<style type="text/css">table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}table{border-collapse:collapse;border-spacing:0;}.post-body table td,.post-body table caption{border:5px solid #4285f4;padding:10px;text-align:right;vertical-align:top;}.post-body table tr th{border:5px solid #4285f4;font-weight:bold;color:#fff;padding:15px 10px;text-align:right;vertical-align:top;font-size:16px}.post-body table th{background:#4285f4;}.post-body table.tr-caption-container{border:5px solid #f1f1f1;}.post-body table caption{border:none;font-style:italic;}.post-body td,.post-body th{vertical-align:top;text-align:right;font-size:13px;padding:3px 5px;}.post-body table tr:nth-child(even) > td {background-color:#f9f9f9;}.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:left;display:inline-block;border-radius:3px}.post-body td a:hover{color:#7f9bdf;border-color:#adbce0;}.post-body tda[target="_blank"]:after {margin-right:5px;}.post-body table.tr-caption-container td{border:none;padding:8px;}.post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto;}.post-body td.tr-caption{color:#666;font-size:80%;padding:0px 8px 8px!important;}table{max-width:100%;width:100%;margin:1.5em auto;}table.section-columns td.first.columns-cell{border-right:none}table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}table.columns-2 td.columns-cell{width:50%}table.columns-3 td.columns-cell{width:33.33%}table.columns-4 td.columns-cell{width:25%}table.section-columns td.columns-cell{vertical-align:top}table.tr-caption-container{padding:4px;margin-bottom:.5em}td.tr-caption{font-size:80%}</style> <br> <table cellpadding="0" cellspacing="0" style="text-align: right;"><tbody> <tr> <th>العنوان الأول</th><th>العنوان الثانى</th><th>العنوان الثالث</th> <th>العنوان الرابع</th> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> </tbody> </table>

3-هل هناك مواقع تمنحك كود جاهز مجانى لكى تستطيع انشاء جدول في بلوجر ؟

نعم يوجد أكثر من موقع يقدم لك هذه الخدمه المجانيه فى عمل جدول في بلوجر بطريقة احترافية،ولكن انا فضلت أن اقدم لكم موقعين رائعين حقيقة وسهل التعامل معهم وتستطيع أن تتحكم فى شكل ولون وعدد خانات الجدول وبعدها تحصل على الأكواد اللازمه بكل سهولة.
1- الموقع الأول أسمة Tables Generator ،يتميز هذا الموقع بالسهولة فى التعامل معه وسأشرح لكم كيفية عمل جدول من خلال هذا الموقع عبر مراحله حتى الحصول على الكود اللازم للجدول لوضعه بالمشاركه على مدونتك.
أولا : عند الضغط على رابط الموقع سيفتح لك واتبع أول مرحله كما بالصورة التالية

ويمكنك الاطلاع على مراحل انشاء جدول عبر مشاهدة الفيديو التالى :

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

<style type="text/css"> .tg {border-collapse:collapse;border-spacing:0;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 13px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 13px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;} .tg .tg-pity{font-weight:bold;font-size:22px;font-family:Arial, Helvetica, sans-serif !important;;border-color:#f56b00;text-align:left;vertical-align:middle} .tg .tg-2kwn{font-size:18px;font-family:Arial, Helvetica, sans-serif !important;;color:#fe0000;border-color:#f56b00;text-align:center;vertical-align:middle} </style> <table class="tg"> <tr> <th class="tg-pity">خانة واحد</th> <th class="tg-pity">خانة 2</th> <th class="tg-pity">خانة 3</th> <th class="tg-pity">خانة 4</th> <th class="tg-pity"><a href="https://www.learnwebseo.com/">خانة 5</a></th> </tr> <tr> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> </tr> <tr> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> </tr> <tr> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> </tr> <tr> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> </tr> </table>

وستكون النتيجه كما بالصورة التالية :

وطبعا القوائم سهل جدا فهمها بعد مشاهدة الفيديو السابق ،وتستطيع صناعة جدول رائع من خلال هذا الموقع وعلى ذوقك.
ولجعل الجدول فى منتصف الصفحه ماعليك سوى استبدال الكود التالى :-

<table class="tg">

بهذا الكود

<table class="tg" style="margin:auto;text-align:center;">

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

طبعا الموقع يتميز بالسهوله والاحترافيه وبعد الانتهاء من عمل الجدول كل ماعليك هو الضغط على كلمة .Apply CSS وسيحفظ كل التغييرات التى عملتها .
ولكى تقوم بتركيب الجدول الناتج ماعليك سوى نسخ ملفات CSS والتى يظهر مكانها بالصورة التاليه

وفق الخطوات التاليه :
1- عليك التوجه للوحة تحكم مدونتك ثم المظهر وتعديل HTML
2- اضغط عبر لوحة المفاتيح أو الكيبورد على Ctrl + F ثم ابحث عن كود  ]]></b:skin>
3- فوق الكود السابق ضع أكواد CSS
اما اكواد HTML فأنسخهم وضعهم بالمكان المراد وضع الجدول به بعد تحويل المشاركه الى وضعية HTML بدلا من تأليف.
اتمنى ان اكون وفقت فى الشرح
مع وافر تقديرى لك