ستشرح هذه الكتابة إجراءً لإضافة صورة داخل خلية الجدول بتنسيق HTML.
كيفية إضافة صورة داخل خلية الجدول في HTML؟
HTML ' 'علامة لإدراج صورة في خلية الجدول.
بناء الجملة
اتبع بناء الجملة لتضمين صورة داخل خلية الجدول:
< td > < IMG src = '' كل شيء = '' العرض = '' > < / td >
هنا:
- '
'عنصر يشير إلى خلية الجدول حيث يجب إضافة الصورة. - '
'العلامة لتحديد الصورة.
- ' src 'تحدد مسار الصورة.
- ' كل شيء 'يشير إلى النص الذي سيتم عرضه على الشاشة في حالة فشل تحميل الصورة.
- ' العرض 'عرض الصورة.
مثال
في ملف HTML ، قم بإنشاء جدول باتباع الإرشادات المتوفرة:
- ' <جدول> 'عنصر يستخدم لإنشاء جدول.
- '
'عنصرًا' صفًا. - '
'يضبط العنوان حيث' كولسبان 'تشير إلى عدد الأعمدة التي يجب أن تغطيها الخلية. - '
'ينشئ خلايا جدول للبيانات. ال ' 'بالسمات المطلوبة في هذه العلامة لتضمين الصور في خلية جدول: < الطاولة >
< آر >
< ذ كولسبان = '3' نمط = 'حجم الخط: 28 بكسل ؛' > فواكه وخضروات < / ذ >
< / آر >
< آر >
< ذ > الاسم < / ذ >
< ذ نمط = 'العرض: 250 بكسل' > صورة < / ذ >
< ذ > فاكهة / الخضار < / ذ >
< / آر >
< آر >
< td > التفاح < / td >
< td > < IMG src = '/images/apples.jpg' كل شيء = 'تفاح' العرض = '200' > < / td >
< td > الفاكهة < / td >
< / آر >
< آر >
< td > الجزرة / ذ >
< td > < IMG src = '/images/carrot.jpg' كل شيء = 'جزرة' العرض = '200' > < / ذ >
< td > خضروات < / ذ >
< / آر >
< آر >
< td > برتقالي / ذ >
< td > < IMG src = '/images/orang.jpg' كل شيء = 'البرتقالي' العرض = '200' > < / ذ >
< td > الفاكهة < / ذ >
< / آر >
< / الطاولة >يمكن ملاحظة أن جدول HTML قد تم إنشاؤه بنجاح مع الصور المضمنة:
CSS
الآن ، سنناقش خصائص CSS المستخدمة لتعيين تخطيط الجدول.
عنصر نمط 'الجدول'
أولاً ، قم بالوصول إلى ' <جدول> 'بواسطة اسم العلامة وتطبيق الخصائص التالية:
الطاولة {
محاذاة النص : المركز ؛
العرض : 800 بكسل ؛
انهيار الحدود : انهيار ؛
حافة : تلقاءي ؛
حجم الخط : 20 بكسل ؛
}وصف الكود أعلاه موضح أدناه:
- ' محاذاة النص 'يحدد محاذاة النص.
- ' العرض 'عرض الجدول.
- ' انهيار الحدود 'تحدد ما إذا كانت الحدود مطوية أم لا.
- ' حافة 'يضيف مساحة حول الطاولة.
- ' حجم الخط 'حجم خط نص الجدول.
عنصر النمط 'th' و 'td'
ذ و td {
الحدود : 1 بكسل صلب نفسجي ؛
}هنا ، ' الحدود تضبط خاصية 'الحد حول العناصر من خلال تحديد قيم عرض الحدود والنمط واللون.
انتاج |
يدور هذا المنشور حول إدراج الصور في خلية الجدول بتنسيق HTML.
استنتاج
لإضافة صورة داخل ' <جدول> '، استخدم'
'ضمن HTML'
' جزء. يحدد العنصر ' ' src ”لتقديم عنوان URL للصورة. بشكل أكثر تحديدًا ، لضبط حجم الصورة ، أضف ' ارتفاع ' و ' العرض 'ضمن علامة'
'. توضح هذه المدونة الإجراء الخاص بإضافة صورة في خلية جدول HTML.
- '
- '