یہ تحریر HTML میں ٹیبل سیل کے اندر ایک تصویر شامل کرنے کے طریقہ کار کی وضاحت کرے گی۔
ایچ ٹی ایم ایل میں ٹیبل سیل کے اندر تصویر کیسے شامل کی جائے؟
ایچ ٹی ایم ایل ' ٹیگ کو ٹیبل سیل میں امیج داخل کرنے کے لیے استعمال کیا جاتا ہے۔
نحو
ٹیبل سیل کے اندر امیج ایمبیڈ کرنے کے لیے نحو کی پیروی کریں:
< td >< img src = '' سب کچھ = '' چوڑائی = '' >< / td >
یہاں:
- '
عنصر ٹیبل سیل کی نشاندہی کرتا ہے جہاں تصویر کو شامل کرنے کی ضرورت ہے۔ - '
” ٹیگ تصویر کی وضاحت کے لیے استعمال کیا جاتا ہے۔
- ' src ” وصف تصویر کا راستہ طے کرتا ہے۔
- ' سب کچھ ” اس متن کو ظاہر کرتا ہے جو تصویر کے لوڈ ہونے میں ناکام ہونے کی صورت میں اسکرین پر ظاہر ہوگا۔
- ' چوڑائی ” تصویر کی چوڑائی کا تعین کرتا ہے۔
مثال
HTML فائل میں، فراہم کردہ ہدایات پر عمل کرتے ہوئے ایک ٹیبل بنائیں:
- ' <ٹیبل> ٹیبل بنانے کے لیے عنصر کا استعمال کیا جاتا ہے۔
- '
عنصر ایک قطار کی وضاحت کرتا ہے۔ - '
ایک سرخی کو ایڈجسٹ کرتا ہے جہاں ' colspan پراپرٹی اس بات کی نشاندہی کرتی ہے کہ سیل کتنے کالموں کا احاطہ کرے۔ - '
ڈیٹا کے لیے ٹیبل سیل بناتا ہے۔ ' ٹیبل سیل میں امیجز کو ایمبیڈ کرنے کے لیے اس ٹیگ کے اندر مطلوبہ اوصاف کے ساتھ ٹیگز داخل کیے جاتے ہیں: < ٹیبل >
< tr >
< ویں colspan = '3' انداز = 'فونٹ سائز: 28px؛' پھل اور سبزیاں< / ویں >
< / tr >
< tr >
< ویں >نام< / ویں >
< ویں انداز = 'چوڑائی: 250px؛' >تصویر< / ویں >
< ویں > پھل / سبزی < / ویں >
< / tr >
< tr >
< td > ایپل< / td >
< td >< img src = '/images/apples.jpg' سب کچھ = 'سیب' چوڑائی = '200' >< / td >
< td >پھل< / td >
< / tr >
< tr >
< td گاجر< / ویں >
< td >< img src = '/images/carrot.jpg' سب کچھ = 'گاجر' چوڑائی = '200' >< / ویں >
< td سبزی < / ویں >
< / tr >
< tr >
< td >اورنج< / ویں >
< td >< img src = '/images/orang.jpg' سب کچھ = 'کینو' چوڑائی = '200' >< / ویں >
< td >پھل< / ویں >
< / tr >
< / ٹیبل >یہ دیکھا جا سکتا ہے کہ ایمبیڈڈ امیجز کے ساتھ ایچ ٹی ایم ایل ٹیبل کامیابی کے ساتھ بنایا گیا ہے۔
سی ایس ایس
اب، ہم ٹیبل کی ترتیب کو ترتیب دینے کے لیے استعمال ہونے والی CSS خصوصیات پر بات کریں گے۔
اسٹائل 'ٹیبل' عنصر
سب سے پہلے، تک رسائی حاصل کریں ' <ٹیبل> ' عنصر کو ٹیگ کے نام سے اور درج ذیل خصوصیات کو لاگو کریں:
ٹیبل {
متن سیدھ : مرکز ;
چوڑائی : 800px ;
سرحد کا خاتمہ : گرنے ;
مارجن : آٹو ;
حرف کا سائز : 20px ;
}مندرجہ بالا کوڈ کی تفصیل ذیل میں دی گئی ہے:
- ' متن سیدھ ' متن کی سیدھ سیٹ کرتا ہے۔
- ' چوڑائی ٹیبل کی چوڑائی کا تعین کرتا ہے۔
- ' سرحد کا خاتمہ پراپرٹی اس بات کی وضاحت کرتی ہے کہ آیا سرحد منہدم ہے یا نہیں۔
- ' مارجن میز کے ارد گرد جگہ شامل کرتا ہے۔
- ' حرف کا سائز ٹیبل کے ٹیکسٹ فونٹ سائز کی وضاحت کرتا ہے۔
اسٹائل 'th' اور 'td' عنصر
ویں ، td {
سرحد : 1px ٹھوس جامنی ;
}یہاں، ' سرحد ” پراپرٹی بارڈر کی چوڑائی، انداز اور رنگ کی قدروں کی وضاحت کر کے عناصر کے گرد بارڈر کو ایڈجسٹ کرتی ہے۔
آؤٹ پٹ
یہ پوسٹ HTML میں ٹیبل سیل میں تصاویر داخل کرنے کے بارے میں ہے۔
نتیجہ
اندر ایک تصویر شامل کرنے کے لیے ' <ٹیبل> سیل، استعمال کریں
'HTML کے اندر ٹیگ'
' عنصر. ' ' عنصر کی وضاحت کرتا ہے ' src تصویر کا یو آر ایل فراہم کرنے کے لیے خصوصیت۔ مزید خاص طور پر، تصویر کے سائز کو ایڈجسٹ کرنے کے لیے، شامل کریں ' اونچائی 'اور' چوڑائی '
' ٹیگ کے اندر 'اوصاف۔ اس بلاگ نے HTML ٹیبل سیل میں تصویر شامل کرنے کے طریقہ کار کو واضح کیا ہے۔
- '
- '