التخلص من المسافات في جداول HTML

click fraud protection

إذا كنت تستخدم الجداول لتخطيط الصفحة (لا في XHTML) ، من المحتمل أن تواجه إضافة قبيحة لمساحة إضافية في تخطيطاتك. لإصلاح هذه المشكلة ، تحتاج إلى التحقق من كل من تعريف جدول HTML وتفاصيل أي ورقة أنماط تحكم.

تعريف جدول HTML

HTML بطاقة شعار للجداول افتراضيًا لا تتحكم في بعض متطلبات التباعد. تحقق من ثلاثة أشياء حول الطاولة علامة في مستند HTML الخاص بك:

  1. هل يحتوي جدولك على سمة الخلوية مضبوطة على 0؟
    1. وسادة الخلية = "0"
  2. هل يحتوي جدولك على سمة تباعد الخلايا مضبوطة على 0؟
    1. تباعد الخلايا = "0"
  3. هل هناك مسافات قبل أو بعد المحتوى الخاص بك وعلامات الجدول؟

الرقم 3 هو كيكر. عديدة محررات HTML ترغب في جعل الشفرة متباعدة ، لتسهيل قراءتها. لكن العديد من المتصفحات تفسر علامات التبويب والمسافات وأحرف الإرجاع على أنها مساحة إضافية مطلوبة داخل الجداول. تخلص من المسافة البيضاء المحيطة بعلاماتك وستحصل على طاولات أكثر هشاشة.

أوراق النمط

ومع ذلك ، قد لا يكون HTML هو الذي تم إيقاف تشغيله. اوراق النمط المتعاقب تتحكم في بعض سمات عرض الجداول ، واعتمادًا على الصفحة ، ربما تكون قد أضفت أو لم تقم عمدًا بإضافة CSS خاصة بالجدول في المقام الأول.

instagram viewer

افحص ملف CSS الحاكم بحثًا عن أي من القيم التالية داخل ملف الطاولة, العاشر، أو tdالخصائص وضبطها حسب الحاجة:

  • حدود: تحدد سمات الجدول أو حد الخلية
  • انهيار الحدود: يتعامل مع الحدود المتجاورة على أنها واحدة ، لتجنب تكرار عرض الحدود
  • حشوة: توفر مساحة فارغة ، بالبكسل ، حول كل خلية
  • محاذاة النص: يحدد ملف محاذاة النص داخل الخلية
  • تباعد الحدود: يضبط التباعد بين الخلايا بالبكسل

البدائل

على الرغم من أنه لا يزال بإمكانك استخدام جداول HTML (المعيار راسخ ومدعوم عالميًا في الوقت الحاضر المتصفحات) ، يستخدم تصميم الويب المتجاوب الأكثر حداثة أوراق أنماط متتالية لوضع العناصر على الصفحة. لا تزال الجداول منطقية للغرض الأصلي المقصود المتمثل في عرض البيانات الجدولية ، ولكن لتنظيم تخطيط ومحتوى الصفحة ، فمن الأفضل استخدام تخطيط CSS بدلاً من ذلك.

instagram story viewer