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

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

أولا صورة للجدول :



مثال حي : تجربة إنشاء جداول على بلوجر

شرح الإضافة :
أولا نضيف كود CSS الخاص بتنسيق الجدول :
اذهب إلى تحرير HTML وعلم على توسيع قوالب عناصر واجهة المستخدم والصق الكود التالي مباشرة قبل ]]></b:skin> :

كود:

#bloggerexp-table {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 10px 0;
    width: 100%;
    text-align: right;
    border-collapse: collapse;
}
#bloggerexp-table th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_i0hf5EMwJe-zYcU0iwCpr1ztH-0iiyUw9doEO03eH3r7uTKBOjpn_wCxxLO72mc_NftfMLYP6qcmJyq482uBbeFEcWsS0cpvlsjh1st7G_6geK5JZhAyWbPI2s3O8bVYDkfiHkzemKyi/s1600/gradhead.png')  repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
}
#bloggerexp-table td {
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV1X-iMy8hjzHDZWERmJPaZgtCIXdpKFJn6jJzfJ6wM4RWtewkBoNzDkKYc5GYZLk0Tn2gWKhtavLOdaQXa10JDmlvUmBGNrqJdCZcpTC1k0cWZLz-ak4AYV3kfXMhTcs2dASkB1FlR6C8/s1600/gradback.png')  repeat-x;
}
#bloggerexp-table tfoot tr td {
    background: #e8edff;
    font-size: 16px;
    color: #99c;
    text-align:center;
}
#bloggerexp-table tbody tr:hover td {
    background: #d0dafd  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgocIbIJoHoPmLbWhGNLJP3oCJHzkc8cQum96tuh5yYF9t57aZgCMAbiEHhPf8flnw_oZWEjiBjeveECVGkZNspR-p05FIZZYavRcqdBPRu4prm2You7uC2sxdRpX6fT0gt59Tfr7rB37zK/s1600/gradhover.png')  repeat-x;
    color: #339;
}
#bloggerexp-table a:hover {
    text-decoration:underline;
}

الآن عند إضافة موضوع جديد إذهب إلى رسالة جديدة ثم تحرير HTML والصق الكود التالي :

كود:

<table id="bloggerexp.com-table" summary="وصف محتوى الجدول">
   <thead>
     <tr>
       <th scope="col">التصنيف الأول</th>
       <th scope="col">التصنيف الثاني</th>
       <th scope="col">التصنيف الثالث</th>
       <th scope="col">التصنيف الرابع</th>
       <th scope="col">التصنيف الخامس</th>
     </tr>
   </thead>
   <tfoot>
     <tr>
       <td colspan="5">وصف محتوى الجدول</td>
     </tr>
   </tfoot>
   <tbody>
    <tr>
       <td>الخانة الأولى المرتبطة بالتصنيف الأول / السطر الأول</td>
       <td>الخانة الثانية المرتبطة بالتصنيف الثاني / السطر الأول</td>
       <td>الخانة الثالثة المرتبطة بالتصنيف الثالث / السطر الأول</td>
       <td>الخانة الرابعة المرتبطة بالتصنيف الرابع / السطر الأول</td>
       <td>الخانة الخامسة المرتبطة بالتصنيف الخامس / السطر الأول</td>
     </tr>
    <tr>
        <td>الخانة الأولى المرتبطة بالتصنيف الأول / السطر الثاني</td>
       <td>الخانة الثانية المرتبطة بالتصنيف الثاني / السطر الثاني</td>
       <td>الخانة الثالثة المرتبطة بالتصنيف الثالث / السطر الثاني</td>
       <td>الخانة الرابعة المرتبطة بالتصنيف الرابع / السطر الثاني</td>
       <td>الخانة الخامسة المرتبطة بالتصنيف الخامس / السطر الثاني</td>
     </tr>
    <tr>
        <td>الخانة الأولى المرتبطة بالتصنيف الأول / السطر الثالث</td>
       <td>الخانة الثانية المرتبطة بالتصنيف الثاني / السطر الثالث</td>
       <td>الخانة الثالثة المرتبطة بالتصنيف الثالث / السطر الثالث</td>
       <td>الخانة الرابعة المرتبطة بالتصنيف الرابع / السطر الثالث</td>
       <td>الخانة الخامسة المرتبطة بالتصنيف الخامس / السطر الثالث</td>
      </tr>
     <tr>
        <td>الخانة الأولى المرتبطة بالتصنيف الأول / السطر الرابع</td>
       <td>الخانة الثانية المرتبطة بالتصنيف الثاني / السطر الرابع</td>
       <td>الخانة الثالثة المرتبطة بالتصنيف الثالث / السطر الرابع</td>
       <td>الخانة الرابعة المرتبطة بالتصنيف الرابع / السطر الرابع</td>
       <td>الخانة الخامسة المرتبطة بالتصنيف الخامس / السطر الرابع</td>
     </tr>
     <tr>
        <td>الخانة الأولى المرتبطة بالتصنيف الأول / السطر الخامس</td>
       <td>الخانة الثانية المرتبطة بالتصنيف الثاني / السطر الخامس</td>
       <td>الخانة الثالثة المرتبطة بالتصنيف الثالث / السطر الخامس</td>
       <td>الخانة الرابعة المرتبطة بالتصنيف الرابع / السطر الخامس</td>
       <td>الخانة الخامسة المرتبطة بالتصنيف الخامس / السطر الخامس</td>
     </tr>
   </tbody>
 </table>