حشوة Td. عرض الحدود الجزئية

2. خاصية الخلفية = "URL" - لتعيين صورة الخلفية. بدلاً من عنوان URL، يجب كتابة عنوان صورة الخلفية.

مثال

جدول المثال

العمود 1

العمود 2

يتحول إلى ما يلي على الصفحة:

في المثال المذكور، لدينا صورة الخلفيةيقع في مجلد img (الموجود في نفس الدليل مثل صفحة html)، وتسمى الصورة fon.gif . يرجى ملاحظة أننا أضفنا في العلامة style="color:white;" . نظرًا لأن الخلفية تكون سوداء تقريبًا، لمنع مزج النص في الخلفية، فقد جعلنا النص باللون الأبيض.

3. الخاصية bgcolor = "color" - تحدد لون خلفية الجدول. يمكنك اختيار أي لون من اللوحة بأكملها (راجع رموز وأسماء ألوان html)

4. حدود الخاصية = "الرقم" - تحدد سمك حدود الجدول. في الأمثلة السابقة، حددنا border="1" مما يعني أن سمك الحدود هو 1 بكسل.

5. خاصية bordercolor = "color" - تحدد لون الحدود. إذا الحدود = "0" فلن يكون هناك حدود ولن يكون للون الحدود أي معنى.

6. خاصية cellpadding='number' - مسافة بادئة من الإطار إلى محتويات الخلية بالبكسل.

7. خاصية تباعد الخلايا = "الرقم" - المسافة بين الخلايا بالبكسل.

8. الخاصية cols='number' - عدد الأعمدة. إذا لم تقم بتعيينه، فسيقوم المتصفح نفسه بتحديد عدد الأعمدة. والفرق الوحيد هو أن تحديد هذه المعلمة سيؤدي على الأرجح إلى تسريع عملية تحميل الجدول.

9. إطار الخاصية = "المعلمة" - كيفية عرض الحدود حول الجدول. يمكن أن تأخذ القيم التالية:

• باطلة - لا ترسم الحدود
• الحدود - الحدود حول الطاولة
• أعلاه - حد على طول الحافة العلوية للجدول
• أدناه - الحدود في أسفل الجدول
• hsides - إضافة حدود أفقية فقط (أعلى وأسفل الجدول)
• vsides - رسم الحدود الرأسية فقط (على يسار ويمين الجدول)
• RHS - الحدود فقط الجانب الأيمنالجداول
• lhs - الحد الموجود على الجانب الأيسر من الجدول فقط

10. الخاصية height='number' - تحدد ارتفاع الجدول: إما بالبكسل أو بالنسب المئوية.

11. قواعد الخاصية = "المعلمة" - مكان عرض الحدود بين الخلايا. يمكن أن تأخذ القيم التالية:

• الكل - يتم رسم خط حول كل خلية في الجدول
• المجموعات - يتم عرض خط بين المجموعات التي شكلتها العلامات

السمات والخصائص

1. الخاصية align="parameter" - تحدد محاذاة خلية جدول فردية. يمكن أن تأخذ القيم التالية:

• اليسار - محاذاة اليسار
• مركز - محاذاة المركز
• اليمين - المحاذاة اليمنى

2. خاصية الخلفية = "URL" - لتعيين صورة الخلفية للخلية. بدلاً من عنوان URL، يجب كتابة عنوان صورة الخلفية.

3. الخاصية bgcolor = "color" - تحدد لون خلفية الخلية.

4. خاصية bordercolor = "color" - تحدد لون حدود الخلية.

5. الخاصية char="letter" - تحدد الحرف الذي يجب إجراء المحاذاة منه. يجب تعيين قيمة سمة المحاذاة على char.

6. الخاصية colspan='number' - تحدد عدد الخلايا الأفقية المراد دمجها.

7. الخاصية height='number' - تحدد ارتفاع الجدول: إما بالبكسل أو كنسبة مئوية.

8. الخاصية width='number' - تحدد عرض الجدول: إما بالبكسل أو كنسبة مئوية.

9. الخاصيةrowspan='number' - تحدد عدد الخلايا الرأسية التي سيتم دمجها.

10. الخاصية valign="parameter" - المحاذاة الرأسية لمحتويات الخلية.

• أعلى - محاذاة محتويات الخلية إلى الحافة العلوية للصف
• وسط - محاذاة متوسطة
• أسفل - محاذاة إلى الحافة السفلية
• خط الأساس - التوافق مع خط الأساس

للعلامة

كيفية منع حدود الخلايا في الجدول من الالتصاق ببعضها البعض

إذا كنت تستخدم الحدود (حدود الخلية) والحشوة الصفرية بين الخلايا، فستظل ملتصقة معًا وتحصل على حد مزدوج. لتجنب ذلك، تحتاج إلى تحديد Border-collapse: Collage في أنماط الجدول:

...

عزيزي القارئ، لقد تعلمت الآن الكثير عنها علامة HTMLطاولة. الآن أنصحك بالانتقال إلى الدرس التالي.

يمكن تغيير حدود جدول HTML بسهولة باستخدام أدوات CSS. يتم تكوين العرض الخاص بهم باستخدام الخصائص: الانهيار والتباعد.

لتحرير طريقة عرض الجدول، استخدم مجموعة خصائص الحدود. يسمح لك بتخصيص العرض واللون ووجود/غياب الحدود وأسلوبها وميزات العرض الأخرى.

الأساسيات

سيظهر الجدول بدون تصميم كنص منظم بدون حدود. تم إنشاء الجدول في html باستخدام العلامات:

• tr للسلاسل؛
• للعناوين؛
• td للأعمدة.

رأس	رأس	رأس
خلية	خلية	خلية
خلية	خلية	خلية

يتم تعيين حجم النص والخط والخلفية والمسافات البادئة من حافة نافذة المتصفح في ملف CSS في حاوية النص.

الجسم (عائلة الخط: Helvetica، Sans-serif؛ حجم الخط: 5vw؛ اللون: أسود؛ لون الخلفية: rgba(228, 228, 245); الحشو: 20vh;)

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

(عرض الحدود: 2vw؛ نمط الحدود: منقط؛ لون الحدود: أزرق سماوي؛)

يتم اختصاره كحدود: لون نمط العرض.

(الحدود: 1 بكسل صلب #4c6ea1;)

بالنسبة لجانب معين، يتم تعيينه باستخدام القالب border-top(/right/bottom/left)-style(/color/width/radius).

(لون الحدود العلوي: أزرق غامق؛)

يقوم الحشو بتعيين الحشو داخل الخلية من النص إلى الإطار، بينما تقوم محاذاة النص بتعيين المحاذاة.

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

Th، td (الحدود: 1vw Solid #4c6ea1؛ الحشو: 1vw؛ محاذاة النص: اليسار؛)

لا إطارات

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

الجدول ( محاذاة النص: يسار؛ لون الخلفية: rgba (228، 228، 245)؛ نصف قطر الحد العلوي الأيسر: 15em 1em؛ نصف قطر الحد السفلي الأيمن: 15em 1em؛ ) td، th ( الحشو: 1.5 فولت)

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

الجدول ( محاذاة النص: يسار؛ لون الخلفية: rgba(228, 228, 245); العرض: 70vw; تباعد الحدود: 2vh 2vh; ) td, th ( الحشو: 1.5vh; ) td ( لون الخلفية: rgba (247، 247، 255)؛

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

الجدول (محاذاة النص: المركز؛ طي الحدود: طي؛ لون الخلفية: rgba(228، 228، 245)؛ نصف قطر الحدود: 50%؛ العرض: 29vh؛ الارتفاع: 10vh؛ نمط الحدود: مخفي؛ ) td (الحشوة: 1.5 فولت ساعة؛ الحدود: 0.5 فولت ساعة أسود خالص؛)

طي وفصل

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

الجدول (انهيار الحدود: انهيار؛)

تم تعيين الإعداد الافتراضي على الانفصال، بحيث يكون لكل خلية حدودها الخاصة. بفضل خاصية الطي، يمكنك دمج خطوط الخلايا بحيث يتم فصل محتوياتها بإطار واحد. تُظهر الصورة الولايات الحدودية الثلاث الموضحة أعلاه: بدون أنماط؛ مع ضبط طي الحدود على الوضع الافتراضي؛ مع القيمة border-collapse، مع ترك خط مشترك بين الخلايا.

إطارات مزدوجة

تسمح لك خاصية الانهيار بجعل حدود الخلايا في جدول html مستقلة عن بعضها البعض ومشتركة. غالبًا ما يتم استخدام خاصية border-spacing معها، والتي تنظم المسافة بين إطارات الخلايا. يمكنك تحديد التباعد الأفقي والرأسي.

الجدول (تباعد الحدود: 0.5vw 1vw؛)

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

الجدول (تباعد الحدود: 0.5vw 1vw؛ الحدود: 1vw Solid #4c6ea1؛ الحشو: 1vw؛ لون الخلفية: أسود؛) td، th (الحدود: 1vw Solid #4c6ea1؛ الحشو: 0.3vw؛ محاذاة النص: يسار؛ لون الخلفية: أبيض)

خلايا فارغة

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

الجدول (الخلايا الفارغة: عرض؛)

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

الجدول (تباعد الحدود: 0.5vw 1vw؛ الحد: 0.1vw Solid #4c6ea1؛ الحشو: 0.5vw؛ لون الخلفية: rgba(33، 31، 171، 0.12)؛ الخلايا الفارغة: إخفاء؛ ) td، th ( border : 0.3vw صلب #4c6ea1 محاذاة النص: يسار؛

يصف

لتخصيص حدود لمجموعات من العناصر (الخلايا، الأعمدة، الصفوف، مجموعات الصفوف أو الأعمدة)، هناك سمة القواعد. تتم كتابة قيمته مباشرة في HTML في علامة الجدول.

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

رأس	رأس	رأس
خلية	خلية	خلية
خلية	خلية	خلية

جدول (الحدود العلوية: 1vw Solid #486743؛ حجم الخط: 5vw;) th, td (الحشوة: 2vw;)

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

الجدول (الحدود العلوية: 1vw منقط #486743;)

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

يمكنك تغيير لون حدود الخلايا وعرض الإطار عند استخدام سمة القواعد باستخدام الحدود ولون الحدود.

صراعات الأسلوب

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

في وضع الانهيار، تنشأ تعارضات في التصميم. نظرًا لحقيقة أن حدًا واحدًا يمكن أن يخضع لقاعدة خليتين مختلفتين، تنشأ مشكلة اختيار النمط الذي سيكون له الأسبقية. كما يكتب E. Malchuk، فإن الأكثر "جذابة" (باستثناء المخفية) يفوز.

1. إذا تم تعيين خاصية نمط الحدود الخاصة بالحدود المتنازع عليها على "مخفية" لأحد العناصر، فسيفوز هذا النمط. المخفية لها الأولوية القصوى.
2. أصغر وزن هو لا شيء. وينص أيضًا على عدم عرض السطر، ولكن لكي يتم تنفيذ التعليمات، يجب أن تحتوي جميع عناصر هذا السطر على هذه القاعدة (لا شيء).
3. بين الحدود الرفيعة والسميكة، تكون للحدود السميكة أولوية أكبر.
4. مع نفس الإطارات، ولكن بأنماط مختلفة، دائمًا ما يفوز الصلبة المزدوجة (المزدوجة)، تليها الصلبة والمتقطعة (المتقطعة)، والمنقط.
5. إذا كانت الاختلافات الوحيدة هي الألوان، فإن مظهر أصغر مكون يكون دائمًا أعلى (زخرفة الخلية لها أولوية أعلى من الصفوف، والصفوف أعلى من الجداول).

التوضيح الصراع

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

رأس	رأس	رأس
خلية	خلية	خلية
خلية	خلية	خلية

المغلق المقابلة.

الجسم (عائلة الخط: Helvetica، Sans-serif؛ حجم الخط: 5vw؛ اللون: أسود؛ الهامش: 0؛ العرض: 80vw؛ لون الخلفية: أبيض؛ الحشو: 3vw؛) الجدول (لون الخلفية: rgba(33 ، 31، 171، 0.12)؛ الحشو: 0.5 فولت واط؛ تباعد الحدود: 0.5 فولت واط؛ نمط الحدود: مخفي؛ صلب #4c6ea1؛) .الخلية الثانية (الحد: 0.01vw صلب #4c6ea1؛) .الخلية الثالثة (الحد: 0.01vw أحمر مزدوج؛)

أنماط الإطار

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

Th، td (الحشوة: 1vw؛ محاذاة النص: اليسار؛ عرض الحدود: 0.5vw؛ لون الحدود: أحمر داكن؛ نمط الحدود: منقط؛ ) .seven (لون الحدود العلوي: أزرق سماوي؛ نمط الحدود العلوي : صلب؛ عرض الحدود اليمنى: 2vw؛ نمط الحدود السفلية: متقطع؛

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

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

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

هناك عشرة أنماط إطار في المجموع. كلهم يغيرون الخط أو يزيلونه:

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

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

الجدول (لون الخلفية: rgba(33, 31, 171, 0.12); الحشو: 0.5vw; طي الحدود: طي; الحدود: 0.3vw أسود خالص;) th, td (الحشو: 1vw; محاذاة النص: يسار; ) .one ( الحد العلوي: مخفي؛ الحد الأيسر: مخفي؛ ) .two ( الحد العلوي: 0.4vw double #4c6ea1؛ الحد الأيسر: 0.4vw double #4c6ea1؛ ) .three ( الحد العلوي: 0.5vw الصلبة #4c6ea1؛ الحد الأيسر: 0.8vw منقط #4c6ea1؛ : 1 فولت دبليو بداية # 4c6ea1 ؛ ) . ثمانية ( الحد العلوي: 1.1 فولت واط الأخدود # 4c6ea1 ؛ الحد الأيسر: 1.1 فولت واط الأخدود # 4c6ea1 ؛ ) . تسعة ( الحد العلوي: 1.2 فولت واط داخلي # 4c6ea1 ؛ الحد الأيسر: 1.2 فولت واط أقحم #4c6ea1؛

هيكلة المادة

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

• خطوط التصفير (لعرض الحدود حدد قيمة 0 بكسل)؛
• مختفي.

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

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

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

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

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

الجدول (نمط الحدود اليسرى: مخفي؛)

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

Tr (نمط الحدود: مخفي؛)

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

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

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

لون خلفية الخلية

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

مثال 2.3. لون الخلفية

العنوان 1	العنوان 2
الخلية 3	الخلية 4

في هذا المثال، حصلنا على لون خلفية زرقاء للخلايا (tag

أرز. 2.9. محاذاة النص في الخلايا

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

مثال 2.9. محاذاة محتويات الخلية عموديا

مثال 2.4. الحقول في الجداول

يضبط هذا المثال ارتفاع الرأس