شرح طريقة انشاء وعمل الجداول في صفحات أو مواضيع مدونة بلوجر

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

انشاء وعمل الجداول في صفحات أو مواضيع مدونة بلوجر

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

هذا مثال للجدول : 

الترتيب	الموضوع	التصنيف	عدد التعليقات	عدد المشاهدة
ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات
1	إضافة خاصية إقرأ المزيد	إضافات بلوجر	30	245
2	إدراج إعلانات أدسنس	إضافات بلوجر	25	230
3	كيفية إنشاء منتدى	دروس بلوجر	21	190
4	فهرسة مواضيع المدونة	دروس بلوجر	19	187
5	أزرار المفضلات الاجتماعية	أزرار	11	95

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

]]></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/AVvXsEjgiWQehki5dXw_ssv_sXXdrfv7tSQjULm9UBPuDfAcUzxQ1GiwEmaMTs2_KBY8PCypX9Ua0ft97pLGVnL-FtLAxQcvQEUif8hCDB7nZ7y-qOepaXfqaM8z8enz5NEqVaBxkQNSjQBglAIi/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/AVvXsEgFuxkijkfKaTGOhMRVzamjmyudQw5EpaxTw2GCbFl5UwIv7vGGfq29zx_yb1mACfC1L2nDnTZAvDLlYImLRDTgvDNcE9uDBCeGRnLHVYhXCEfZ4CN3vQBl0hcPY4ytyUuKCEZF5DHCRAsi/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/AVvXsEivZ29gcC6jl1aNTbNw8-GgAhSkuYKo95XJGUfE11xl0IFSIAILSZyVflzb4-kKc_vKKFx-ofHuUJc6CDYjxLqB_7KAMQUntYrIf_gsLiG7acBj7MzzA6kqylOEoBicvtYclU0i05_d24cg/s1600/gradhover.png') repeat-x;
    color: #339;
}
#tableau a:hover {
    text-decoration:underline;
}

وهذا الكود هو المسؤول عن الألوان وتأثيرات تمرير الماوس على الجدول  :
والآن وعند كتابتك لموضوع معين تريد إضافة الجدول,  نلصق هذا الكود من تحرير Html للرسالة حيث يمثل هذا الكود ،جدولا يتألف من 5 خانات عمودية و7 خانات أفقية ،وهو الجدول الذي قمنا بإنشائه في المثال أول الموضوع وسوف أقوم بشرح كيفية إضافة كل خانة على حدى لتلائم المعطيات المراد ادراجها في الجدول.

<table id="tableau" 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>1</td>
      <td>إضافة خاصية إقرأ المزيد</td>
      <td>إضافات بلوجر</td>
      <td>30</td>
      <td>245</td>
    </tr>
    <tr>
      <td>2</td>
      <td>إدراج إعلانات أدسنس</td>
      <td>إضافات بلوجر</td>
      <td>25</td>
      <td>230</td>
    </tr>

    <tr>

      <td>3</td>
      <td>كيفية إنشاء منتدى</td>
      <td>دروس بلوجر</td>
      <td>21</td>
      <td>190</td>
    </tr>

    <tr>

      <td>4</td>
      <td>فهرسة مواضيع المدونة</td>
      <td>دروس بلوجر</td>
      <td>19</td>
      <td>187</td>
    </tr>

    <tr>

      <td>5</td>
      <td>أزرار المفضلات الاجتماعية</td>
      <td>أزرار</td>
      <td>11</td>
      <td>95</td>
    </tr>
  </tbody>
</table>

لإضافة أو حذف الخانات الأفقية الموجودة في السطر الأول (الترتيب،الموضوع،التصنيف..) نقوم بالتعديل على الكود المحصور بين الوسمين  thead و thead /  

وذلك بحذف أو إضافة  الكود ذي اللون الأزرق من بين الأكواد المحصورة بينهما مع تغيير كلمة " الترتيب" بالكلمة التي تريد .

  <thead>
    <tr>
      <th scope="col">الترتيب</th>
   </tr>
  </thead>

 ولإضافة الأسطر الأفقية (1،إضافة خاصية إقرأ المزيد،إضافات بلوجر...) نقوم بتحديد  الوسم .

<tbody>

نقوم بإضافة هذا الكود تحته , حيث يمثل هذا الكود الخانات الأفقية من اليمين إلى اليسار 

<tr>

      <td>1</td>

      <td>إضافة خاصية إقرأ المزيد</td>

      <td>إضافات بلوجر</td>

      <td>30</td>

      <td>245</td>

    </tr>

 ولزيادة عدد الخانات الأفقية ،نقوم بزيادة الكود دي الخلفية الصفراء تحته مباشرة بعدد المرات التي نريد فيها إضافة الخانات مع تبديل العدد 245 بالكلمة التي تريد .

ولتبديل عنوان الجدول ،والموجود في أسفله نقوم بتحديد هذا الكود وتغيير ما لون بالأزرق

<td colspan="5">ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات</td>

 حيث يتم حساب عرض العنوان بطريقة تلقائية وهو يساوي عدد الخانات العمودية ,حيث يمثل العدد" 5" عدد الخانات العمودية في هذا المثال ويجب تعديله بالعدد المطلوب حسب الجدول الدي تريد إنشاءه.

• وهذه الصورة توضح تنسيق الجدول مع الكود ,إضغط على الصورة لتكبيرها 

المصدر : مدونة أبو اياد