مسرور للقائك مجددا صديقي وايضا مسرور لانك تواظب على اكمال دورة html خاصتي، لقد قطعت جزءا كبيرا من رحلتك والان سنكملها معا بشرح الجدول وعناصره.
ما هي الجداول - Tables
الجداول هي وسيلة لعرض البيانات في صفوف وأعمدة.او بمعنى اخر محموعة من الخلايا المتجمعة مع بعضها، نستخدم الجدول في تنظيم المعلومات وعرضها بشكل سلس لكي يسهل علينا قراءتها.
كيفية إنشاء جدول بسيط
ليتم إنشاء الجداول اولا يجب اعلام المتصفح بانك تريد عمل واحد باستخدام الوسم <table>، ويتم تقسيمها إلى صفوف باستخدام الوسم <tr>، وإلى أعمدة باستخدام الوسم <td>
ملحوظة: بعض الكلمات مختصرة كالتالي:
- tr: اختصار الى table row وتعني صف الجدول
- td: اختصار الى table data وتعني بيانات الجدول
بعد ان تعرفت على العناصر لإنشاء جدول بسيط في HTML، يمكنك استخدام الكود التالي:
<table>
<!-- صف الخلايا الاولة -->
<tr>
<td>الخلية 1</td>
<td>الخلية 2</td>
</tr>
<!-- صف الخلايا الثانية -->
<tr>
<td>الخلية 3</td>
<td>الخلية 4</td>
</tr>
</table>
إضافة رؤوس الجداول
لإضافة رؤوس إلى الجدول، يمكنك استخدام الوسم <th> بدلاً من <td> في الصف الأول من الجدول:
<table>
<!-- صف الراوس -->
<tr>
<th>رأس 1</th>
<th>رأس 2</th>
</tr>
<!-- صف الخلايا -->
<tr>
<td>الخلية 3</td>
<td>الخلية 4</td>
</tr>
</table>
كيفية دمج الخلايا
يمكنك دمج الخلايا في الجدول باستخدام الخاصيتين rowspan وcolspan.
- rowspan: تستخدم لدمج الخلايا المرتبة تحت بعضها مباشرة اي في نفس العمود
- colspan: تستخدم لدمج الخلايا المرتبة بجانب بعضها مباشرة اي في نفس الصف
على سبيل المثال، لدمج خليتين في صف واحد، يمكنك استخدام الكود التالي:
<table>
<tr>
<!-- ستظهر الخلية في اثنين حانب بعض -->
<td colspan="2">خلية مدمجة</td>
</tr>
<tr>
<td>الخلية 1</td>
<td>الخلية 2</td>
</tr>
</table>اما لدمج خليتين في عمود واحد تحت بعض فيمكنك استخدام الكود التالي:
<table>
<tr>
<!-- ستظهر الخلية في اثنين تحت بعض -->
<td>خلية 1</td>
<td rowspan="2">خلية مدمجة</td>
</tr>
<tr>
<td>الخلية 1</td>
</tr>
</table>جعل الجدول محدد
لكي تستطيع رؤية الحدود الفاصلة بين كل خليه والاخرى يجب ان نزود جدولنا بخاصية من خصائص html التي تسما border وتاخذ قيمة رقم لتحديد حجم ذلك الحد بالبكسل.
انظر لهذا المثال لتفهم اكثر:
<table border="1">
<!-- صف الراوس -->
<tr>
<th>رأس 1</th>
<th>رأس 2</th>
</tr>
<!-- صف الخلايا -->
<tr>
<td>الخلية 3</td>
<td>الخلية 4</td>
</tr>
</table>
ملوحظة: كل التنسيقات الخاصة بشكل الجدول التي نعلمها لك الان مثل خاصية الحدود السابقة ليست الا مجرد معلومة جانبية لانك انشاء الله عند تعلمك للغة css سيكون بحوذتك تغيير وتخصيص اي شئ في الجدول مثل الالوان والحجم وغيرها ولن تحتاج لاستخدام خصائص html.
الوسم caption
هذا الوسم يستخدم لكي ننشئ عنوان يظهر مع الجدول يمكنك توضيح نوع المعلومات الموجودة في الجدول باستخدامه، لفعل ذلك ضع العنوان داخل <caption></caption> وهذا مباشرة بعد عنصر الجدول الرئيسي.
اليك المثال ليوضح لك:
<table>
<caption>قوائم المشتريات</caption>
<tr>
<th>فاكهة</th>
<th>خضار</th>
<th>ملابس</th>
</tr>
<!-- صف اول -->
<tr>
<td>فاكهة 1</td>
<td>خضار 1</td>
<td>ملابس 1</td>
</tr>
<!-- صف ثان -->
<tr>
<td>فاكهة 2</td>
<td>خضار 2</td>
<td>ملابس 2</td>
</tr>
<!-- صف ثالث -->
<tr>
<td>فاكهة 3</td>
<td>خضار 3</td>
<td>ملابس 3</td>
</tr>
</table>