مدونة هشام هاشم للمعلوميات مدونة هشام هاشم للمعلوميات
random

آخر المواضيع

random
recent
جاري التحميل ...
recent

كيفية انشاء جدول احترافي متجاوب لمدونة بلوجر لمقارنة وعرض الهواتف والحواسب

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

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


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


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

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

سوف ندخل الى المشاركة وننتقل من تأليف الى 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:1px solid #e9e9e9;padding:10px;text-align:right;vertical-align:top;}.post-body table tr th{border:1px solid #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:right;vertical-align:top;font-size:14px}.post-body table th{background:#4285f4;}.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) &gt; td {background-color:#f9f9f9;}.post-body table tr:nth-child(even) &gt; 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=&quot;_blank&quot;]: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>
<table cellpadding="0" cellspacing="0" style="text-align: right;"><tbody>
<tr> <th>قسم 1</th> <th>قسم 2</th> </tr>
<tr> <td>الهاتف  1</td> <td>هذا النص عشوائي يمكن استبداله</td> </tr>
<tr> <td>الهاتف  2</td> <td>هذا النص عشوائي يمكن استبداله</td> </tr>
<tr> <td>الهاتف 3</td> <td>هذا النص عشوائي يمكن استبداله</td> </tr>
<tr> <td>الهاتف 4 </td> <td>هذا النص عشوائي يمكن استبداله</td> </tr>
<tr> <td>الهاتف 5</td> <td>هذا النص عشوائي يمكن استبداله</td> </tr>
<tr> <td>الهاتف 6</td> <td>هذا النص عشوائي يمكن استبداله</td> </tr>
<tr> <td>الهاتف 7</td> <td>هذا النص عشوائي يمكن استبداله</td> </tr>
<tr> <td>الهاتف 8</td> <td>هذا النص عشوائي يمكن استبداله</td> </tr>
<tr> <td>الهاتف 9</td> <td>هذا النص عشوائي يمكن استبداله</td> </tr>
<tr> <td>الهاتف 10</td> <td>هذا النص عشوائي يمكن استبداله</td> </tr>

</tbody> </table>

ملاحظة : كلمة " الهاتف 1 او هذا النص عشوائي يمكن استبداله غيرها الى اي كلمة تريد .

التعليقات



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

إتصل بنا

تابعونا لتتوصل بجديد هشام هاشم

جميع الحقوق محفوظة

مدونة هشام هاشم للمعلوميات

2016