ستساعدك المقالة التالية: استخدام CSS لإزالة الجداول
استخدام CSS لإزالة الجداول
فتحت CSS أو Cascading Style Sheets إمكانيات هائلة لتحسين تصميمات مواقع الويب وتخطيطات صفحات الويب وإضافة ميزات جديدة. يمكن جعل كود HTML أقصر وأنظف وأبسط بواسطة CSS مما يؤدي إلى تحميل أسرع لصفحات الويب، ويجعلها في متناول محركات البحث بشكل أكبر. أنا هنا أروي تجربتي مع جزء واحد فقط من CSS – استخدامه لإزالة الجداول.
إذا نظرت إلى صفحة ويب مصممة بشكل تقليدي، فمن المحتمل أن تجد عددًا من الجداول في التخطيط. تم استخدام الجداول سابقًا فقط لعرض المعلومات في شكل جدولي. لكن مصممي مواقع الويب سرعان ما بدأوا في استخدام الجداول لتطبيقات أخرى مثل عرض الصور والرسومات والزخارف الأخرى.
كانت صفحات الويب الخاصة بي عبارة عن رقعة شطرنج من الجداول في وقت سابق. كانت كل صفحة ويب مغطاة بالكامل تقريبًا بالجداول وتم دمج العديد من الجداول داخل جداول أخرى. عندما حاولت إضافة المزيد من الميزات، أصبح التصميم أكثر تعقيدًا مما أدى إلى أوقات تحميل أطول. كما استغرق الأمر الكثير من الوقت “لضبط” الجداول الموجودة على الصفحة لجعلها مقبولة.
لم تكن مهمة إعادة تصميم جميع الصفحات باستخدام CSS مهمة سهلة. ولكن بمجرد أن بدأت، كانت التحسينات أكثر مما كنت أتمناه. أصبح التصميم أبسط، وتحسن المظهر وانخفض وقت التحميل بشكل كبير. بدا الرمز نظيفًا حقًا. اختفت معظم العلامات “td” و”tr”.
لم يكن هدفي من هذا التمرين هو تغيير المظهر حقًا، بل جعل التصميم أكثر بساطة. الآن تم حذف الجداول التي كانت تستخدم سابقًا لغرض التصميم فقط. لإزالة الجداول، الخطوة الأولى هي تحديد الجداول أو بشكل أكثر تحديدًا الخلايا التي يجب إزالتها. لتطبيق CSS، يمكن اعتبار كل خلية في الجدول بمثابة “مربع”. يتم منح هذه المربعات هويات منفصلة وينتقل وصف كل “مربع” إلى كود CSS. يمكن تسمية “المربعات” بأسماء مثل box1 وbox2 وما إلى ذلك. يمكن أن يتضمن وصف “المربع” الحجم وموقعه على صفحة الويب ولون الخلفية والصورة إن وجدت وتفاصيل الخط والحشو وتفاصيل الحدود وما إلى ذلك. يمكن جعل “الصندوق” “ثابتًا” على صفحة الويب، أو يمكن أن يكون عائمًا وفي هذه الحالة يمكن تحديد الموقع فيما يتعلق بـ “مربع” آخر.
إذا تم تحديد موقع الصناديق وأبعادها بشكل صحيح، فإنها تتناسب بشكل أنيق مع صفحة الويب مما يمنحها مظهرًا نظيفًا. وبما أنه تم التخلص من التعليمات البرمجية المرتبطة بتصميمات الجدول، فإن محتوى الصفحة يحظى بأهمية أكبر في التعليمات البرمجية. وهذا يسهل على عناكب محركات البحث تحديد المحتوى الفعلي للصفحة.
إذا كان لديك عدة صفحات ويب ذات تصميم مماثل، فيمكن وضع كود CSS مع هذه التفاصيل وغيرها في ملف خارجي. سيؤدي هذا إلى تقصير الكود الخاص بكل صفحة. مع الكثير من CSS يمكن إجراء العديد من التحسينات في تصميم صفحة الويب وتخطيطها. يمكن أيضًا استخدام CSS لتحسين محرك البحث للصفحة.
لقد كانت تجربتي مع CSS رائعة وأتساءل لماذا لا يتم استخدامها كثيرًا. نصيحتي – التحول إلى التصميم القائم على CSS.
–
يساهم سانجاي جوهري بمقالات بانتظام في العديد من المجلات. يحتوي موقعه على الإنترنت على معلومات ومقالات وموارد وفرص والمزيد لأصحاب الأعمال الصغيرة وأصحاب الأعمال المنزلية.
