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

اضافة جميلة جدا خاصة لمن يقوم بمراجعة هواتف او برامج او اشياء مثل هاته ، التي يكون لديك فيها قسمين ، و هاته الاضافة هي جدول بلوجر بقسمين متجواب و انيق ، و لديه العديد من الاستعمالات .

معاينة الاضافة :

كيف اركبه ؟

انشئ مشاركه جديدة
اكتب الموضوع عادي جدا الى ان تاتي الى المكان الذي تحتاج فيه القالب ، اضغط على 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) > 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>
<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>

وهنا في صنف html قم بكتابة ما تريد و ان اردت حذف خانة او اضافة واحدة فقط ، قم بحذف او اضاف سطر جديد من كود
<tr> <td>الهاتف 10</td> <td>هذا النص عشوائي يمكن استبداله</td> </tr>

كان هذا درسنا لليوم اتمنى ان يكون قد اعجبكم .