كيفية مركز النص في خلية الجدول

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

ابدء

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

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

كيفية مركز كل خلية في الجدول

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

td، th {text-align: center؛ }

كيفية مركز كل خلية رأس في الجدول

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

th {text-align: center؛ }

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

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

th th، thead td {text-align: center؛ } tbody th، tbody td {text-align: center؛ } tfoot th، tfoot td {text-align: center؛ }

أزل الأنماط للمناطق التي لا تريد أن يتم توسيطها.

كيفية مركز خلية معينة أو خلايا في الجدول

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

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

class = "centered-cell" >

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

.centered-cell {text-align: center؛ }

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

تغليف

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