سی ایس ایس کے ساتھ ٹیبل کو اسٹائل کرنے کا طریقہ

Sy Ays Ays K Sat Ybl Kw As Ayl Krn Ka Tryq



اعداد و شمار کو منظم طریقے سے پیش کرنے کے لیے میزیں سب سے عام اور موثر ٹول ہیں۔ پہلے زمانے میں، CSS سے پہلے، the <ٹیبل> عنصر کو بھرپور ڈیزائن لے آؤٹ بنانے کے لیے استعمال کیا گیا تھا۔ لیکن آج کل، کئی دیگر سی ایس ایس خصوصیات کو استعمال کرکے لے آؤٹ بنائے جاتے ہیں۔ مزید خاص طور پر، HTML '' عنصر ایک ویب ٹیبل بنانے کے لیے استعمال کیا جاتا ہے، جسے مختلف CSS خصوصیات کو لاگو کرکے مزید اسٹائل کیا جا سکتا ہے۔

یہ مطالعہ سی ایس ایس کے ساتھ اسٹائلنگ ٹیبلز سے متعلق رہنمائی کرے گا۔

سی ایس ایس کے ساتھ ٹیبل کو کیسے اسٹائل کریں؟

ٹیبل پر طرزیں لاگو کرنے کے لیے، ہم ذیل میں دیے گئے مراحل کی سیریز سے گزریں گے۔







مرحلہ 1: HTML میں ایک ٹیبل بنائیں



< ٹیبل >
< عنوان > طلباء کی معلومات < / عنوان >
< تھیڈ >
< tr >
< ویں > نام < / ویں >
< ویں > کورس < / ویں >
< ویں > نشانات < / ویں >
< / tr >
< / تھیڈ >
< tbody >
< tr >
< td > ولیم < / td >
< td > نیٹ ورکنگ < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > جیک < / td >
< td > C++ کا تعارف < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > جوزف < / td >
< td > جاوا کا تعارف < / td >
< td > 77 < / td >
< / tr >
< / tbody >
< / ٹیبل >

HTML میں ٹیبل بنانے کے لیے، درج ذیل HTML عناصر استعمال کیے جاتے ہیں:



  • ' <ٹیبل> HTML میں ٹیبل بنانے کے لیے عنصر کا استعمال کیا جاتا ہے۔
  • '
ٹیبل کے ہیڈر کی وضاحت کرنے کے لیے استعمال کیا جاتا ہے، جس میں عام طور پر عنوانات ہوتے ہیں۔
  • '
  • ” شامل کرنے والی قطار کے لیے استعمال ہوتا ہے۔
  • '
  • ٹیبل کے جسم کے حصے کی وضاحت کرتا ہے۔

    تیار کردہ ٹیبل فی الحال اس طرح دکھتا ہے:





    آئیے یہ دیکھنے کے لیے آگے بڑھتے ہیں کہ اس ٹیبل کو کیسے سٹائل کیا جائے۔



    مرحلہ 2: اسٹائل 'باڈی' عنصر

    جسم {
    فونٹ فیملی: وردانا، جنیوا، طاہوما، سانز سیرف؛
    پس منظر- رنگ : rgb ( 233 , 233 , 233 ) ;
    }

    عنصر درج ذیل CSS اسٹائلنگ خصوصیات کے ساتھ لاگو ہوتا ہے:

    • ' فونٹ فیملی 'قیمت کے ساتھ پراپرٹی' وردانہ، جنیوا، تہوما، سانز سیرف ” کا استعمال اس فونٹ کو لاگو کرنے کے لیے کیا جاتا ہے جو براؤزر کے ذریعے سپورٹ کیا جاتا ہے۔ اگر براؤزر پہلے فونٹ اسٹائل کو سپورٹ نہیں کرتا ہے تو دوسرا استعمال کیا جائے گا۔
    • ' پس منظر کا رنگ پراپرٹی عنصر کے پس منظر کا رنگ سیٹ کرتی ہے۔

    مرحلہ 3: اسٹائل 'کیپشن' عنصر

    عنوان {
    فونٹ- سائز : 25px;
    متن- سیدھ میں لانا : مرکز
    پس منظر- رنگ : #1C6758;
    رنگ : کارنسلک
    }

    ٹیبل میں کیپشن شامل کرنے کے لیے عنصر کا استعمال کیا جاتا ہے۔
  • '
  • سرخی کے مواد کی وضاحت کریں۔
  • '
  • عنصر کو اس طرح اسٹائل کیا گیا ہے:

    • ' حرف کا سائز ” پراپرٹی کو فونٹ سائز کی ترتیب کے لیے استعمال کیا جاتا ہے۔
    • ' متن سیدھ پراپرٹی عنصر کے متن کی سیدھ کی وضاحت کرتی ہے۔
    • ' رنگ ' پراپرٹی سے مراد عنصر کے فونٹ کا رنگ ہے۔

    مندرجہ بالا فراہم کردہ کوڈ کا آؤٹ پٹ یہ ہے:

    مرحلہ 4: میز پر بارڈر شامل کریں۔
    ' سرحد عنصر کے ارد گرد ایک بارڈر شامل کرنے کے لیے پراپرٹی کا استعمال کیا جاتا ہے۔ یہ ایک شارٹ ہینڈ پراپرٹی ہے جو بارڈر کی چوڑائی، بارڈر اسٹائل اور بارڈر کا رنگ بتاتی ہے۔

    آئیے ٹیبل پر پیڈنگ اور مارجن کے ساتھ بارڈر لگائیں:

    ٹیبل، ویں، ٹی ڈی {
    سرحد : 2px ٹھوس #1C6758;
    پیڈنگ: 1px 6px؛
    مارجن: آٹو؛
    }

    یہاں:

    • ' سرحد ” پراپرٹی بارڈر کی چوڑائی، بارڈر اسٹائل اور بارڈر کا رنگ بتا کر میز کے ارد گرد بارڈر کو ایڈجسٹ کرتی ہے۔
    • ' بھرتی ' عنصر کے مواد کے ارد گرد کی جگہ کی وضاحت کرتا ہے، جہاں پہلی قدر اوپر سے نیچے کی جگہ کی وضاحت کرتی ہے اور دوسری قدر مواد کے دائیں بائیں جانب جگہ کا اضافہ کرتی ہے۔
    • ' مارجن 'قیمت کے ساتھ پراپرٹی' آٹو ' عنصر کے ارد گرد مساوی جگہ شامل کرتا ہے۔

    آؤٹ پٹ

    نوٹ : اگر ہم ٹیبل بارڈرز کے درمیان خالی جگہیں نہیں چاہتے ہیں تو بارڈر کولپس پراپرٹی استعمال کریں۔

    مرحلہ 5: ٹیبل سے بارڈر سپیسنگ کو ختم کریں۔
    میز کی سرحدوں کے درمیان خالی جگہوں کو 'کا استعمال کرکے ہٹایا جا سکتا ہے سرحد کا خاتمہ 'خاتم' کی قدر کے ساتھ پراپرٹی:

    border-collapse : گرنا۔

    مرحلہ 6: ٹیبل کا سائز ایڈجسٹ کریں۔
    آئیے دیکھتے ہیں کہ میز کے سائز کو کیسے ایڈجسٹ کیا جائے:

    تھیڈ ویں {
    چوڑائی : 160px;
    }

    شامل کیا گیا ' چوڑائی

    عنصر والی پراپرٹی خود بخود اس کے مطابق ٹیبل کے سائز کو ایڈجسٹ کرے گی::

    ہم مخصوص ٹیبل سیل پر سٹائل بھی لاگو کر سکتے ہیں۔ آئیے ان پر بحث کریں!

    مرحلہ 7: طرز کے مخصوص ٹیبل سیل
    مخصوص ٹیبل سیل کو اسٹائل کرنے کے لیے، اس مخصوص سیل کی کلاس کا نام بتائیں۔ مثال کے طور پر، ذیل کا کوڈ اس بات کی نمائندگی کرتا ہے کہ دوسری قطار کے تیسرے سیل کو کلاس کا نام دیا گیا ہے ' نمایاں کریں ”:

    < td کلاس = 'نمایاں' > 99 < / td >

    اب، CSS فائل میں کلاس کا نام استعمال کرتے ہوئے سیل تک رسائی حاصل کریں:

    نمایاں کریں {
    پس منظر- رنگ : #0f90d5;
    }

    ' نمایاں کریں

    عنصر کی کلاس ہائی لائٹ سے مراد ہے۔ یہ عنصر 'کے ساتھ لاگو ہوتا ہے پس منظر کا رنگ پس منظر پر رنگ کی وضاحت کرنے کے لیے خاصیت۔

    جیسا کہ ہم دیکھ سکتے ہیں، مخصوص ٹیبل سیل کو کامیابی کے ساتھ اسٹائل کیا گیا ہے:

    مرحلہ 8: فونٹ فیملی اور ٹیبل کا سائز سیٹ کریں۔

    ٹیبل {
    font-family: cursive;
    فونٹ- سائز : 18px;
    متن- سیدھ میں لانا : مرکز
    }

    درج ذیل سی ایس ایس خصوصیات ٹیبل عنصر پر لاگو ہوتی ہیں:

    • ' فونٹ فیملی 'پراپرٹی عنصر کا فونٹ اسٹائل سیٹ کرتی ہے۔
    • ' حرف کا سائز ' پراپرٹی کو عنصر کے فونٹ کی ترتیب کے لیے استعمال کیا جاتا ہے۔
    • ' متن سیدھ ' پراپرٹی کو متن کی سیدھ کو ایڈجسٹ کرنے کے لیے استعمال کیا جاتا ہے۔

    یہاں آؤٹ پٹ ہے:

    مرحلہ 9: ترتیب میں رنگین قطاریں۔
    اسے مخصوص قطاروں یا کالموں پر اسٹائل لگانے کی بھی اجازت ہے۔ مثال کے طور پر، یکساں قطاریں درج ذیل فارمیٹ کی پیروی کرکے اسٹائل کی جاتی ہیں۔

    \
    tbody tr:nth-child ( یہاں تک کہ ) {
    پس منظر- رنگ : #FFB200;
    }

    یہاں:

    • ' : نویں بچہ (یہاں تک کہ) چھدم سلیکٹر کا استعمال ایک دلیل لینے کے لیے کیا جاتا ہے جو اس پیٹرن کی وضاحت کرتا ہے جس پر اسٹائل لاگو کیا جانا ہے۔
    • ' پس منظر کا رنگ عنصر کے پس منظر کا رنگ سیٹ کرنے کے لیے پراپرٹی کا استعمال کیا جاتا ہے۔

    یہ دیکھا جا سکتا ہے کہ پس منظر کا رنگ کامیابی سے یکساں قطاروں پر لاگو ہوتا ہے:

    یہ سب سی ایس ایس کے ساتھ اسٹائل ٹیبل کے بارے میں تھا۔

    نتیجہ

    ڈیٹا کو منظم رکھنے کے لیے میزیں ایک اہم ٹول ہیں۔ ٹیبل کو HTML

    , اور مزید عناصر کا استعمال کرکے بنایا جا سکتا ہے۔ ٹیبل کو اسٹائلائز کرنے کے لیے کئی سی ایس ایس خصوصیات کا استعمال کیا جاتا ہے، جیسے بارڈر، بیک گراؤنڈ کلر پراپرٹی، فونٹ فیملی پراپرٹی، اور بہت کچھ۔ بہتر تفہیم کے لیے، اس تحریر میں CSS کے ساتھ ٹیبل کو اسٹائل کرنے کے لیے مرحلہ وار طریقہ کار کی وضاحت کی گئی ہے۔

    ,