حدود جدول HTML
يمكن أن يكون لجداول HTML حدود من أنماط وأشكال مختلفة.
كيفية إضافة حد
عندما تضيف حدًا إلى جدول ، فإنك تضيف أيضًا حدودًا حول كل خلية في الجدول:
لإضافة حد ، استخدم border
خاصية CSS على
table
، th
والعناصر
td
:
مثال
table, th, td
{
border: 1px solid black;
}
حدود الجدول المنهارة
لتجنب وجود حدود مزدوجة كما في المثال أعلاه ، اضبط border-collapse
خاصية CSS على collapse
.
سيؤدي هذا إلى انهيار الحدود إلى حد واحد:
مثال
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
حدود جدول النمط
إذا قمت بتعيين لون خلفية لكل خلية ، ومنحت الحد لونًا أبيض (مثل خلفية المستند) ، تحصل على انطباع بحد غير مرئي:
مثال
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
حدود المائدة المستديرة
مع border-radius
الخاصية ، يتم تقريب الحدود:
مثال
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
تخطي الحد حول الجدول table
بالحذف من محدد css:
مثال
th, td {
border: 1px solid
black;
border-radius: 10px;
}
حدود الجدول المنقط
مع border-style
الخاصية ، يمكنك تعيين مظهر الحدود.
القيم التالية مسموح بها:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
مثال
th, td {
border-style: dotted;
}
لون الحدود
باستخدام border-color
الخاصية ، يمكنك تعيين لون الحد.
مثال
th, td {
border-color: #96D4D4;
}