كيفية محاذاة الخلايا في جدول هتمل: دليل

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

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

مثال: لمحاذاة محتويات خلية إلى وسط الجدول ، استخدم سمة المحاذاة مع القيمة "مركز".

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

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

1. ما هي مشكلة محاذاة الخلية في الجدول?
2. محاذاة أفقية
3. محاذاة اليسار
4. المحاذاة الصحيحة
5. محاذاة المركز
6. المحاذاة العمودية
7. محاذاة على طول الحافة العلوية
8. محاذاة على طول الحافة السفلية
9. محاذاة المركز
10. سؤال وجواب
11. كيف يمكنني محاذاة خلايا الجدول في أتش تي أم أل إلى اليسار?
12. كيف يمكنني محاذاة خلايا الجدول في أتش تي أم أل في المركز?
13. كيف يمكنني محاذاة خلايا الجدول في أتش تي أم أل إلى الحافة اليمنى?
14. كيف يمكنني محاذاة محتويات خلايا الجدول في أتش تي أم أل أفقيا وعموديا?
15. كيف يمكنني محاذاة النص داخل خلايا الجدول في أتش تي أم أل إلى الحافة العلوية?
16. كيف يمكنني محاذاة النص داخل خلايا الجدول في أتش تي أم أل إلى الحافة السفلية?

ما هي مشكلة محاذاة الخلية في الجدول?

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

تكمن المشكلة الرئيسية في محاذاة الخلية في الجدول في أن الخلايا المختلفة قد تحتوي على كميات مختلفة من النص أو أنواع مختلفة من المحتوى. هذا يمكن أن يؤدي إلى توزيع غير متوازن للمحتوى داخل الجدول.

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

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

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

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

محاذاة أفقية

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

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

2. النص

النص

سيؤدي هذا إلى محاذاة النص إلى الحافة اليمنى للخلية.

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

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

لمحاذاة كافة الخلايا إلى اليسار ، يمكنك استخدام التعليمات البرمجية كس التالية:

الجدول {

محاذاة النص: اليسار;

}

في هذه الحالة ، سيتم محاذاة محتويات الجدول بالكامل إلى اليسار.

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

. على سبيل المثال:

الخلية 1

في هذا المثال ، سيتم محاذاة الخلية 1 إلى اليسار ، وستحتفظ الخلية 2 بمحاذاة المركز القياسية.

يمكنك أيضا استخدام فئات كس لمحاذاة الخلايا إلى اليسار:

الخلية 1

الخلية 2

في هذا المثال ، يتم تطبيق فئة المحاذاة اليسرى على الخلية 1 ، مما يؤدي إلى محاذاتها إلى اليسار.

المحاذاة الصحيحة

المحتوى

المحتوى

المحتوى

المحتوى

يستخدم الرمز أعلاه العلامة

لإنشاء جدول ، استخدم العلامة

لإنشاء صف جدول ، والعلامة

لإنشاء خلايا الجدول. يتم تطبيق سمة المحاذاة="اليمين" على كل خلية لمحاذاة محتوياتها إلى اليمين.

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

محاذاة المركز

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

يتم استخدام السمة محاذاة="مركز" في \ العلامة لمحاذاة المركز. على سبيل المثال:

الخلية 1

الخلية 2

الخلية 3

الخلية 4

في هذا المثال ، سيتم توسيط محتويات كل خلية.

• الخلية 2
• سيعطي كلا الخيارين نفس النتيجة-محاذاة محتويات خلايا الجدول في المركز.

باستخدام السمة فالين في العلامة تد. مثال:

محتويات الخلية

. القيم الصالحة لسمة القيمة هي أعلى (أعلى) ووسط (وسط) وأسفل (أسفل).

باستخدام أنماط كس. يمكنك تعيين المحاذاة الرأسية باستخدام خاصية المحاذاة الرأسية. مثال:

محتويات الخلية

. القيم المقبولة لخاصية المحاذاة الرأسية هي نفسها بالنسبة لسمة فالين.

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

محتويات الخلية

. القيم المقبولة لخاصية محاذاة النص هي اليسار (اليسار) والوسط (الوسط) واليمين (اليمين).

محاذاة على طول الحافة العلوية

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

على سبيل المثال:

محتويات الخلية 1

محتويات الخلية 2

محتويات الخلية 3

محتويات الخلية 4

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

محتويات الخلية 1

محتويات الخلية 2

محتويات الخلية 3

محتويات الخلية 4

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

محاذاة على طول الحافة السفلية

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

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

الخلية 1

الخلية 2

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

محاذاة المركز

في هتمل ، هناك عدة طرق لمحاذاة محتويات خلايا الجدول في المركز. دعونا ننظر في نهجين رئيسيين:

. على سبيل المثال:

محتويات الخلية

2. المحاذاة باستخدام سمة المحاذاة

طريقة قديمة وأقل استخداما للتوسيط هي استخدام

في

العلامة الدفتيريا

محتويات الخلية

كلتا الطريقتين تعطي نفس النتيجة-محاذاة محتويات الخلية في المركز. يعتمد اختيار الطريقة على تفضيلاتك ومتطلبات المشروع.

كيف يمكنني محاذاة خلايا الجدول في أتش تي أم أل إلى اليسار?

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

كيفية محاذاة خلايا الجدول في أتش تي أم أل في المركز?

لمحاذاة خلايا الجدول في المركز في هتمل ، يتم استخدام خاصية محاذاة النص مع قيمة المركز. على سبيل المثال ، تعيين سمة النمط="محاذاة النص: مركز ؛" لكل خلية في الجدول أو إضافة قاعدة نمط تد {محاذاة النص: مركز;} داخل العلامة

كيف يمكنني محاذاة خلايا الجدول في أتش تي أم أل إلى الحافة اليمنى?

لمحاذاة خلايا الجدول إلى اليمين ، يستخدم هتمل خاصية محاذاة النص مع القيمة اليمنى. على سبيل المثال ، قم بتعيين سمة النمط= " محاذاة النص: يمين;"لكل خلية من الجدول أو إضافة قاعدة نمط تد {محاذاة النص: الحق؛} داخل العلامة

كيف يمكنني محاذاة محتويات خلايا الجدول في أتش تي أم أل أفقيا وعموديا?