logo

كيفية توسيط الجدول في CSS؟

يعد استخدام الجداول في تصميم موقع الويب مهمة مثيرة. بشكل افتراضي، تكون محاذاة الجدول باتجاه اليسار، ولكن باستخدام هامِش الخاصية في CSS، يمكننا محاذاتها في المركز.

إذا قمنا بتعيين قيمة الهامش الأيسر و الهامش الأيمن ل آلي ، ثم تعرض المتصفحات الجدول في المنتصف. يمكننا استخدام خاصية الاختزال هامِش وتعيينه على آلي لمحاذاة الجدول في المركز بدلاً من استخدام الهامش الأيسر و الهامش الأيمن ملكية.

محدد جافا

بدلاً من محاذاة الجدول إلى المركز، محاذاة النص: مركز؛ تقوم الخاصية بتوسيط محتوى الجدول فقط، مثل النص الموجود داخل الجدول.

دعونا نفهم هذا باستخدام الرسم التوضيحي.

مثال

في هذا المثال نستخدم محاذاة النص: مركز؛ خاصية لتوسيط المحتوى داخل الجدول و الهامش الأيسر: تلقائي؛ و الهامش الأيمن: تلقائي؛ لتوسيط الجدول.

مدينة في UAS
 table, th, td { border: 1px solid black; margin-left: auto; margin-right: auto; border-collapse: collapse; width: 500px; text-align: center; font-size: 20px; } <table class="table"> <tr> <th>First_Name</th> <th>Last_Name</th> <th>Subject</th> <th>Marks</th> </tr> <tr> <td>James</td><td>Gosling</td><td>Maths</td><td>92</td> </tr> <tr> <td>Alan</td><td>Rickman</td><td>Maths</td><td>89</td> </tr> <tr> <td>Sam</td><td>Mendes</td><td>Maths</td><td>82</td> </tr> </table> 
اختبره الآن

انتاج |

كيفية توسيط الجدول في CSS؟