تضمين جدول متجاوب داخل المشاركات في قالب اقرأ

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

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

هنا في هذا الشرح سنبين لكم طريقة تضمين جداول متجاوبة داخل المشاركات والصفحات في قالب اقرأ الخاص بمنصة بلوجر.

ويمكن لمن لديه دراية بسيطة بمبادئ لغة البرمجة HTML أن يعمل جدول بكل سهولة ويضمنها داخل المشاركات، لتظهر بشكل جميل ومتجاوب في قالب اقرأ.

أما أولئك الذين ليس لديهم معرفة بلغة البرمجة HTML فسيمكنهم عمل جدول على الأقل بهذه اللغة في نهاية هذه المشاركة بإذن الله.

شرح بنية الجدول البرمجية

 لعمل جدول بلغة البرمجة HTML نحتاج أن نفهم مجموعة من الوسوم الخاصة بالجداول، وهي كالتالي:

<table> </table> وهو الوسم الأساسي الذي يعبر للمتصفح عن وجود جدول داخل المشاركة. داخل هذا الوسم يتم وضع جميع الوسوم الأخرى المتعلقة بالجدول مثل وسوم الأسطر والعواميد.

<thead> </thead> هذا الوسم هو الوسم الذي يسمح لنا بتحديد رأس الجدول، وبالتالي تفريقه عن باقي الجدول (أي جسم الجدول)

<tbody> </tbody> وهو الوسم الذي يشير إلى جسم الجدول.

<tr> </tr> هذا هو الوسم الذي يتم استخدامه لإضافة سطر إلى الجدول.

<td> </td> وهو الوسم الذي يسمح لنا بإضافة حقول إلى السطر (أي عواميد) في جسم الجدول.

 <th> </th> هذا الوسم هو الوسم الذي نستخدمه لإضافة حقول إلى الأسطر داخل رأس الجدول.

شرح طريقة بناء جدول

إذا بعد أن فهمنا الوسوم التي سنقوم باستخدامها في عملية بناء الجدول لتضمينه في مشاركات قالب اقرأ، نبدأ الآن ببناء نموذج لجدول خطوة بخطوة.

أولاً لبناء جدول يجب أن نضع الوسم الأساسي الذي يرمز للجدول وهو table، فيكون كود الجدول الخاص بنا في هذه المرحلة على الشكل التالي:

<table>

</table>-كود html-

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

<table>
<thead>

</thead>
<tbody>

</tbody>
</table>-كود html-

بعد هذه المرحلة سنقوم بإضافة الأسطر لجدولنا، والتي نحددها باستخدام وسم tr، فيصبح شكل الكود الخاص بالجدول الذي نعمل عليه على الشكل التالي (إذا أردنا إنشاء سطر لرأس الجدول، و9 أسطر لجسم الجدول)

<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>-كود html-

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

فيصبح شكل كود الجدول الخاص بنا على الشكل التالي (إذا أردنا إنشاء 4 حقول أي عواميد في كل سطر)

<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>-كود html-

الآن سيتوجب علينا ملء الحقول بما نريد، لتصبح على سبيل المثال كالتالي:

<table>
<thead>
<tr>
<th>نص تجريبي</th>
<th>نص تجريبي</th>
<th>نص تجريبي</th>
<th>نص تجريبي</th>
</tr>
</thead>
<tbody>
<tr>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
</tr>
<tr>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
</tr>
<tr>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
</tr>
<tr>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
</tr>
<tr>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
</tr>
<tr>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
</tr>
<tr>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
</tr>
<tr>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
</tr>
<tr>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
<td>نص تجريبي</td>
</tr>
</tbody>
</table>-كود html-

 بهذا الشكل نكون قد تمكنّا من صنع جدول بسيط بلغة html، ويتبقى لنا تنسيق الجدول وتنظيم حدوده ومسافاته وألوانه، ونحن في قالب اقرأ وفرنا عليكم ذلك، إذ كل ما عليكم فعله هو أن تضع جميع أكواد الجدول دخل الكود التالي:

<div class='post-table'>ضع هنا أكواد الجدول الخاصة بك</div>-كود html-

ثم نأخذ الكود الخاص بنا ونضعه في مشاركتنا في وضعية "عرض HTML" ليظهر الكود الأعلى كما التالي:

نص تجريبي	نص تجريبي	نص تجريبي	نص تجريبي
نص تجريبي	نص تجريبي	نص تجريبي	نص تجريبي
نص تجريبي	نص تجريبي	نص تجريبي	نص تجريبي
نص تجريبي	نص تجريبي	نص تجريبي	نص تجريبي
نص تجريبي	نص تجريبي	نص تجريبي	نص تجريبي
نص تجريبي	نص تجريبي	نص تجريبي	نص تجريبي
نص تجريبي	نص تجريبي	نص تجريبي	نص تجريبي
نص تجريبي	نص تجريبي	نص تجريبي	نص تجريبي
نص تجريبي	نص تجريبي	نص تجريبي	نص تجريبي
نص تجريبي	نص تجريبي	نص تجريبي	نص تجريبي

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