كيفية إضافة مسافة بين الأعمدة دون التأثير على الصفوف في جدول HTML؟
يتم استخدام خصائص المساحة المتروكة لليسار ولليمين لإضافة تباعد بين الأعمدة دون التأثير على التخطيط العام للجدول. تسمح هذه الخاصية للمطورين بإضافة مسافات إضافية ولا يؤثر هذا التباعد في الصفوف.
اتبع الخطوات التالية:
الخطوة 1: إنشاء هيكل الجدول
لنفترض وجود جدول في ملف HTML يحتوي على أربعة صفوف وثلاثة أعمدة:
< طاولة >
< آر >
< ذ > اسم < / ذ >
< ذ > فصل < / ذ >
< ذ > مدينة < / ذ >
< / آر >
< آر >
< td > جون < / td >
< td > بكالوريوس كيمياء < / td >
< td > لندن < / td >
< / آر >
< آر >
< td > الكسندر < / td >
< td > بكالوريوس الرياضيات < / td >
< td > طوكيو < / td >
< / آر >
< آر >
< td > جوزيف < / td >
< td > BS CS < / td >
< td > نيويورك < / td >
< / آر >
< / طاولة >
بعد تنفيذ التعليمات البرمجية أعلاه ، تبدو صفحة الويب كما يلي:
يؤكد الإخراج أنه تم إنشاء بنية الجدول.
الخطوة الثانية: تطبيق الحشو الأفقي
لإضافة تباعد بين الأعمدة من الجانب الأيسر ، استخدم ' المساحة المتروكة لليسار 'CSS. بعد تطبيق هذه الخاصية ، تبدو البيانات مثل المحاذاة الصحيحة. والسبب هو أن الحشو يتم تطبيقه فقط من الجانب الأيسر.
حدد الآن عنصر 'td' في جزء CSS للأنماط التي يمكن تطبيقها باستخدام الطريقة المضمنة. ثم أضف المساحة المتروكة لـ ' 50 بكسل 'لإضافة التباعد وإضافة خاصية الحدود لأغراض تصور أفضل:
td {المساحة المتروكة: 50 بكسل ؛
حدود : 2 بكسل أحمر صلب ؛
}
بعد تنفيذ الكود ، تبدو صفحة الويب كما يلي:
يعرض الإخراج أنه تمت إضافة المسافة بين أعمدة الجدول.
الآن ، لتعيين المساحة المتروكة من الجانب الأيمن ، فإن الخيار ' المساحة المتروكة لليمين 'الممتلكات المستخدمة. بالطريقة نفسها ، ولكن الآن تبدو بيانات الخلية ' محاذاة إلى اليسار '. الكود هو:
td {المساحة المتروكة: 50 بكسل ؛
حدود : 2 بكسل أحمر صلب ؛
}
بعد تنفيذ الكود أعلاه ، تبدو صفحة الويب كما يلي:
يؤكد الإخراج أن المسافة بين الأعمدة تزداد عن طريق تطبيق الحشو على الجانب الأيمن.
الخطوة 3: مزيج من الحشو اليسار واليمين
كما في الخطوة أعلاه ، لا تتم محاذاة البيانات مع المركز في كلتا الحالتين وهذا يجعل البيانات غير احترافية. لجعلها بارزة دون كسر معنى التصميم. يمكن استخدام كلا الخاصيتين في نفس الوقت على النحو التالي:
td {الحشوة اليمنى: 60 بكسل ؛
المساحة المتروكة: 60 بكسل ؛
حدود : 2 بكسل أحمر صلب ؛
}
بعد تنفيذ الكود أعلاه ، تبدو صفحة الويب كما يلي:
يؤكد الإخراج أنه تمت إضافة المسافة بين الأعمدة وأن البيانات أيضًا محاذاة للوسط.
خاتمة
يمكن إضافة المسافة بين أعمدة الجدول بمساعدة حشو الخصائص اليمنى واليسرى. تضيف هذه الخصائص مساحة إضافية من الاتجاهين الأيمن والأيسر إلى الخلية. يمكن استخدام كلتا الخاصيتين في نفس الوقت أو بشكل منفصل. لقد أوضحت هذه المقالة بنجاح كيفية إضافة مسافات بين أعمدة الجدول دون التأثير على الصفوف.