جداول HTML

الجداول (<table>) تعرض البيانات المنظمة على صفحات الويب. مبنية من صفوف (<tr>) وخلايا (<td> / <th>)، وهي الخيار القياسي للجداول الزمنية وجداول الأسعار وتقارير البيانات والمحتوى المماثل.

هيكل الجدول الأساسي

الجدول الأدنى يتطلب على الأقل <table> وصفوف (<tr>) وخلايا بيانات (<td>):

مثال

<table border="1" width="100%">
<tr>
<th>الاسم</th>
<th>العمر</th>
<th>المدينة</th>
</tr>
<tr>
<td>أحمد</td>
<td>25</td>
<td>القاهرة</td>
</tr>
<tr>
<td>سارة</td>
<td>30</td>
<td>لندن</td>
</tr>
</table>

سمات الجدول الشائعة

يمكنك إضافة سمات أساسية إلى <table> و <td> للتحكم في المظهر — ومع ذلك، لاحظ أن معظمها مهملة في HTML5، و CSS هو البديل الموصى به. لكن فهمها كمبتدئ يساعد في استيعاب كيفية عرض الجداول:

<table border="1" width="100%">
### مثال
<tr>
<th align="left">الاسم</th>
<th width="60%">السيرة</th>
</tr>
<tr>
<td valign="top">أحمد</td>
<td>مطور واجهة أمامية</td>
</tr>
</table>

السمةالغرضبديل CSSborderتعيين حدود الجدول (مثل border="1")خاصية CSS border``widthعرض الجدول أو الخليةخاصية CSS width``alignمحاذاة أفقية (يسار / وسط / يمين)خاصية CSS text-align``valignمحاذاة رأسية (أعلى / وسط / أسفل)خاصية CSS vertical-align

دمج الخلايا

استخدم colspan لدمج الأعمدة أفقيًا و rowspan لدمج الصفوف رأسيًا:

<table border="1">
<tr>
<th>الاسم</th>
<th colspan="2">معلومات الاتصال</th>
</tr>
<tr>
<td rowspan="2">أحمد</td>
<td>البريد الإلكتروني</td>
### مثال
<td>ahmed@mail.com</td>
</tr>
<tr>
<td>الهاتف</td>
<td>555-0000-0000</td>
</tr>
</table>

هيكل الجدول الدلالي

بالإضافة إلى <table> و <tr> الأساسيين، يوفر HTML مجموعة من الوسوم الدلالية لتنظيم أجزاء الجدول المختلفة:

<table border="1">
<caption>تقرير مبيعات 2026</caption>
<thead>
<tr>
<th>الربع</th>
<th>الإيرادات</th>
<th>الربح</th>
</tr>
### مثال
</thead>
<tbody>
<tr><td>الربع الأول</td><td>100K$</td><td>20K$</td></tr>
<tr><td>الربع الثاني</td><td>120K$</td><td>25K$</td></tr>
</tbody>
<tfoot>
<tr><td>الإجمالي</td><td>220K$</td><td>45K$</td></tr>
</tfoot>
</table>

• <caption> عنوان الجدول، يُعرض أعلى الجدول افتراضيًا
• <thead> قسم رأس الجدول، يحتوي عادةً على صفوف عناوين الأعمدة
• <tbody> جسم الجدول، يحتوي على صفوف البيانات
• <tfoot> قسم تذييل الجدول، مثالي للملخصات أو الإحصائيات

❓ أسئلة شائعة

📖 ملخص

• <table> يحدد جدولاً؛ <tr> صفوف؛ <th> رؤوس؛ <td> خلايا بيانات
• <caption> عنوان الجدول؛ <thead> رأس؛ <tbody> جسم؛ <tfoot> تذييل
• colspan يدمج الخلايا أفقيًا؛ rowspan يدمج الخلايا رأسيًا
• لا تستخدم الجداول أبدًا لتخطيط الصفحة (هذه مهمة CSS)؛ الجداول فقط لعرض البيانات

📝 تمارين

1. جدول حصص: استخدم <table> لإنشاء جدول حصص دراسية برؤوس (الاثنين إلى الجمعة) وعلى الأقل 4 صفوف من الحصص.
2. تمرين الدمج: أنشئ تقرير درجات بخلايا مدمجة — الرأس يحتوي على "اسم الطالب" و"درجات المواد" (colspan يغطي أعمدة اللغة العربية والرياضيات والعلوم).