أفضل طريقة لتوسيط النص في خلية جدول

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

ابدء

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

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

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

أضف الأسطر التالية إلى ورقة الأنماط الخاصة بك:

يوم الثلاثاء {
محاذاة النص: مركز ؛
} 

كيفية توسيط كل خلية رأس في الجدول

أضف الأسطر التالية إلى ورقة الأنماط الخاصة بك:

العاشر {
محاذاة النص: مركز ؛
} 

توسيط كل خلية في رأس الطاولة أو الجسم أو القدم

لتوسيط هذه الخلايا ، تحتاج إلى إضافة علامات الجدول التي لا يتم استخدامها دائمًا ، مثل.

thead th، thead td {
محاذاة النص: مركز ؛
}
tbody th، tbody td {
محاذاة النص: مركز ؛
}
tfoot th، tfoot td {
محاذاة النص: مركز ؛
}

قم بإزالة الأنماط الخاصة بالمناطق التي لا تريد أن يتم توسيطها.

كيفية توسيط خلية أو خلايا معينة في جدول

للقيام بذلك ، تحتاج إلى تعيين فئة على الخلايا التي تريد أن يتم توسيطها.

أضف السمة التالية إلى خلايا الجدول التي تريد توسيطها:

ثم أضف ما يلي إلى ورقة الأنماط الخاصة بك:

.centered-cell {
محاذاة النص: مركز ؛
}

يمكنك إضافة هذا الفصل إلى أي خلية في الجدول الخاص بك.

تغليف

لا تتردد في استخدام هذه الأنماط على أي من خلايا الجدول. يمكنك استخدامها في خلايا مدمجة أو في خلايا مفردة وسيتم توسيط النص الموجود بداخلها.