شرح طريقة اضافة جدول الى مشاركاتك فى مدونات بلوجر

طريقة انشاء جدول فى مدونات بلوجر

 

بسم الله الرحمن الرحيم

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

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

مثال لشكل الجدول

الترتيب	الموضوع	التصنيف	عدد التعليقات	عدد المشاهدة
مثال ادراج جدول فى مدونات بلوجر www.Ra3dNet.com
1	طريقة اضافة جدول	دروس بلوجر	39	295
2	تعلم لغة html	لغات البرمجة	71	280
3	طريقة تركيب منتدى vb	تطوير المواقع والمنتديات	21	190
4	ارشفة موقعك فى جوجل	اشهار المواقع	32	247
5	ادوات الفوتوشوب	التصميم	120	540

توجه الى لوحة التحكم الخاصة بمدونتك ثم حدد من القائمة الخيار  ( تصميم ) او (design) ثم اختر تحرير html  ثم ضع علامة على توسيع القالب   ثم اضغط على Ctrl + F ليظهر لك مربع البحث وابحث فيه عن هذا الكود

]]></b:skin>

ثم قم بنسخ هذا الكود قبله مباشرة :

#tableau {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 10px 0;
    width: 100%;
    text-align: right;
    border-collapse: collapse;
}
#tableau th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCxLoiu8OkhskVh1JCXnuE7GfRbkmCpQ80VS7A3sFcW2LgVzf_zokyVkcScbwLylTxg8W86BgmdXTU6sz4uGLJNdOBEC2Dsd1fKYHfpyXNE512diPtx5eb957tDWaDhrzigchMeCnTPUxv/s1600/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
}
#tableau 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/AVvXsEjuKKcu3sxX7QTX41cLywDu4OoEizztwoe-o3xR1tI7JPGSV1QFH5aVIHj7CvE8LyZHTg1khvdx24aA5nl16_EuMS2o5O_tLBOBiMBZoAUHI2V7OxikBokjhjkumc7qYerqoUrzYLYJU-WN/s1600/gradback.png') repeat-x;
}
#tableau tfoot tr td {
    background: #e8edff;
    font-size: 16px;
    color: #99c;
    text-align:center;
}
#tableau tbody tr:hover td {
    background: #d0dafd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Ogkn0bCgbf8XWhPRCcVdW8W2GgWnTjBkrYSI4i6md9wyu_GHhTBjULwRZ6ftaJqVWi5BiZIajsotX6VtzZDC4FGeugS8hGUTFElbfPg8pVL0VYuRuTsh_uQhd9lNys6ZNAlhFQjlLXeA/s1600/gradhover.png') repeat-x;
    color: #339;
}
#tableau a:hover {
    text-decoration:underline;
}

ويعتبر هذا الكود هو المتحكم فى خصائص الجدول من حيث الالوان وتاثيرات تحريك الماوس عليه ويمكنك تغييرها حسب رغبتك وهى الكلمات الملونة فى الكود.
 ثم الان قم ببدأ كتابة المشاركة التى تحتاج الجدول فيها
ومن خيار HTML 
قم بنسخ هذا الكود :

<table id="tableau" summary="مثال ادراج جدول فى مدونات بلوجر www.Ra3dNet.com">
<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">مثال ادراج جدول فى مدونات بلوجر www.Ra3dNet.com</td>
    </tr>
</tfoot>
  <tbody>
<tr>
      <td>1</td>
      <td>طريقة اضافة جدول<br />
</td>
      <td>دروس بلوجر</td>
      <td>39</td>
      <td>295</td>
    </tr>
<tr>
      <td>2</td>
      <td>تعلم لغة html</td>
      <td>لغات البرمجة<br />
</td>
      <td>71</td>
      <td>280</td>
    </tr>
<tr>
      <td>3</td>
      <td>طريقة تركيب منتدى vb</td>
      <td>تطوير المواقع والمنتديات<br />
</td>
      <td>21</td>
      <td>190</td>
    </tr>
<tr>
      <td>4</td>
      <td>ارشفة موقعك فى جوجل</td>
      <td>اشهار المواقع<br />
</td>
      <td>32</td>
      <td>247</td>
    </tr>
<tr>
      <td>5</td>
      <td>ادوات الفوتوشوب</td>
      <td>التصميم</td>
      <td>120</td>
      <td>540</td>
    </tr>
</tbody>
</table>

والتعديل على الجدول يعتبر سهل جدا من حيث اضافة الخانات الافقية والراسية او ازالتها او تغيير محتوى الجدول