HTML ٹیبل میں قطاروں کو متاثر کیے بغیر کالموں کے درمیان جگہ کیسے شامل کی جائے؟
پیڈنگ بائیں اور دائیں خصوصیات کو ٹیبل کی مجموعی ترتیب کو متاثر کیے بغیر کالموں کے درمیان فاصلہ شامل کرنے کے لیے استعمال کیا جاتا ہے۔ یہ خاصیت ڈیولپرز کو اضافی فاصلہ شامل کرنے کی اجازت دیتی ہے اور یہ وقفہ قطاروں کو متاثر نہیں کرتا ہے۔
درج ذیل مراحل پر عمل کریں:
مرحلہ 1: ٹیبل کا ڈھانچہ بنائیں
آئیے فرض کریں کہ HTML فائل میں ایک ٹیبل ہے جس میں چار قطاریں اور تین کالم ہیں:
< ٹیبل >
< tr >
< ویں > نام < / ویں >
< ویں > کلاس < / ویں >
< ویں > شہر < / ویں >
< / tr >
< tr >
< td > جان < / td >
< td > بی ایس کیم < / td >
< td > لندن < / td >
< / tr >
< tr >
< td > سکندر < / td >
< td > بی ایس ریاضی < / td >
< td > ٹوکیو < / td >
< / tr >
< tr >
< td > جوزف < / td >
< td > بی ایس سی ایس < / td >
< td > نیویارک < / td >
< / tr >
< / ٹیبل >
مندرجہ بالا کوڈ پر عمل کرنے کے بعد ویب صفحہ اس طرح نظر آتا ہے:
آؤٹ پٹ اس بات کی تصدیق کرتا ہے کہ ٹیبل کا ڈھانچہ بنایا گیا ہے۔
مرحلہ 2: افقی پیڈنگ لگانا
بائیں جانب سے کالموں کے درمیان فاصلہ شامل کرنے کے لیے، استعمال کریں ' پیڈنگ-بائیں سی ایس ایس پراپرٹی۔ اس پراپرٹی کو لاگو کرنے کے بعد، ڈیٹا صحیح سیدھ کی طرح لگتا ہے۔ وجہ یہ ہے کہ پیڈنگ صرف بائیں جانب سے لگائی جاتی ہے۔
اب اسٹائلز کے CSS حصے میں 'td' عنصر کو منتخب کریں جو ان لائن طریقہ استعمال کرکے لاگو کیا جاسکتا ہے۔ پھر، 'کی پیڈنگ شامل کریں 50px بہتر تصور کے مقاصد کے لیے وقفہ کاری اور بارڈر پراپرٹی شامل کرنے کے لیے:
td {پیڈنگ-بائیں: 50px؛
سرحد : 2px ٹھوس سرخ؛
}
کوڈ پر عمل کرنے کے بعد، ویب صفحہ اس طرح نظر آتا ہے:
آؤٹ پٹ دکھاتا ہے کہ ٹیبل کے کالموں کے درمیان جگہ شامل کی گئی ہے۔
اب، دائیں جانب سے پیڈنگ سیٹ کرنے کے لیے، ' padding-دائیں جائیداد کا استعمال کیا جاتا ہے۔ اسی طرح، لیکن اب سیل ڈیٹا لگتا ہے ' بائیں موافق ' کوڈ ہے:
td {پیڈنگ-بائیں: 50px؛
سرحد : 2px ٹھوس سرخ؛
}
مندرجہ بالا کوڈ پر عمل کرنے کے بعد، ویب صفحہ اس طرح نظر آتا ہے:
آؤٹ پٹ اس بات کی تصدیق کرتا ہے کہ دائیں جانب پیڈنگ لگانے سے کالموں کے درمیان جگہ بڑھ گئی ہے۔
مرحلہ 3: بائیں اور دائیں پیڈنگ کا مجموعہ
جیسا کہ اوپر والے مرحلے میں ہے، دونوں صورتوں میں ڈیٹا سینٹرل لائن نہیں ہوتا ہے اور یہ ڈیٹا کو غیر پیشہ ورانہ بنا دیتا ہے۔ ڈیزائن کے احساس کو توڑے بغیر اسے نمایاں کرنے کے لیے۔ ذیل میں دونوں خصوصیات کو ایک ہی وقت میں استعمال کیا جا سکتا ہے:
td {پیڈنگ-دائیں: 60px؛
پیڈنگ-بائیں: 60px؛
سرحد : 2px ٹھوس سرخ؛
}
مندرجہ بالا کوڈ پر عمل کرنے کے بعد، ویب صفحہ اس طرح نظر آتا ہے:
آؤٹ پٹ اس بات کی تصدیق کرتا ہے کہ کالموں کے درمیان جگہ شامل کی گئی ہے اور ڈیٹا بھی مرکز میں منسلک ہے۔
نتیجہ
ٹیبل کالموں کے درمیان کی جگہ کو پیڈنگ بائیں اور دائیں خصوصیات کی مدد سے شامل کیا جاسکتا ہے۔ یہ خصوصیات سیل میں دائیں اور بائیں سمتوں سے اضافی جگہ کا اضافہ کرتی ہیں۔ دونوں خصوصیات کو ایک ہی وقت میں یا الگ الگ استعمال کیا جا سکتا ہے۔ اس مضمون نے کامیابی سے دکھایا ہے کہ قطاروں کو متاثر کیے بغیر میز کے کالموں کے درمیان فاصلہ کیسے شامل کیا جائے۔