🌟 مقدمة تحفيزية : أهلاً بك مجدداً ! هل تساءلت يوماً كيف تعرض الشركات قوائم أسعارها ؟ أو كيف تعرض الأكاديميات جداول الحصص والدروس ؟ السر يكمن في الجداول . اليوم ستتعلم كيف ترتب معلوماتك في صفوف وأعمدة ، لتجعل موقعك يبدو منظماً كالمحترفين . 🏗️ 1. هيكل الجدول الأساسي لبناء جدول في HTML ، نستخدم عائلة من الوسوم تعمل معا :
• <table> : الحاوية الرئيسية للجدول .
• <tr> : لإنشاء صف (Table Row) .
• <th> : لإنشاء رأس العمود (Table Header) – ويكون الخط فيه عريضاً تلقائياً .
• <td> : لإنشاء خلية البيانات (Table Data) .
📊 2. مثال تطبيقي (جدول مسارات أكاديمية قياوي) : انسخ هذا الكود وجربه في ملفك لتشاهد السحر :
HTML
<table border="1">
<thead>
<tr>
<th>المسار التعليمي</th>
<th>المستوى</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>برمجة الويب (HTML)</td>
<td>مبتدئ</td>
<td>متاح الآن</td>
</tr>
<tr>
<td>برمجة بايثون</td>
<td>متوسط</td>
<td>قريباً</td>
</tr>
</tbody>
</table>
(ملاحظة للمتعلم : استخدمنا border=”1″ فقط لنرى الحدود، لاحقاً سنتعلم كيف نجعلها أجمل باستخدام CSS) .
💡 لماذا نستخدم الجداول ؟
في “أكاديمية قياوي”، نستخدم الجداول ليس فقط للأرقام ، بل لعرض :
1 . مقارنات بين الدورات .
2 . جداول المواعيد .
3 . توزيع الدرجات والنتائج .
🎯 تحدي المبرمج المنظم : قم بإنشاء جدول بسيط في صفحتك يعرض “جدولك الدراسي الأسبوعي” . اجعل العمود الأول لـ “اليوم” . والعمود الثاني لـ “المادة البرمجية” . أضف 3 صفوف على الأقل .