الجداول هي واحدة من عناصر هتمل الرئيسية المستخدمة لتنظيم وتقديم البيانات بطريقة مريحة ومنظمة. ومع ذلك ، في بعض الأحيان يكون من الضروري نقل جدول على صفحة ويب لتحسين العرض المرئي أو لتنظيم المحتوى.
هناك عدة طرق بسيطة لنقل جدول إلى هتمل. واحد منهم هو استخدام كس. باستخدام خاصية" الهامش " ، يمكنك تعيين هوامش حول الجدول ، مما سيسمح لك بنقلها إلى الموقع المطلوب على الصفحة. طريقة أخرى هي استخدام سمات "محاذاة" و "فالين" ، والتي تسمح لك بتعيين المحاذاة الأفقية والرأسية للجدول.
إذا كنت بحاجة إلى تحريك الجدول مسافة معينة بالنسبة للعناصر الأخرى في الصفحة ، فيمكنك استخدام خصائص "الموضع" و "اليسار" أو "الأعلى". يمكنك أيضا إنشاء حاوية لجدول وتعيين خاصية" الموضع "الخاصة به بقيمة" نسبي "أو" مطلق " لتحديد المواقع بشكل أكثر دقة.
من المهم أن نتذكر أنه عند استخدام كس لنقل جدول ، فمن الضروري أن تأخذ في الاعتبار أن التغييرات في موقفها قد تؤثر على بقية المحتوى على الصفحة. لذلك ، يجب عليك التحقق بعناية من كيفية ملاءمة الجدول للهيكل العام لصفحة الويب.
في أي حال ، يعتمد اختيار كيفية نقل الجدول في هتمل على أهدافك ومتطلباتك المحددة لتصميم الويب. من المهم أن تضع في اعتبارك الاستخدام الدلالي للجداول ونهج إعادة التثبيت مع مراعاة النزاهة والهيكل المنطقي لموقعك.
- كيفية تغيير موقف جدول في هتمل: طرق بسيطة
- إضافة أنماط كس إلى جدول
- باستخدام سمة المحاذاة
- وضع جدول باستخدام خاصية موضع كس
- تطبيق السمة العائمة
- وضع جدول في كتلة باستخدام خاصية عرض كس
- تغيير الهوامش والهوامش لتحريك الجدول
- باستخدام السمة كولسبان لجدول
- سؤال وجواب
- كيف يمكنني نقل جدول إلى أتش تي أم أل?
- كيف يمكنني تغيير موقف جدول في أتش تي أم أل دون استخدام المغلق?
- هل من الممكن استخدام جافا سكريبت لنقل جدول في أتش تي أم أل?
- ماذا علي أن أفعل إذا لم يتحرك الجدول عند تطبيق خصائص المغلق أو جافا سكريبت?
كيفية تغيير موقف جدول في هتمل: طرق بسيطة
في هتمل ، هناك عدة طرق لتغيير موضع جدول على صفحة ويب. وفيما يلي بعض منها:
الجدول {
الهامش: 0 تلقائي;
- }
| اعتمادا على الموقف ، يمكنك الجمع بين الطرق المذكورة أعلاه لتحقيق الموضع المطلوب للجدول على الصفحة. | إضافة أنماط كس إلى جدول | أنماط كس يمكن استخدامها لنمط جدول في هتمل. المغلق (أوراق الأنماط المتتالية) يوفر القدرة على التحكم في مظهر العناصر على صفحة ويب. يتم تعريف الأنماط باستخدام القواعد التي تنطبق على عناصر أو فئات معينة. |
|---|---|---|
| يمكن استخدام الخصائص التالية لتصميم الجدول: | انهيار الحدود: يحدد كيفية دمج حدود خلايا الجدول | الحدود: يحدد نمط وسمك ولون حدود الجدول والخلايا |
| لون الخلفية: يحدد لون خلفية الجدول أو الخلية | اللون: يحدد لون النص في الجدول أو الخلية | محاذاة النص: محاذاة أفقية للنص في الخلية |
| الحشو: المسافة البادئة داخل الخلية | مثال على استخدام أنماط كس لجدول: | العنوان 1 |
العنوان 2
العنوان 3
الصف 1 ، الخلية 1
- الصف 1 ، الخلية 2
- الصف 1 ، الخلية 3
- الصف 2 ، الخلية 1
- الصف 2 ، الخلية 2
- الصف 2 ، الخلية 3
الصف 3 ، الخلية 1
باستخدام سمة المحاذاة
تسمح لك سمة المحاذاة بمحاذاة المحتوى داخل خلايا الجدول أفقيا. يمكن أن تكون قيمته واحدة مما يلي:
اليسار: محاذاة محتويات الخلية إلى اليسار;
- المركز: محاذاة محتويات الخلية إلى المركز;
- إلى اليمين: قم بمحاذاة محتويات الخلية إلى اليمين;
- تبرير: قم بمحاذاة محتويات الخلية مع عرض الخلية (للمحتوى متعدد الأسطر فقط);
- شار: قم بمحاذاة محتويات الخلية إلى حرف معين (محدد باستخدام سمة شار) ، بينما سيتم محاذاة النص بحيث يكون الحرف المحدد موجودا على طول سطر جميع الأحرف الأخرى في الخلية.
- فيما يلي مثال على استخدام السمة محاذاة في التعليمات البرمجية أتش تي أم أل:
محاذاة لليسار
تتمحور
محاذاة إلى اليمين
وضع جدول باستخدام خاصية موضع كس
يمكن نقل جداول هتمل على الصفحة باستخدام خاصية موضع كس. تتيح لك هذه الخاصية تعيين موضع عنصر نسبة إلى العنصر الأصلي أو العناصر الأخرى على الصفحة.
يتيح لك تطبيق خاصية موضع كس على جدول التحكم في موضعه ومظهره. للقيام بذلك ، يمكنك استخدام قيم الموضع: خاصية ثابتة في كس
: القيمة الافتراضية ، يتم وضع العناصر في ترتيب النص;
نسبي: يتم إزاحة العنصر بالنسبة إلى موضعه الأصلي;
مطلق: يتم وضع العنصر تماما بالنسبة إلى العنصر الأصلي الأول مع موضع آخر غير ثابت;
ثابت: يتم إصلاح العنصر بالنسبة إلى نافذة المتصفح ويظل في مكانه حتى إذا كانت الصفحة يتم التمرير;
مثبت: يتصرف العنصر مثل الموضع: نسبي داخل الحاوية ، ولكنه يصبح ثابتا عندما يقوم المستخدم بتمرير المحتوى من أعلى إلى أسفل.
الجدول {
موضع: نسبي;
أعلى: 50 بكسل;
}
باستخدام خاصية موضع كس ، يمكنك تحقيق تأثيرات تخطيط الجدول المختلفة على الصفحة. يمكن أن يكون هذا مفيدا بشكل خاص عند إنشاء تخطيطات معقدة أو عندما تحتاج إلى وضع جدول في خلفية الصفحة.
تطبيق السمة العائمة
السمة تعويم يمكن استخدامها لنقل جدول في هتمل. تتيح لك هذه السمة محاذاة العناصر أفقيا عن طريق نقلها إلى اليسار أو اليمين على الصفحة.
. قيمة اليسار يتحرك الجدول إلى اليسار ، واليمين يتحرك إلى اليمين.
الخلية 1
الخلية 2
الخلية 3
الخلية 4
سينقل الرمز أعلاه الجدول إلى اليسار في الصفحة.
تجدر الإشارة أيضا إلى أن استخدام سمة التعويم يمكن أن يؤدي إلى انتهاك بنية الصفحة وتداخل العناصر الأخرى. لذلك ، من الضروري توخي الحذر عند تطبيق هذه السمة وأن تكون على دراية بعواقبها.
وضع جدول في كتلة باستخدام خاصية عرض كس
باستخدام خاصية عرض كس ، يمكنك بسهولة تغيير طريقة وضع الجدول داخل الكتلة. بدلا من استخدام العلامات
و
لإنشاء جدول ، يمكننا استخدام عناصر الكتلة وخاصية العرض الخاصة بها لتحقيق التأثير المرئي المطلوب.
على سبيل المثال ، لوضع جدول أفقيا ، يمكنك استخدام خاصية العرض:فليكس كس للكتلة الأصل ، وتحديد كل خلية من الجدول ككتلة منفصلة. سيسمح لك ذلك بإدارة حجم وموقع كل خلية في الجدول بسهولة.
الخلية 1
الخلية 2
الخلية 3
وبالتالي ، يمكنك استخدام خاصية عرض كس في تركيبة مع عناصر كتلة لإنشاء جدول مرن وقابل للتخصيص داخل الكتلة. باستخدام هذا النهج سوف تسمح لك للسيطرة بسهولة على تخطيط وأسلوب الجدول دون انتهاك دلالات هتمل.
على سبيل المثال ، لإضافة الحشو حول جدول ، يمكنك استخدام التعليمات البرمجية كس التالية:
الهامش: 20 بكسل;
| الحشو: 10 بكسل; | |
|---|---|
| } | في هذا المثال ، يتم تعيين الهوامش الخارجية إلى 20 بكسل للجدول. هذا يعني أن الجدول سوف ينحسر عن محيطه بمقدار 20 بكسل من جميع الجوانب. هناك أيضا هوامش داخلية من 10 بكسل ، والتي تخلق مسافة بين حدود الجدول ومحتوياته. |
إذا كنت بحاجة إلى نقل الجدول بالنسبة إلى العناصر المجاورة على صفحة ويب ، فيمكنك استخدام خصائص الهامش العلوي والهامش الأيمن والهامش السفلي والهامش الأيسر.
على سبيل المثال ، لنقل الجدول إلى أسفل بالنسبة إلى العنصر السابق ، يمكنك استخدام التعليمات البرمجية كس التالية:
الجدول {
الهامش الأعلى: 20 بكسل;
}
في هذا المثال ، سينحرف الجدول عن العنصر السابق بمقدار 20 بكسل من الأعلى. وبالمثل ، يمكنك تغيير الهوامش للجوانب الأخرى من الجدول.
يمكن أن يكون تغيير الهوامش والهوامش مفيدا عند إنشاء تصميم فريد لجدول ، مما يسمح لك بنقله كما تراه مناسبا على صفحة الويب.
السمة كولسبان يسمح لك الجمع بين خلايا الجدول أفقيا. يحدد عدد الخلايا التي يجب دمجها في خلية واحدة.
مثال على الكود:
رأس الجدول
الخلية 1