طريقة إنشاء جدول متجاوب احترافي داخل مشاركات بلوجر

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

خطوات اضافة جدول داخل مشاركة بلوجر 

1. أول شيء يجب فعله هو تسجيل الدخول إلى منصة بلوجر > ثم من القائمة الجانبية اختر المظهر > ثم تحرير html.
2. لا تنسى أن تقوم بأخذ نسخة احتياطية للقالب تجنباً للمشاكل.
3. قم بنسخ كود CSS الموجود في الأسفل وضعه أسفل الوسم ]]></b:skin> واضغط حفظ.

/* CSS Table */
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:1px solid #e9e9e9;font-size:16px;padding:10px;text-align:right;vertical-align:top;}
.post-body table tr th {border:1px solid $(body.link.color);font-weight:bold;color:#fff;padding:10px 10px;text-align:right;vertical-align:top;font-size:16px}
.post-body table th {background:#7babed}
.post-body table.tr-caption-container {border:1px 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{display:inline-block}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[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%}
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%}

اذا كنت ترغب بتغيير لون خلفية عنوان الجدول، قم بتغيير كود اللون التالي #7babed بأي لون آخر ترغب به.

الآن وبعد إضافة كود css الخاص بتصميم الجدول، نقوم بإضافة كود html، إذا كنت تريد إضافة جدول داخل اي مشاركة في بلوجر، فيمكنك وضع كود html الموجود في الأسفل، حيث يمكنك نسخ ولصق اكواد html في اي مكان تريد فيه ظهور الجدول داخل مشاركة بلوجر.

<table cellpadding="0" cellspacing="0" style="text-align:right;">
<tbody>
<tr><th>ميزات القالب</th> <th>تحقق</th></tr>
<tr><td>قوالب لونا</td><td>تجربة </td></tr>
<tr><td>قوالب لونا</td> <td>تجربة </td></tr>
<tr><td>قوالب لونا</td><td>تجربة</td></tr>
<tr><td>قوالب لونا</td><td>تجربة</td></tr>
</tbody>
</table>

معاينة الجدول

ميزات القالب	تحقق
قوالب لونا	تجربة
قوالب لونا	تجربة
قوالب لونا	تجربة
قوالب لونا	تجربة

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