[admin]

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

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



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

شرح الإضافة :
أولا نضيف كود 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