HTML : التعامل مع الجداول
قد ترغب ذات مرّة في تكوين جدول من البيانات يساعدك في تنظيم وترتيب المعلومة وفرزها الفرز الصحيح، وفي هذه التدوينة سنتعرّف على كيفية التعامل مع الجداول في لغة HTML من أجل تكوين ذلك بيُسرٍ وسهولة.
ماهي الجداول (Tables) ؟
هو عبارة عن وسم يجمع عدة عناصر بأوسمتها في آنٍ واحد لتكوين جدول متكامل بياناته؛ كيف ذلك ؟ سنتعرف على ذلك في السلسلة القادمة بتفصيل متقدم.
الهيكلة العامة لكتابة الجداول (Tables)
يُمكننا التعرف على الصورة العامة للجداول بالصورة الآتية :
<table>
<tr>
<th>العمود الأول</th>
<th>العمود الثاني</th>
</tr>
<tr>
<td>عنصر العمود الأول</td>
<td>عنصر العمود الثاني</td>
</tr>
</table>
وصف الهيكلة
- الوسم <table> وإغلاقه </table> عبارة عن بادئة لتكوين جدول جديد.
- الوسم <tr> وإغلاقه </tr> لتكوين صف جديد ضمن الجدول وتعريفه بالمحتويات.
- الوسم <th> وإغلاقه </th> لتكوين صفوف رؤس الجدول.
- الوسم <td> وإغلاقه </td> لتكوين محتويات الصف تحت كل رأس للجدول.
الخصائص المُضمّنة بالجداول (Tables)
| الخاصية | النوع | مثال | الوصف |
| border | تكوين اطار للجدول | <table border="1"></table> |
يُمكنك استخدام هذه الخاصية لتكوين اطار وتفعيل حدود الجدول بشكلٍ كامل. |
| width | تحديد العرض للجدول | <table width="100%"></table> |
يُمكنك استخدام هذه الخاصية لتحديد مدى الجدول بجعله متمدد بكامل الصفحة. |
| dir | تحديد اتجاه النصوص | <table dir="rtl"></table> |
يُمكنك استخدام هذه الخاصية لتحديد اتجاه النصوص بجعله rtl أو ltr. |
| rowspan | مسافة صفّية | <th rowspan="4"></th> |
يُمكنك استخدام هذه الخاصية لأخذ مساحة صفية بين الصف الأول والصفوف الأخرى. |
| cellpadding | مسافة بين الحدود والمحتوى | <table cellpadding="15"></table> |
يُمكنك استخدام هذه الخاصية لإنشاء مسافة بين المحتوى ضمن الصف والحدود بشكلٍ متساوي.. |
| cellspacing | مسافة بين الحدود والصفوف | <table cellspacing="15"></table> |
يُمكنك استخدام هذه الخاصية لإنشاء مسافة بين الحدود والصفوف بشكلٍ متساوي. |
| style | تكوين التنسيقات | <table style="color:red; font-size:18px; "></table> |
يُمكنك استخدام هذه الخاصية لإنشاء التنسيقات على جدولك بوضع تلوينات أو قياسات مخصصة للنصوص الخ… |
في تكوينك لأيّ جدول ستحتاج لإحدى الخصائص السابقة وكل واحدة من تلك الخصائص تعبر أو ألية مُعينة فمنها ما يساندك في تكوين عرض الجدول والآخر لتحسين منظر الجدول، أيضًا من الخصائص ما يجعل لك التوافق ما بين اللغة العربية كتغيير اتجاه النصوص، وكذلك العديد من الخصائص المُمكن استخدامها ضمن جدولك.
الأن يُمكنك تجربة ما سبق من خلال اختبار الأكواد ورؤيتها مباشرةً.
[button url=”http://codepen.io/okfie984/pen/BjGpjo” target=”blank” style=”flat” background=”#1d1954″ size=”6″ radius=”round” icon=”icon: code” desc=”انقر هنا لإختبار الأكواد”]جرّب الأمثلة الأن! [/button]