كيفية انشاء جدول احترافي متجاوب لمدونة بلوجر
سوف نشرح لكم طريقة انشاء جدول احترافي متجاوب لمدونة بلوجر ، وهذه الاضافة التي بين ايديكم ربما هي اسهل اضافة من بين الاضافات الاخرى التي تقدم شكل مناسب للجدول ، كما ان تركيب هذا الكود سهل ولا يحتاج الى ان تكون محترف .
العديد من المدونين ترغب دائما في اضافة العديد من الاشكال المناسبة للمدونة لكي تعطي جمالية للموضوع ،وهذا طبيعي لانها تنافس الملايين من المدونين العرب الذين يتحركون بسرعة فائقة ، مع العلم انها ليست منافسة ترتيب ولكن منافسة اشكال والوان التي تجذب نظر الزائر ، ولهذا من بين هذه الاضافات التي عليها الطلبات وخصوصا من المواقع التعليمية والحكومية وهي انشاء جدول احترافي متجاوب لمدونة بلوجر .
هذه الاضافة لا تحتاج الى ان تكون محترف في بلوجر ، لانها عملية تحتاج الى خطوتين فقط وعملية الحفظ ومبروك ، مع اننا شرحنا لكم بالفيديو كيفية التركيب لمن لا يستطيع فهم الكيفية ، ثم كيفما كان الحال سوف تكون فائدة منشورة على قناة اليوتيوب والمدونة ان شاء الله ، لكي لا اطيل عليكم سوف نترككم مع الشرح المبسط في هذه المدونة المغربية .
كيفية انشاء جدول احترافي متجاوب لمدونة بلوجر :
اولا سوف تدخل للقالب >> ثم الى تحرير HTML >> بعدها ننقر في لوحة المفاتيح عن Ctrl+f لفتح محرك البحث >> ونبحث عن أمر ]]></b:skin> وضع فوقه هذا الكود CSS .
/* ====================
* CSS Post Table by MAAIDNI
* ==================== */
/* CSS Post Table */.post-body table th, .post-body table td, .post-body table caption{border:1px solid #000000;padding:.2em .5em;text-align:right;vertical-align:top;}.post-body table.tr-caption-container {border:1px solid #d8dde1;}.post-body th{font-weight:700;}.post-body table caption{border:none;font-style:italic;}.post-body table{}.post-body td, .post-body th{vertical-align:top;text-align:right;font-size:13px;padding:3px 5px;border:1px solid #d8dde1;}.post-body th{background:#D03F42;}.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;}img {max-width:100%;height:auto;border:none;}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%}
/* ====================
* CSS Post Table by MAAIDNI
* ==================== */<table border="2" cellpadding="2" cellspacing="2" style="width: 100%px;"><tbody>
<tr><th>عمــود رقم 1</th><th>عمــود رقم 2</th></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
<tr><td>فراغ العمود 1</td><td>فراغ العمود 2</td></tr>
</tbody></table>