ما هي أهمية تعليق الجدول؟
تُستخدم 'التسميات التوضيحية للجدول' لإعطاء عناوين للجداول بحيث يمكن للمستخدم تحديد معنى كل جدول وكيفية الاستفادة من البيانات الموجودة فيه. يمكن أن تساعد التسميات التوضيحية أيضًا في ترقيم الجداول على صفحة ويب لتسهيل الوصول إلى البيانات الموجودة فيها.
تعطي التسميات التوضيحية سياقًا دقيقًا لكل جدول في مستند أو صفحة ويب حيث يوجد عدد كبير من الجداول. علاوة على ذلك ، تتأكد التسميات التوضيحية المنظمة من أن القراء يفهمون بسرعة البيانات الموجودة في كل جدول.
كيفية استخدام التسمية التوضيحية للجدول في Tailwind CSS؟
في Tailwind CSS ، تتم إضافة تسمية توضيحية إلى جدول باستخدام '
مثال: إضافة تسمية توضيحية للجدول إلى أعلى وأسفل الجدول
في الكود التالي ، سنضيف 'تسمية توضيحية' إلى أعلى وأسفل الجدول على النحو التالي:
< طاولة >
< طاولة فصل = 'min-w-full border-gray-300 divide-y divide-gray-300' >
< thead >
< آر >
< ذ فصل = 'py-2 px-4 bg-grey-100 border-b' >
اسم
< / ذ >
< ذ فصل = 'py-2 px-4 bg-grey-100 border-b' >
بريد إلكتروني
< / ذ >
< ذ فصل = 'py-2 px-4 bg-grey-100 border-b' >
بطاقة تعريف
< / ذ >
< ذ فصل = 'py-2 px-4 bg-grey-100 border-b' >
اتصال
< / ذ >
< / آر >
< / thead >
< tbody >
< آر >
< td فصل = 'py-2 px-4 border-b' > جوامع < / td >
< td فصل = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td فصل = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td فصل = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / آر >
< آر >
< td فصل = 'py-2 px-4 border-b' > ميخائيل < / td >
< td فصل = 'py-2 px-4 border-b' > michael@tsl.com < / td >
< td فصل = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td فصل = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / آر >
< آر >
< td فصل = 'py-2 px-4 border-b' > ديفيد < / td >
< td فصل = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td فصل = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td فصل = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / آر >
< آر >
< td فصل = 'py-2 px-4 border-b' > نفذ < / td >
< td فصل = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td فصل = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td فصل = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / آر >
< / tbody >
< التسمية التوضيحية >
المعلومات الشخصية للموظفين
< / التسمية التوضيحية >
< / طاولة >
< التسمية التوضيحية >
اسم الشركة
< / التسمية التوضيحية >
اتبع هذه الخطوات في الكود أعلاه:
- قم بإنشاء جدول باستخدام ' <جدول> ' بطاقة شعار.
- حدد تنسيق الجدول عبر فئة الأداة المساعدة.
- حدد عناوين الجدول 'الاسم' و 'البريد الإلكتروني' و 'المعرف' و 'جهة الاتصال' عبر ' <رأس> ' بطاقة شعار.
- حدد البيانات لجميع الأفراد الأربعة داخل الجدول باستخدام ' ' و ال '
'. - بعد ذلك ، حدد التسمية التوضيحية للجدول باستخدام '
'علامة وإغلاق الجدول. - أخيرًا ، نضيف علامة '
' أخرى في النهاية لتطبيق تسمية توضيحية للجدول في أسفل الجدول. - ملحوظة : يتم تحديد التسمية التوضيحية للجدول في أعلى الجدول ضمن علامة '
' بينما يجب تحديد التسمية التوضيحية السفلية بعد علامة إغلاق الجدول.
انتاج |
خاتمة
تعتبر التسميات التوضيحية للجداول أمرًا حيويًا لإعطاء مزيد من المعلومات حول الجداول والبيانات المضمنة فيها. وبالتالي ، تزداد إمكانية الوصول إلى الجداول لكل من المستخدمين والقراء. يوفر التعليق جزءًا إضافيًا من المعلومات المتعلقة بالجدول بطريقة موجزة يمكن عرضها في الوصف عبر الإنترنت أيضًا.
- بعد ذلك ، حدد التسمية التوضيحية للجدول باستخدام '