ما هي الجداول في HTML؟
الجداول تُستخدم لعرض المعلومات بشكل منظم في صفوف (rows) وأعمدة (columns).
مثال: جدول درجات، جدول حضور، أو جدول منتجات.
1. الوسوم الأساسية للجداول:
2. مثال على جدول بسيط
<table border="1">
<tr>
<th>الاسم</th>
<th>العمر</th>
</tr>
<tr>
<td>أحمد</td>
<td>25</td>
</tr>
<tr>
<td>سارة</td>
<td>30</td>
</tr>
</table>
شرح:
<tr>يُنشئ صف.<th>يستخدم للعناوين ويظهر بخط عريض.<td>يستخدم لعرض البيانات العادية.border="1"يضيف إطار للجدول (لأغراض التدريب).
3. دمج الأعمدة (colspan) والصفوف (rowspan)
دمج أعمدة:
<td colspan="2">محتوى يمتد على عمودين</td>
دمج صفوف:
<td rowspan="2">محتوى يمتد على صفين</td>
4. إضافة عنوان للجدول:
<caption>جدول الطلاب</caption>
مثال عملي كامل:
<!DOCTYPE html>
<html>
<head>
<title>جدول بيانات</title>
</head>
<body>
<h1>جدول درجات الطلاب</h1>
<table border="1">
<caption>النتائج النهائية</caption>
<tr>
<th>الاسم</th>
<th>الرياضيات</th>
<th>العلوم</th>
</tr>
<tr>
<td>محمد</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>ليلى</td>
<td>92</td>
<td>95</td>
</tr>
</table>
</body>
</html>
الواجب العملي
- أنشئ جدول يحتوي على 3 أعمدة: الاسم، العمر، الدولة.
- أضف صفين من البيانات.
- جرّب استخدام
captionودمج عمودين باستخدامcolspan.
ماذا سنتعلم في الدرس القادم؟
في الدرس السابع (الذي سبق وشرحناه) تعلّمنا النماذج (Forms) للتفاعل مع المستخدمين.