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