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

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

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

http://i1258.photobucket.com/albums/...p/453702cd.png

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

شرح الإضافة :
أولا نضيف كود 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('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2gjh1nPI/AAAAAAAACbg/7lNsVpks2oY/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('http://1.bp.blogspot.com/_xDpoN6UfFFY/S-J2f5yBC3I/AAAAAAAACbY/zWXYXsR-w5E/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('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2hsztUzI/AAAAAAAACbo/ztV1CK0RUrE/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>

إذا أعجبك الموضوع اضغط زر الإعجاب الخاص بالفيسبوك أسفله. أي استفسار لا تتردد بطرحه :D