كيف - توسيط الجداول
تعرف على كيفية توسيط الجدول باستخدام CSS.
الجدول المركزي:
الاسم الاول | الكنية | عمر |
---|---|---|
جيل | حداد | 50 |
حواء | جاكسون | 94 |
يوحنا | ظبية | 80 |
كيفية توسيط الجداول
الخطوة 1) أضف HTML:
مثال
<table class="center">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
الخطوة 2) أضف CSS:
لتوسيط الجدول ، اضبط الهامش الأيمن والأيسر على auto
:
مثال
.center {
margin-left: auto;
margin-right: auto;
}
لاحظ أنه لا يمكن توسيط الجدول إذا تم ضبط العرض على 100٪ (العرض الكامل).
نصيحة: انتقل إلى البرنامج التعليمي الخاص بجداول CSS لمعرفة المزيد حول كيفية تصميم الجداول.