اضافة جدول table إلى مشاركة على بلوجر بأكواد HTML و CSS

اضافة جدول table إلى مشاركة على بلوجر بأكواد HTML و CSS

0

اضافة جدول table

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

هل يجوز لى أن اقوم بعمل جدول على الوورد او الاكسل ووضعه بالمشاركة؟

اضافة جدول table

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

اضافة جدول table

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

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

اضافة جدول table إلى مشاركة على بلوجر بأكواد HTML و CSS

كل ماعليك هو نسخ الكود التالى ووضعه بأى مكان تريد بالمشاركة بعد تحويلها من صيغة تأليف الى 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>

 

اضافة جدول tableوهل هناك مواقع تمنحك كود جاهز مجانى ؟

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

اضافة جدول table إلى مشاركة على بلوجر بأكواد HTML و CSS

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

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

<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.seo-blogger.info/">خانة 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 إلى مشاركة على بلوجر بأكواد HTML و CSS

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

<table class="tg">

بهذا الكود

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

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

اضافة جدول table إلى مشاركة على بلوجر بأكواد HTML و CSS

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

اضافة جدول table إلى مشاركة على بلوجر بأكواد HTML و CSS

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

قد يعجبك ايضا

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More