- ایچ ٹی ایم ایل کا استعمال کرتے ہوئے چوڑائی ' وصف
- استعمال کرتے ہوئے ' نواں بچہ () 'سلیکٹر
- استعمال کرتے ہوئے '
'ٹیگ
طریقہ 1: HTML 'چوڑائی' وصف کا استعمال
' چوڑائی HTML کی طرف سے فراہم کردہ ایک بنیادی وصف ہے۔ یہ HTML عنصر کی چوڑائی یا افقی لمبائی کا تعین کرتا ہے۔ ٹیبل ڈیٹا کو ٹھیک کرنے کے لیے، چوڑائی کا وصف درج ذیل مراحل میں استعمال کیا جاتا ہے۔
مرحلہ 1: ایک ٹیبل بنائیں مرحلہ 2: CSS پراپرٹیز کو 'ٹیبل' عنصر میں شامل کریں۔ مرحلہ 3: 'td' عنصر کو پراپرٹیز تفویض کرنا مرحلہ 4: 'th' عنصر کو پراپرٹیز تفویض کرنا آؤٹ پٹ اس طرح ظاہر ہوتا ہے: مندرجہ بالا اسنیپ شاٹ سے پتہ چلتا ہے کہ تمام کالم کی چوڑائی 30% پر طے کی گئی ہے۔ سی ایس ایس کی nth-child() پراپرٹی کو ایک مقررہ چوڑائی ٹیبل بنانے کے لیے استعمال کیا جاتا ہے۔ اس پراپرٹی کو کالم نمبر ملتا ہے اور ' مندرجہ بالا کوڈ بلاک کی پیداوار ہے: یہ آؤٹ پٹ دکھاتا ہے کہ کالم نمبر 1 اور 3 10% کی چوڑائی پر طے کیے گئے ہیں۔ کے اندر ' ٹیبل سی ایس ایس کے حصے میں سیکشن شامل کریں table-layout : طے شدہ ڈیٹا ٹیبل عناصر کی 'چوڑائی' سیٹ کرنے کے لیے پراپرٹی: ایچ ٹی ایم ایل فائل میں شامل کریں ' مندرجہ بالا کوڈ کے ٹکڑوں پر عمل کرنے کے بعد، آؤٹ پٹ یہ ہے: اس طرح صارف ٹیبل ڈیٹا ٹیبل ڈیٹا کی چوڑائی کو ٹھیک کرنے کے لیے، ' چوڑائی ' وصف، ' نواں بچہ () 'علیحدہ کرنے والا، اور'
HTML فائل میں، استعمال کریں ' <مرکز> ویب صفحہ کے بیچ میں اس کے اندر موجود ہر عنصر کو ظاہر کرنے کے لیے ٹیگ کریں۔ اس کے اندر، 'کا استعمال کرتے ہوئے ایک میز بنائیں <ٹیبل> ”، 'اور' ٹیگ کریں اور اس میں ڈیٹا لکھیں:
< مرکز >
< ٹیبل >
< tr >
< ویں > نام < / ویں >
< ویں > حالت < / ویں >
< ویں > کمرہ نمبر < / ویں >
< / tr >
< tr >
< td > فاخر < / td >
< td > طالب علم < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > عمر < / td >
< td > طالب علم < / td >
< td > 06 < / td >
< / tr >
< / ٹیبل >
< / مرکز >
CSS میں ٹیبل عنصر سلیکٹر کا استعمال کریں اور 'کا اضافہ کریں سرحد ” 1px ٹھوس سرخ کا، “ متن سیدھ ' متن کو مرکز میں سیدھ میں کرتا ہے، اور ' چوڑائی 'جو میز کی مجموعی چوڑائی کو 80% پر سیٹ کرتا ہے:
ٹیبل {
سرحد : 1px ٹھوس سرخ؛
متن- سیدھ میں لانا : مرکز
چوڑائی : 80 %; }
کا استعمال کرتے ہیں ' td ' عنصر سلیکٹر اور سیٹ کرتا ہے ' بارڈر نیچے ” 5px ٹھوس سرخ کا، “ بھرتی آئٹم کو مزید نمایاں بنانے کے لیے ” کا 20px، اور “ چوڑائی ' 30% کے طور پر سیٹ کرتا ہے:
td {
بارڈر نیچے: 5px ٹھوس سرخ؛
پیڈنگ: 20px؛
چوڑائی : 30 %;
}
کا استعمال کرتے ہیں ' ویں ' کا رنگ تبدیل کرنے کے لیے عنصر سلیکٹر ' بارڈر نیچے ایک بہتر تصور تخلیق کرنے کے لیے سرخ سے سمندری سبز تک:
ویں {
بارڈر نیچے: 5px ٹھوس سمندری سبز؛
پیڈنگ: 20px؛
چوڑائی : 30 %;
}
طریقہ 2: 'nth-child( )' سلیکٹر کا استعمال کرنا
'اور' ٹیگز مثال کے طور پر، چوڑائی ہے ' طے شدہ 'صرف کالم نمبروں کے لیے' 1 'اور' 3 ' ان کالموں میں سے ہر ایک کی چوڑائی 10% ہو رہی ہے۔ اس مضمون نے کامیابی سے دکھایا ہے کہ ڈیٹا ٹیبل کی چوڑائی کو کیسے ٹھیک کیا جائے۔ td: نویں بچہ ( 3 ) {
چوڑائی : 10 %;
}
th: نویں بچے ( 1 ) {
چوڑائی : 10 %;
}
طریقہ 3:
ٹیبل لے آؤٹ: فکسڈ؛
چوڑائی : 80 %;
سرحد : 1px ٹھوس سرخ؛
متن- سیدھ میں لانا : مرکز
}
< کرنل انداز = 'چوڑائی: 15٪؛' / >
< کرنل انداز = 'چوڑائی: 30%؛' / >
عناصر کی چوڑائی کو ٹھیک کر سکتا ہے۔
نتیجہ
عناصر کی چوڑائی کو کیسے ٹھیک کیا جائے۔