جاري التحميل...
جاري التحميل...
إضافة معلومات إضافية وهيكلة البيانات
الخصائص هي معلومات إضافية نضعها داخل علامة الفتح لتغيير سلوك العنصر أو مظهره، أو لتوفير بيانات وصفية عنه. تأتي دائماً على شكل اسم="قيمة".
إذا كانت العلامة هي الاسم (سيارة)، فإن الخصائص هي الخصائص (color="red"، model="2026").
💡 تشبيه:
إذا كانت العلامة هي "اسم السيارة" (مثل تويوتا)، فإن الخصائص هي "خصائص السيارة" (color="red"، year="2026"). كل خاصية ت提供更多 معلومات عن العنصر.
هناك خصائص يمكن استخدامها مع معظم علامات HTML:
id: يعطي معرفاً فريداً للعنصر في الصفحة. لا يجب تكرار نفس الـ id في صفحة واحدة. يُستخدم الوصول للعنصر باستخدام JavaScript أو للتنقل الداخلي.class: يُستخدم لتصنيف العناصر. يمكن إعطاء نفس الـ class لعدة عناصر، ويمكن للعنصر الواحد أن يكون له عدة classes (مفصولة بمسافات). الاستخدام الأساسي هو مع CSS لتطبيق الأنماط.style: يُستخدم لإضافة أنماط CSS مباشرة للعنصر (Inline CSS). يُفضل تجنبه واستخدام ملفات CSS خارجية.title: يعرض تلميحاً عند المرور فوق العنصر.💡 قاعدة مهمة لـ id مقابل class:
id فريد - لا يمكن تكراره في الصفحة. استخدمه لعنصر مميز واحد.
class قابل للتكرار - يمكن استخدامه مع عناصر متعددة. استخدمه لنمط عدة عناصر بنفس النمط.
تُستخدم الجداول لعرض البيانات الجدولية، مثل جداول الأسعار، الإحصائيات، أو أي بيانات تتكون من صفوف وأعمدة.
العلامات الأساسية لبناء جدول:
<table>: الحاوية الرئيسية للجدول.<tr>: يمثل صف في الجدول (Table Row).<th>: يمثل خلية رأس الجدول (Table Header). النص داخلها عريض ومميز.<td>: يمثل خلية بيانات عادية (Table Data).<thead>: يمثل رأس الجدول ويحتوي على صفوف الرؤوس.<tbody>: يمثل جسم الجدول ويحتوي على بيانات الصفوف.<tfoot>: يمثل تذييل الجدول للمجاميع.💡 ملاحظة:
الجداول تُستخدم فقط للبيانات الجدولية، وليس لتنسيق الصفحة! استخدم CSS لتنسيق التخطيط.
يمكننا استخدام خصائص إضافية للتحكم في مظهر الجدول:
colspan: يدمج عدة أعمدة في خلية واحدة.rowspan: يدمج عدة صفوف في خلية واحدة.border: يضيف حدوداً للجدول.💡 ملاحظة:
يُفضل استخدام CSS لتنسيق الجداول بدلاً من خصائص HTML المباشرة مثل border.
دعنا نرى كيف نبني جدول مقارنة منتجات حقيقية:
اسم="قيمة"<table>، <tr>، <th>، <td>colspan وrowspan<thead>، <tbody>، <tfoot> لتنظيم الجدولما الفرق بين id و class؟
أي العلامات تُستخدم لدمج عمودين في جدول؟
أنشئ جدول مقارنة بين 3 منتجات يتضمن: رأس الجدول بأسماء المنتجات، صفوف بالمواصفات (السعر، الحجم، اللون)، وصفوف مدمجة للعروض الخاصة.
الحل:
<table border="1">
<caption>جدول رواتب الموظفين</caption>
<thead>
<tr>
<th>الاسم</th>
<th>الوظيفة</th>
<th>الراتب</th>
</tr>
</thead>
<tbody>
<tr>
<td>أحمد محمد</td>
<td>مطور</td>
<td>8000 ر.س</td>
</tr>
<tr>
<td>سارة علي</td>
<td>مصممة</td>
<td>7500 ر.س</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">المتوسط</td>
<td>7750 ر.س</td>
</tr>
</tfoot>
</table>أنشئ جدول يعرض درجات الطلاب:
<caption> بعنوان "درجات الطلاب"colspanscope على جميع عناصر <th>💡 استخدم <code><thead></code> و<code><tbody></code> و<code><tfoot></code> لتنظيم الجدول بشكل صحيح. يمكن حساب المتوسط كمتوسط الدرجات الثلاث.
الخصائص العامة:
id - معرف فريد للعنصرclass - اسم فئة CSS (قابل للمشاركة)style - أنماط CSS مباشرةtitle - نص تلميحي عند المرورhidden - يخفي العنصرهيكل الجدول:
<table> - حاوية الجدول<caption> - عنوان الجدول<thead> - مجموعة رأس الجدول<tbody> - مجموعة جسم الجدول<tfoot> - مجموعة تذييل الجدول<tr> - صف جدول<th> - خلية رأس<td> - خلية بيانات<!-- جدول بخصائص -->
<table border="1" style="width:100%">
<caption>جدول الموظفين</caption>
<thead>
<tr>
<th scope="col">الاسم</th>
<th scope="col">الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td>أحمد</td>
<td>مطور</td>
</tr>
</tbody>
</table>دمج الأعمدة والصفوف:
colspan="n" - دمج n أعمدةrowspan="n" - دمج n صفوفscope="col" - رأس لعمودscope="row" - رأس لصف