- كيفية إضافة الحد السفلي إلى صف الجدول
؟ - قم بتعيين الحد السفلي إلى عنصر صف الجدول
- عنصر جدول النمط
- عنصر النمط 'td'
- عنصر النمط 'tr'
كيفية إضافة الحد السفلي إلى صف الجدول
؟ ستؤدي إضافة الحد السفلي إلى صف الجدول إلى إضافة الحد إلى الصف بأكمله لتقديم تجربة مرئية أفضل ولجذب تركيز المستخدم.
يظهر أدناه مثال مفصل لإضافة حد أسفل إلى صف الجدول
:
اضبط الحد السفلي على صف الجدول
قم بإنشاء جدول بسيط يحتوي على 3 صفوف و 3 أعمدة في ملف HTML الخاص بنا والتي تم إنشاؤها باستخدام عناصر
و و :
< طاولة >
< آر فصل = 'صف' >
< ذ > اسم < / ذ >
< ذ > حالة < / ذ >
< ذ > غرفة لا < / ذ >
< / آر >
< آر فصل = 'صف' >
< td > فخار < / td >
< td > طالب < / td >
< td > 05 < / td >
< / آر >
< آر فصل = 'صف' >
< td > عمر < / td >
< td > طالب < / td >
< td > 05 < / td >
< / آر >
< / طاولة >في مقتطف الشفرة أعلاه ، قمنا بتعيين فئة 'صف' لصفوف الجدول
، بحيث يمكن الوصول إليها لاحقًا في CSS.
ستبدو صفحة الويب بالشكل التالي:
عنصر جدول النمط
في جزء CSS ، حدد عنصر الجدول وقم بمحاذاة النص إلى المركز. بعد ذلك ، استخدم ' انهيار الحدود 'لتعيين قيمتها على الانهيار:
طاولة
{
انهيار الحدود: انهيار.
محاذاة النص: مركز ؛
}عنصر النمط 'td'
للحصول على تمثيل مرئي أفضل ، دعنا نمنح مساحة 20 بكسل لبيانات الجدول '
' وعناصر رأس الجدول ' ': td
{
الحشو: 20 بكسل ؛
}
ذ
{
الحشو: 20 بكسل ؛
}الإخراج يبدو كالتالي:
أظهر الإخراج أعلاه مساحة متروكة تبلغ 20 بكسل ومحاذاة النص إلى المنتصف.
عنصر النمط 'tr'
في ملف CSS ، أضف خاصية border-bottom ضمن محدد 'tr'. يتم تعيينه لكل صف من الجدول بما في ذلك صف العنوان. على سبيل المثال ، اضبط قيمته على 2 بكسل سماوي غامق ثابت:
آر {
الحد السفلي: 2 بكسل سماوي غامق صلب ؛
}بعد تنفيذ مقتطف الشفرة أعلاه ، تبدو صفحة الويب كما يلي:
يتعلق هذا كله بكيفية إضافة حد أسفل كل صف في الجدول '
'. خاتمة
لإضافة حد أسفل عنصر
، عيّن خاصية CSS لتصغير الحدود واستخدم خاصية border-bottom في عنصر ' '. يسمح لخاصية CSS بتطبيق الحدود على الجدول. هذه هي الطريقة التي يمكنك بها بسهولة إضافة حد سفلي إلى كل علامة '
'. - قم بتعيين الحد السفلي إلى عنصر صف الجدول