جداول هتمل هي واحدة من العناصر الأكثر استخداما من صفحة ويب. إنها تسمح لنا بهيكلة البيانات في صفوف وأعمدة ، مما يجعلها خيارا مثاليا لعرض المعلومات الجدولية. ومع ذلك ، مع وجود كمية كبيرة من البيانات ، يمكن أن تصبح الجداول غير ملائمة للعرض ، خاصة عند التمرير لأسفل الصفحة. في هذه الحالة ، من المفيد جدا تثبيت رأس الجدول بحيث يظل مرئيا عندما يقوم المستخدم بالتمرير عبر محتويات الصفحة.
يبقى ثابتا ، بينما يتم إخفاء بقية عناصر الجدول.
كما تعلمون ، كس هو أداة قوية تسمح لنا لخلق صفحات ويب أنيقة وجميلة. يمكنك أيضا استخدام كس لإضافة عناصر التصميم إلى رأس الجدول معلقة لجعلها أكثر جاذبية وقابلة للقراءة.تتضمن أمثلة عناصر التصميم هذه لون الخلفية والإطارات والظلال وما إلى ذلك. يتيح لنا ذلك إنشاء جداول تتطابق مع التصميم العام للصفحة والتأكيد على أهمية المعلومات المعروضة.
- إصلاح رأس الجدول
- طريقة سهلة لتأمين الغطاء
- باستخدام كس للتصميم
- إضافة عناصر إضافية
- عرض معلومات حول الجدول
إصلاح رأس الجدول
تتمثل إحدى المهام المهمة عند إنشاء الجداول في هتمل في إصلاح رأس الجدول بحيث يظل مرئيا على الصفحة عند التمرير عبر محتويات الجدول. هذا مفيد بشكل خاص عندما يحتوي الجدول على العديد من الصفوف ويمكن للمستخدم التمرير عموديا.
هناك عدة طرق لتنفيذ تثبيت رأس الجدول ، ولكن واحدة من أبسط والأكثر شيوعا هو استخدام موقف خصائص كس وأعلى.
أولا ، تحتاج إلى تعيين أنماط للجدول ، وتحديد عرض وعرض عناصر الجدول في شكل كتلة:
- دعونا إنشاء الجدول الذي سنقوم إصلاح رأس:
- في رأس الجدول ، سنقوم بإنشاء صفوف مع الخلايا وملئها بالنص اللازم.
- في بقية الجدول ، سنقوم بإنشاء صفوف بها خلايا ونملأها بالنص الضروري أيضا.
- إضافة أنماط للجدول:
- إضافة أنماط لإصلاح رأس الجدول:
- أدخل الجدول الذي تم إنشاؤه في المقالة:
| العنوان 1 | العنوان 2 |
|---|---|
| البيانات 1 | البيانات 2 |
| البيانات 3 | البيانات 4 |
| البيانات 5 | البيانات 6 |
| البيانات 7 | البيانات 8 |
| البيانات 9 | البيانات 10 |
الآن سيتم إصلاح رأس الجدول عند التمرير عبر محتويات الجدول ، وسيكون دائما مرئيا للمستخدم في أعلى الجدول.
طريقة سهلة لتأمين الغطاء
إذا كنت بحاجة إلى إصلاح رأس الجدول في هتمل بحيث يظل مرئيا عند تمرير الصفحة ، يمكنك استخدام موضع خاصية كس: مثبت؛. تتيح لك هذه الخاصية تثبيت عنصر في موضع معين عندما يقوم المستخدم بتمرير الصفحة.
لإصلاح رأس الجدول ، تحتاج إلى تطبيق النمط على عنصر الجدول. على سبيل المثال ، إذا كان الجدول الخاص بك يحتوي على البنية التالية:
العنوان 2
العنوان 3
الخلية 1-1
الخلية 2-1
- في هذا المثال ، طبقنا نمطا على عنصر باستخدام سمة النمط. يحتوي النمط على قاعدتين: موضع: لزج; وأعلى: 0;. الموضع: مثبت ؛ تخبر الخاصية المتصفح بتثبيت العنصر في موضعه الطبيعي حتى يقوم المستخدم بتمرير الصفحة إلى نقطة معينة. أعلى القيمة: 0 ؛ يخبر المتصفح بتثبيت رأس الجدول في أعلى الصفحة.
- يمكنك تغيير قيم الموقف وخصائص أعلى وفقا لاحتياجاتك. على سبيل المثال ، إذا كنت تريد تثبيت رأس الجدول في الأسفل ، فيمكنك استخدام الخاصية السفلية بدلا من الأعلى:
- ...
وبالتالي ، يمكنك استخدام موقف الملكية المغلق: مثبت ؛ لإصلاح رأس الجدول بسهولة وفعالية في هتمل. لا تتطلب هذه الطريقة استخدام البرامج النصية المعقدة أو المكتبات الإضافية وتوفر حلا موثوقا لإنشاء رأس جدول مثبت.
باستخدام كس للتصميم
محدد الجدول{
لون الخلفية: # إف 2 إف 2 إف 2;
اللون: # 333;
وزن الخط: غامق;
- الحشو: 8 بكسل;
- محاذاة النص: اليسار;
- }
ثياد ال {
الحد السفلي: 2 بكسل صلب # 333;
تحدد خاصية لون الخلفية لون الخلفية لخلايا الرأس ، وتحدد خاصية اللون لون النص. باستخدام خاصية وزن الخط ، يمكنك تعيين نص غامق للعناوين ، وتعيين خاصية الحشو الهوامش الداخلية للخلايا. يمكنك استخدام خاصية محاذاة النص لتعيين محاذاة النص في الخلايا.
لتعيين أنماط لخلايا الجسم الجدول ، يمكنك استخدام محددات تد أو تبودي تد:
الدفتيريا {الحشو: 8 بكسل;
صفوف من ارتفاعات مختلفة: استخدم سمة روسبان لدمج خلايا متعددة في خلية واحدة لإنشاء خلية ذات ارتفاع أعلى وتوفير عرض مرئي أكثر للبيانات.
أعمدة بعرض مختلف: استخدم سمة كولسبان لدمج خلايا متعددة في خلية واحدة لإنشاء خلية بعرض أكبر وتحسين المظهر المرئي للجدول.
الفواصل: أضف فواصل أفقية و/أو رأسية بين خلايا الجدول لإنشاء بنية أوضح وتحسين قابلية قراءة البيانات.
نظام الألوان: استخدم كس لتصميم الجدول واختيار نظام ألوان يطابق تصميم موقع الويب الخاص بك.