ما هي مجموعة رؤوس الجدول؟
في CSS ، ' مجموعة رأس الجدول 'لعرض رأس الجدول عبر' <رأس> ' بطاقة شعار. يتوافق الرأس مع الإدخال الأول في عمود رأسي. تحدد معلومات حول إدخالات الجدول. يمكن أن يمتد الرأس أيضًا على عدة أعمدة إذا لزم الأمر. يمكن تنفيذ ذلك عن طريق إنشاء مجموعة عمود جدول في CSS.
مثال
يحتوي رأس الجدول على تنسيق مختلف عن باقي الإدخالات في الجدول لتمييزه بصريًا. يتم تمثيلها عادةً بحجم خط غامق أو نص بحجم كبير. عند إدراج أسماء 'رجال' و 'نساء' ، يمكننا تعيينها كرؤوس في صف منفصل كما هو موضح في المثال أدناه:
< طاولة >
< thead >
< آر >
< ذ > رجال < / ذ >
< ذ > نحيف < / ذ >
< / آر >
< / thead >
< tbody >
< آر >
< td > جوامع < / td >
< td > جيسيكا < / td >
< / آر >
< آر >
< td > ديفيد < / td >
< td > لورا < / td >
< / آر >
< آر >
< td > يعقوب < / td >
< td > ريبيكا < / td >
< / آر >
< / tbody >
< / طاولة >
توضح الخطوات التالية كيفية إنشاء Table-Header:
- أضف ال ' <جدول> 'لإنشاء جدول.
- في الخطوة التالية ، حدد ' <رأس> 'التي تشير إلى رأس الجدول.
- أضف قيم الرأس كصف عبر علامة '
' وأغلق الرأس عبر علامة ''. - الآن ، قم بتضمين ' 'لبدء نص الجدول.
- أدخل البيانات لكل صف باستخدام علامة “
' و ' '، على التوالي.”. - اختتم نص الجدول والجدول عبر '
انتاج |
ما هي مجموعة تذييل الجدول؟
ال ' مجموعة تذييل الجدول 'لعرض تذييل جدول في CSS بمساعدة' ' بطاقة شعار. يوفر التذييل أيضًا معلومات حول محتوى الجدول يمكن أن تساعد القارئ في فهم البيانات بشكل أكثر وضوحًا. باستخدام نفس المثال من الجزء السابق ، أضف التذييل الذي يعطي العدد الإجمالي للإدخالات في كل عمود لـ 'رجال' و 'نساء' في الجدول.
مثال
< طاولة >
نظرة عامة على المثال التالي الذي يشرح المفهوم الذي تمت مناقشته:
< thead >
< آر >
< ذ > رجال < / ذ >
< ذ > النساء < / ذ >
< / آر >
< / thead >
< tbody >
< آر >
< td > جيمس < / td >
< td > جيسيكا / td >
< / آر >
< آر >
< td > ديفيد < / td >
< td > لورا < / td >
< / آر >
< آر >
< td > يعقوب / td >
< td > ريبيكا / td >
< / آر >
< / tbody >
< tfoot >
< آر >
< td فصل = 'bg-grey-200' > المجموع 03 < / td >
< td فصل = 'bg-grey-200' > المجموع 03 < / td >
< / آر >
< / tfoot >
< / طاولة >تشرح الخطوات التالية خطوات إنشاء تذييل جدول:
- على غرار المثال السابق ، أضف ' <جدول> 'لإنشاء / تضمين جدول.
- تشمل ' <رأس> 'لتحديد رأس الجدول.
- الآن ، وبالمثل ، أضف عناوين الرأس كصف وأغلق الرأس عبر ' ' بطاقة شعار.
- استرجع الأساليب التي تمت مناقشتها لتحديد جسم الجدول وتضمين البيانات فيه.
- الآن ، أضف ' 'لبدء تذييل الجدول.
- أضف بيانات تذييل الجدول كصف وأغلق التذييل باستخدام '
' بطاقة شعار. - أخيرًا ، اختتم الجدول باستخدام ' ' بطاقة شعار.
انتاج |
يولد الكود المكتوب أعلاه النتيجة التالية:
خاتمة
يساعد الرأس والتذييل الموجودان في الجدول في CSS على إضافة مزيد من المعلومات في أعلى الجدول وأسفله ، على التوالي. تساعد هذه المعلومات في تحديد موضوع الجدول وتوفر مزيدًا من التفاصيل المضمنة في القيم المدرجة في الجدول. يعمل هذان معًا على تأطير البيانات المغلفة داخل الجدول بشكل مثالي.
- الآن ، قم بتضمين ' 'لبدء نص الجدول.