غالبا ما تستخدم صفحات الويب الجداول لتمثيل البيانات ، خاصة عند العمل مع البيانات المجدولة أو لإنشاء تخطيطات. الجداول في هتمل هي مجموعة من الخلايا التي يمكن أن تحتوي على محتوى مختلف. أحد العناصر المستخدمة بشكل متكرر في جداول هتمل هو ارتباط يمكن تضمينه في خلية ويمكن النقر عليه.
. يتيح لك ذلك جعل محتوى الخلية بالكامل رابطا ، وليس مجرد جزء من النص الموجود بداخله.
وتعيين عنوان ورل الذي سيتم إعادة توجيه الرابط عند النقر عليه. على سبيل المثال ، لإنشاء ارتباط إلى الصفحة الرئيسية للموقع ، يمكنك استخدام الكود التالي:
الرئيسية
سيؤدي هذا إلى إنشاء خلية جدول تحتوي على ارتباط بالنص "الصفحة الرئيسية" إعادة التوجيه إلى الصفحة "فهرس.أتش تي أم أل".
- إنشاء ارتباط في خلية جدول
- مثال على استخدام خلية جدول كمرجع
- كيفية إضافة التصميم إلى ارتباط في خلية جدول
- 1. باستخدام الفصل
- 2. باستخدام المعرف
- 3. باستخدام الطبقات الزائفة
- استخدام صورة بدلا من نص الارتباط في خلية جدول
- إنشاء منطقة قابلة للنقر في خلية جدول
- تطبيق أنماط وتأثيرات مختلفة عند التمرير وتفعيل ارتباط في خلية جدول
- استخدام جافا سكريبت للتحكم في سلوك ارتباط في خلية جدول
- توصيات لتحسين الروابط في خلايا الجدول لمحركات البحث
- سؤال وجواب
إنشاء ارتباط في خلية جدول
يتيح لك إنشاء ارتباط في خلية جدول في هتمل إضافة تفاعل إلى الجدول وتزويد المستخدمين بالقدرة على التنقل عبر صفحات معينة أو موارد ويب. لإنشاء ارتباط في خلية جدول في هتمل ، استخدم العلامة.
مثال على الكود:
في هذا المثال ، يتم إنشاء جدول بسيط مع عمودين. يحتوي الصف الأول من الجدول على رؤوس الأعمدة. في الصف الثاني ، يتم إنشاء ارتباط في الخلية الأولى من الجدول باستخدام علامة. تحدد سمة هريف العنوان الذي سيحدث فيه الانتقال عند النقر على الرابط. في هذه الحالة ، يشير الرابط إلى موقع ويب http://www.example.com . يوجد النص" رابط " داخل العلامة ، والتي سيتم عرضها للمستخدم.
من المهم ملاحظة أنه لا يمكن إضافة روابط نصية فقط إلى هتمل ، ولكن أيضا الصور ، بالإضافة إلى سمات مختلفة للتحكم في مظهر الرابط ، على سبيل المثال ، اللون والأسلوب.
مثال على استخدام خلية جدول كمرجع
يمكن استخدام خلية جدول في هتمل كرابط لصفحة أو مورد آخر. للقيام بذلك ، قم بتطبيق السمة هريف إلى علامة ، والتي سيتم لفها حول محتويات خلية الجدول.
هنا هو رمز المثال مما يدل على استخدام خلية الجدول كمرجع:
| الاسم | العمر |
|---|---|
| إيفان | 25 |
| ماريا | 30 |
في هذا المثال ، يحتوي الجدول على صفين مع معلومات حول اسم وعمر الأشخاص. يتم لف الخلية التي تحتوي على الاسم في علامة مع السمة هريف تشير إلى عنوان الصفحة أو المورد الذي يجب أن يؤدي الارتباط.
عند النقر على اسم في خلية جدول ، سيتم إعادة توجيه المستخدم إلى الصفحة المحددة في سمة هريف. يمكن أن يكون هذا مفيدا ، على سبيل المثال ، عند إنشاء جدول جهات اتصال ، حيث يكون كل اسم رابطا لصفحة تحتوي على معلومات إضافية حول شخص ما.
كيفية إضافة التصميم إلى ارتباط في خلية جدول
يمكن تصميم الروابط في خلايا الجدول باستخدام كس. للقيام بذلك ، يمكنك استخدام الفئات أو المعرفات ، وكذلك الفئات الزائفة. فيما يلي أمثلة على طرق مختلفة لإضافة أنماط إلى الروابط في خلايا الجدول.
1. باستخدام الفصل
إنشاء فئة كس التي سيتم تطبيقها على الروابط في خلايا الجدول. نموذج التعليمات البرمجية:
ثم قم بتطبيق الفئة التي تم إنشاؤها على الروابط الضرورية عن طريق إضافة سمة الفئة مع ارتباط جدول القيمة. مثال على الكود:
2. باستخدام المعرف
على غرار استخدام فئة ، يمكنك أيضا استخدام معرف لنمط ارتباط في خلية جدول. نموذج التعليمات البرمجية:
ثم قم بتطبيق المعرف الذي تم إنشاؤه على الرابط المطلوب عن طريق إضافة سمة المعرف مع ارتباط جدول القيمة. مثال على الكود:
3. باستخدام الطبقات الزائفة
بمساعدة الفئات الزائفة ، يمكنك تصميم الروابط في خلايا الجدول في حالة معينة. على سبيل المثال ، يمكنك تغيير لون الارتباط عند تحريك المؤشر فوقه. نموذج التعليمات البرمجية:
الآن سيتغير لون الرابط إلى اللون الأحمر عند التمرير فوقه. مثال على الكود:
في هذه المقالة ، ناقشنا ثلاث طرق لإضافة أنماط إلى الروابط في خلايا الجدول: من خلال فئة ومعرف وفئات زائفة. يمكنك اختيار أنسب واحد لمشروعك وتطبيقه على الروابط الخاصة بك.
استخدام صورة بدلا من نص الارتباط في خلية جدول
أحد الخيارات لجعل الجدول يبدو ويعمل أكثر جاذبية في هتمل هو استخدام الصور بدلا من نص الارتباط في الخلايا. بفضل هذه الطريقة ، يمكنك إنشاء جداول ملونة وغنية بالمعلومات تجذب انتباه المستخدمين وتحسن تجربتهم المرئية.
لاستخدام صورة بدلا من نص الارتباط في خلية جدول ، يجب عليك:
- إعداد صورة لاستخدامها كحلقة وصل. يجب أن تكون الصورة في أحد التنسيقات التالية: جبغ ، ينغ ، جيف ، الخ.
- قم بإنشاء علامة ربط مسؤولة عن إنشاء ارتباط.
- تعيين السمة هريف للعلامة. في قيمة هذه السمة ، يجب عليك تحديد عنوان الصفحة أو الملف الذي سيتم الانتقال إليه عند النقر على الصورة.
- ضع علامة داخل العلامة لعرض الصورة. تعيين السمة سرك للعلامة عن طريق تحديد المسار إلى الصورة.
- ضع العلامة داخل خلية جدول.
مثال على استخدام صورة بدلا من نص ارتباط في خلية جدول:
| الاسم | صور |
|---|---|
| آنا | |
| مايكل |
في هذا المثال ، تحتوي الخلية التي تحتوي على عمود" الصورة " على صورة تمثل رابطا لملف تعريف المستخدم. ينقلك النقر على الصورة إلى صفحة تحتوي على معلومات مفصلة عن المستخدم.
يتيح لك استخدام صورة بدلا من نص الرابط تحسين التمثيل المرئي للجدول وجعله أكثر جاذبية للمستخدمين. يمكن أن تكون هذه الطريقة مفيدة أيضا لإنشاء الجداول التي تمثل فيها الروابط شعارات الشركة وصور المنتجات والعناصر الأخرى التي يمكن تمثيلها كصور.
إنشاء منطقة قابلة للنقر في خلية جدول
عند إنشاء جدول في هتمل ، يمكن تحريك كل خلية وجعلها قابلة للنقر باستخدام طرق مختلفة. إحدى هذه الطرق هي استخدام رابط داخل الخلية.
لإنشاء منطقة قابلة للنقر في خلية جدول ، تحتاج إلى استخدام علامة بداخلها. تسمح لك هذه العلامة بإنشاء رابط إلى صفحة أخرى أو تحديد عنوان ورل.
مثال على الكود:
ينشئ الرمز أعلاه جدولا يحتوي على صفين وخليتين في كل صف. تحتوي كل خلية على رابط مع سمة هريف تشير إلى العنوان الذي سيتم الانتقال إليه عند النقر على الخلية.
عند إنشاء مثل هذا الارتباط داخل خلية جدول ، ستكون المنطقة القابلة للنقر محدودة بحدود الخلية نفسها. إذا نقر المستخدم في أي مكان في الخلية ، فسيتم النقر فوق الارتباط المحدد.
وبالتالي ، فإن إنشاء منطقة قابلة للنقر في خلية جدول باستخدام رابط يسمح لك بتحسين تجربة المستخدم عن طريق جعل الجدول تفاعليا وقابلا للملاحة.
تطبيق أنماط وتأثيرات مختلفة عند التمرير وتفعيل ارتباط في خلية جدول
تساعد الروابط في إنشاء تفاعل على صفحات الويب وجعل المحتوى أكثر سهولة للمستخدمين. في خلايا الجدول ، يمكنك استخدام أنماط وتأثيرات مختلفة عند التمرير وتفعيل رابط لجذب انتباه الزوار. في هذه المقالة ، دعونا نلقي نظرة على بعض الأمثلة.
- }
عندما تحوم فوق ارتباط في خلية جدول ، سيتم وضع خط تحت النص.
تأثيرات الانتقال
للحصول على تأثير أكثر تعبيرا عند التمرير فوق ارتباط في خلية جدول ، يمكنك استخدام تأثيرات الانتقال. على سبيل المثال ، يمكنك استخدام رمز كس التالي لتغيير لون الخلفية مع انتقال سلس:
الجدول تد أ: تحوم {
- لون الخلفية: أصفر;
الانتقال: لون الخلفية 0.5 ثانية سهولة;