المسافة البادئة في جدول HTML. استخدام خاصية الحدود

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

لوضع مسافة بادئة للخلية، استخدم السمة حشوة الخليةللعلامة

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

يمكنك تحديد عدد البكسلات التي يجب أن تكون عليها المسافة البادئة. دعونا نعطي مثالا حيث ستكون المسافة البادئة السفلية 20 بكسل، وكل ما تبقى سيكون 10 . هذه CSS-الكود سيبدو هكذا:

Td (الحشوة: 10 بكسل؛ الحشوة السفلية: 20 بكسل؛)

ورمز النمط الكامل في هذه المرحلة:

الجدول (الحدود: 1 بكسل أزرق مصمت؛ طي الحدود: طي؛ ) td (الحدود: 1 بكسل أزرق مصمت؛ الحشو: 10 بكسل؛ الحشو السفلي: 20 بكسل؛)

النتيجة في المتصفح:

المسافات بين الخلايا

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

لا توجد المسافات البادئة في الجداول داخل الخلايا فقط. وقد تكون موجودة أيضًا بين الخلايا نفسها.

هناك خياران لعمل مسافات بادئة بين الخلايا:

1. باستخدام السمة تباعد الخلاياللعلامة

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

لنلقي نظرة على مثال:

الجدول (الحدود: 1 بكسل أزرق مصمت؛ طي الحدود: منفصل؛ تباعد الحدود: 5 بكسل؛) td (الحدود: 1 بكسل أزرق مصمت؛ الحشو: 10 بكسل؛ الحشو السفلي: 20 بكسل؛)

والنتيجة الناتجة:

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

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

يعد الجدول إحدى الأدوات الرئيسية لإنشاء صفحات الويب.

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

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

دعونا نلقي نظرة على جدولنا من منظور HTML:

• يتم تحديد الجدول نفسه باستخدام العلامات

نتيجة:

كما ترون، لم يكن الأمر جيدًا جدًا، سنقوم بتزيينه.

معلمات جدول HTML: المسافة البادئة، العرض، لون الخلفية، الإطار

لهذا الغرض العلامة

• عرض- يضبط عرض الجدول (بالبكسل أو % من عرض الشاشة)،
• com.bgcolor- تعيين لون الخلفية لخلايا الجدول،
• خلفية- يملأ خلفية الجدول بنمط،
• حدود- تعيين حدود العرض المحدد (بالبكسل) حول الجدول بأكمله،
• حشوة الخلية- يضبط الهامش بالبكسل بين حدود الخلية ومحتوياتها.

نتيجة:

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

• محاذاة- ضبط محاذاة الجدول: يسار (يمين)، يمين (يسار)، وسط (وسط)،
• تباعد الخلايا- يحدد المسافة بين خلايا الجدول (بالبكسل)،
• حشوة الخلية- يضبط المسافة بين النص والحد الداخلي لخلية الجدول (بالبكسل).

نتيجة:

يرجى ملاحظة أن الجدول له حدود مزدوجة. إذا قمت بتحديد تباعد الخلايا = "0"، فإن الحدود ستأخذ الشكل المعتاد:

بشكل عام، هناك معلمتان مسؤولتان عن الحدود:

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

نتيجة:

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

علامات HTML tr وtd

يتم تشكيل الجداول صفًا تلو الآخر. ولذلك، فإن المعلمات المحددة في السطر (tr) تمتد تأثيرها إلى جميع الخلايا (td) في الخط. يمكن أن تحتوي السلاسل على ثلاث معلمات:

• محاذاة- محاذاة النص في الخلايا أفقيًا، ويمكن أن تأخذ القيم: اليسار (يمين)، اليمين (يسار)، الوسط (الوسط)،
• valign- محاذاة النص في الخلايا عموديًا، ويمكن أن تأخذ القيم: أعلى (أعلى)، أسفل (أسفل)، توسيط (وسط)،
• com.bgcolor- يحدد لون الخط.

• عرض- يضبط عرض العمود (بالبكسل أو كنسبة مئوية، حيث يتم أخذ عرض الجدول على أنه 100%)،
• ارتفاع- يضبط ارتفاع الخلية، وستكون جميع الخلايا الموجودة في نفس الصف بهذا الارتفاع.

نتيجة:

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

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

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

طي الحدود: منفصل - كل خلية لها حدودها الخاصة (افتراضي)

انهيار الحدود: انهيار - الحدود المشتركة

طي الحدود: وراثة - القيمة مأخوذة من العنصر الأصلي

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

أسلوب:

1 2 3 4 5 6

العمل في المنزل. في هذا الدرس، لن أصف كل شيء بالتفصيل - فقط النقاط العامة. لإكمال الصورة، انظر إلى نتيجة المثال. قم بإنشاء ثلاثة جداول، يتكون كل منها من صف واحد وثلاثة أعمدة (أعمدة). في الجدول الأول، ضع رأس الصفحة أو "رأسها" (يجب عدم الخلط بينه وبين "رأس" مستند HTML)، وفي الجدول الثاني - القائمة اليمنى واليسرى، بالإضافة إلى المحتوى الرئيسي (المحتوى). في الثالث - تذييل الصفحة أو "تذييلها". دع عرض العمود الأول والأخير من كل جدول ثابت. مهم. استخدم العلامة فقط لإنشاء أربعة أزرار القائمة الأفقيةفي رأس الصفحة. وفي حالات أخرى، اترك الصور في الخلفية، وفي الخلايا الثانية من الجداول يتم استخدام الألوان فقط، وفي الجدول الأول والأخير يكون #99FF99. دع نص محتوى الصفحة يكون محاذيًا على جانبي خلية الجدول ويكون العنوان في المنتصف. أما بالنسبة للمسافات بين خلايا الجدول، وكذلك المسافات البادئة للخلايا، فكر بنفسك أين يجب إزالتها بالكامل وأين يجب زيادتها. لقد أصبح شائعًا، حيث استخدم مصممو الويب بشكل أساسي طريقة تخطيط الجدول وحصلوا على نتائج جيدة جدًا. العلامات المستخدمة لبناء جدول في HTML طاولة - العلامة المطلوبة، فتح وإغلاق الجدول التسمية التوضيحية- علامة اختيارية تشير إلى عنوان الجدول ذ- علامة اختيارية تحتوي علامتي الفتح والإغلاق على اسم العمود. عادة ما يظهر بالخط العريض آر- علامة مطلوبة لفتح الخط وإغلاقه td- علامة مطلوبة تشير إلى فتح وإغلاق خلية على التوالي رمز المثال لجدول بسيط اسم الطاولة ستوبتس 1 ستوبتس 2 النص في الخلية الأولى النص في الخلية الثانية سيتم عرض المتصفح الغرض من الجداول في HTML الدرس على الجداول مهم جدا! بفضل الجداول، لا يمكنك ترتيب النصوص فحسب، بل يمكنك أيضًا ترتيب الصور والروابط وغير ذلك الكثير. في الجدول يمكنك تحديد خلفية(أو لونه)، المسافة الفارغة, عرض, حدودو معلمات أخرىمن شأنها أن تعطيها جميلة مظهر. الجدول - خطوتك الأولى نحو الفهم تصميم الويب! في السابق، تم وضع العديد من المواقع بالكامل كجداول، أي أن كل ما شاهده المستخدم (القائمة الجانبية، القائمة العلوية، المحتوى) كان محتوى خلايا جدول كبير. في هذه الملاحظة، دعنا ننتقل مباشرة إلى السمات التي تجعل الطاولة جميلة... خصائص ومعلمات جداول HTML: المسافة البادئة، العرض، لون الخلفية، الحدود (الإطار) ش علامة الجدوللديه السمات التالية: عرض- عرض الجدول. يمكن أن يكون بالبكسل أو % من عرض الشاشة. com.bgcolor- لون خلفية خلايا الجدول خلفية- يملأ خلفية الجدول بنمط حدود- الإطار والحدود في الجدول. يشار إلى سمك بالبكسل حشوة الخلية- الحشو بالبكسل بين محتويات الخلية وحدودها الداخلية كما كان من قبل، نكتب قيمة السمة بين علامتي اقتباس. دعونا نلقي نظرة على استخدام هذه السمات باستخدام مثال. للقيام بذلك، دعونا إنشاء جدول (ولكن بالفعل بدون التسمية التوضيحية والعلامات التي نادرًا ما تستخدم) وقم بتعيين المعلمة على السمة حدود, العرض (عرض الجدول أو الصف أو الخلية)و بجكولور (لون الخلية) ونتيجة لذلك، سيتم عرض الجدول التالي في المتصفح: إطار- سمة تشير إلى الإطار حول الطاولة. هناك القيم التالية: باطل - بدون إطار، أعلاه - فقط الإطار العلوي، أدناه - الإطار السفلي فقط، hsides - الإطارات العلوية والسفلية فقط، vsides - الإطارات اليسرى واليمنى فقط، LHS - الإطار الأيسر فقط، RHS - الإطار الأيمن فقط، الصندوق - جميع الأجزاء الأربعة من الإطار. قواعد- سمة تشير إلى الحدود داخل الجدول، بين الخلايا. هناك القيم التالية: لا شيء - لا توجد حدود بين الخلايا، المجموعات - الحدود فقط بين مجموعات الصفوف ومجموعات الأعمدة (سيتم مناقشتها لاحقًا)، الصفوف - الحدود بين الصفوف فقط، cols - الحدود بين الأعمدة فقط، الكل - عرض كافة الحدود. دعونا نلقي نظرة على مثال التعليمات البرمجية ستوبتس 1 ستوبتس 2 نتيجة الآن دعونا نحاول إنشاء طاولة جميلة. للقيام بذلك، دعونا نبدأ في استخدام محاذاة الجدول. للقيام بذلك، هناك المعلمات التالية المألوفة بالفعل: محاذاة- محاذاة الجدول. يمكن وضعها على اليسار (يسار)، على اليمين (يمين)، في الوسط (الوسط) تباعد الخلايا- المسافة بين خلايا الجدول . محدد بالبكسل (الافتراضي 0 بكسل) حشوة الخلية- المساحة المتروكة بالبكسل بين محتويات الخلية وحدودها الداخلية (الافتراضي 0 بكسل) لنلقي نظرة على مثال ستوبتس 1 ستوبتس 2 النص في الخلية الأولى من العمود الأول النص في الخلية الثانية من العمود الثاني سيعرض المتصفح جدولًا في المنتصف يشبه هذا: صفوف tr وخلايا td في جداول HTML اسمحوا لي أن أذكرك مرة أخرى أن الجداول يتم تشكيلها صفًا تلو الآخر (tr). تحتوي الصفوف (tr) بالفعل على خلايا (td). إذا قمت بتحديد معلمة لسلسلة (tr)، فستكون صالحة لـ جميع الخلايا(td) في هذا السطر، إذا كان لخلية معينة، فهي فقط لها. في الأمثلة أعلاه، قمت بتحديد لون الصف، وتم توزيع هذه المعلمة وفقًا لذلك على جميع الخلايا. بالنسبة لعلامات tr وtd هناك ما يلي محاذاة- محاذاة النص داخل الخلية. الحافة اليسرى (يسار)، الحافة اليمنى (يمين)، الوسط (الوسط) valign- المحاذاة العمودية للنص داخل الخلية. أعلى (أعلى)، أسفل (أسفل)، مركز (وسط) com.bgcolor- يحدد لون الخط عرض- تتم الإشارة إلى عرض العمود (جميع الخلايا أدناه ستقبل هذه المعلمة) بالبكسل أو كنسبة مئوية، حيث 100% هو عرض الجدول بأكمله ارتفاع- ارتفاع الخلية (جميع الخلايا في الصف ستقبل هذه المعلمة) دعونا نلقي نظرة على الكود حيث تتم محاذاة محتويات الخلايا (td) على طول حواف مختلفة: في الأولى إلى اليسار، وفي الثانية إلى اليمين: ستوبتس 1 ستوبتس 2 النص في الخلية الأولى من العمود الأول النص في الخلية الثانية من العمود الثاني ستوبتس 1 ستوبتس 2 نتيجة باستخدام الجداول يمكنك إنشاء صفحة جيدة جدًا. لا تنس أنه لا يمكنك إدراج النص في الخلايا فحسب، بل يمكنك أيضًا إدراج الصور والروابط وما إلى ذلك!) شكرًا لكم على اهتمامكم! آمل أن تكون المادة مفيدة! أخبر الأصدقاء تويتر لعبة سامسونج... اختفى سطح مكتب Android أو أن المشغل لا يعمل! المقالة التالية Xperia Companion - تطبيق جديد على أجهزة الكمبيوتر التي تعمل بنظام Windows لتحديث Xperia واستعادته اقرأ أيضا أفضل مشغلات الموسيقى للأندرويد 2024-03-13 00:03:49 ما هو المحور والتبديل وجهاز التوجيه؟ 2024-03-12 00:04:38 فك تشفير الاختصار Json 2024-03-11 00:04:21 معرض الصور في jQuery مع تأثير مثير للاهتمام 2024-03-09 00:04:15 ستوبتس 1 ستوبتس 2 النص في الخلية الأولى من العمود الأول النص في الخلية الثانية من العمود الثاني