طريقة بسيطة لتوسيط جدول باستخدام CSS

سطر واحد من التعليمات البرمجية هو كل ما تحتاجه لتوسيط جدول

Cascading Style Sheets (CSS) هي لغة ورقة النمط الأكثر استخدامًا لتعيين النمط المرئي لصفحات الويب المكتوبة بلغة HTML و XHTML. قد تكون جديدًا على تصميم الويب أو CSS ولديك أسئلة حول كيفية توسيط جدول على صفحة ويب. قد تكون أيضًا مصممًا متمرسًا مرتبكًا حول كيفية تنفيذ هذه التقنية بعد أن تم تجاهل علامة CENTER و align = "center" في علامة TABLE. باستخدام CSS ، لا يكون من الصعب للغاية وضع جداول التمركز في صفحة الويب.

استخدم CSS لتوسيط جدول

يمكنك إضافة سطر واحد إلى ورقة أنماط CSS لتوسيط جميع الجداول أفقيًا:

table {margin: auto؛ }

أو يمكنك إضافة نفس السطر إلى الجدول مباشرةً:

عندما تضع جدولاً في صفحة ويب ، فإنك تضعه في عنصر مستوى الكتلة مثل BODY أو P أو BLOCKQUOTE أو DIV. يمكنك توسيط الجدول داخل هذا العنصر باستخدام الهامش: auto؛ قلم المدقة. هذا يخبر المتصفح لجعل الهوامش على جميع جوانب الجدول متساوية ، والتي تضع الجدول في وسط صفحة الويب.

بعض متصفحات الويب القديمة لا تدعم هذه الطريقة

إذا كان يجب أن يدعم موقعك متصفح ويب قديم ، مثل Internet Explorer 6 ، فستحتاج إلى الاستمرار في استخدام align = "center" أو علامة CENTER لتوسيط الجداول. هذا عن المضاعفات الوحيدة التي تصادفها عند تركيز الجداول على صفحة الويب. استخدام هذه التقنية سهل ويمكن تنفيذه في غضون دقائق.