HTML Tutorial
HTML Tutorial

HTML - ٹیبلز


HTML ٹیبلز ویب مصنفوں کو ڈیٹا کو مثل مواد، تصاویر، لنکس، دیگر ٹیبلز وغیرہ کو قطاروں اور کالموں میں ڈالنے کی اجازت دیتے ہیں۔

HTML ٹیبلز کو بنانے کے لئے <table> ٹیگ کا استعمال ہوتا ہے جس میں <tr> ٹیگ کا استعمال ٹیبل روز اور <td> ٹیگ کا استعمال ڈیٹا سیلز بنانے کے لئے ہوتا ہے۔ <td> کے نیچے الیمنٹس ریگولر ہوتے ہیں اور افتراضی طور پر بائیں جانب ہوتے ہیں۔

مثال

    <!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML ٹیبلز</title>
       </head>
      
       <body>
          <table border = "1">
             <tr>
                <td>قطار 1، کالم 1</td>
                <td>قطار 1، کالم 2</td>
             </tr>
             
             <tr>
                <td>قطار 2، کالم 1</td>
                <td>قطار 2، کالم 2</td>
             </tr>
          </table>
          
       </body>
    </html>

اس سے مندرجہ ذیل نتیجہ حاصل ہوگا:

یہاں، بارڈر ٹیگ کا ایک خصوصیت ہے اور یہ تمام سیلز کے درمیان ایک بارڈر ڈالنے کے لئے استعمال ہوتا ہے۔ اگر آپ کو بارڈر کی ضرورت نہیں ہوتی تو آپ border = "0" استعمال کر سکتے ہیں۔

ٹیبل ہیڈنگ

ٹیبل ہیڈنگ کو <th> ٹیگ کا استعمال کرکے تعریف کیا جا سکتا ہے۔ یہ ٹیگ <td> ٹیگ کو بدلنے کے لئے ہوتا ہے، جو حقیقی ڈیٹا سیل کو ظاہر کرنے کے لئے استعمال ہوتا ہے۔ عام طور پر آپ اپنی ٹاپ رو کو ٹیبل ہیڈنگ کے طور پر رکھیں گے جیسا کہ نیچے دکھایا گیا ہے، بصورت دیگر آپ <th> عنصر کو کسی بھی صف میں استعمال کر سکتے ہیں۔ <th> ٹیگ میں تعریف کی گئی ہیڈنگس ڈیفالٹ طور پر وسط میں ہوتی ہیں اور ہیڈنگ بولڈ ہوتی ہے۔

مثال

<!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML ٹیبل ہیڈر</title>
       </head>
    	
       <body>
          <table border = "1">
             <tr>
                <th>نام</th>
                <th>تنخواہ</th>
             </tr>
             <tr>
                <td>جان</td>
                <td>50000</td>
             </tr>
             <tr>
                <td>عمر</td>
                <td>30000</td>
             </tr>
          </table>
       </body>
       
    </html>

اس مثال میں، ٹیبل کے ہیڈنگ کے طور پر "نام" اور "تنخواہ" کو متعین کیا گیا ہے۔

<!DOCTYPE html>
    <html>
    
       <head>
          <title>HTML ٹیبل</title>
       </head>
    	
       <body>
          <table border = "1" width = "100%">
             
             <tr>
                <td>
                   <table border = "1" width = "100%">
                      <tr>
                         <th>نام</th>
                         <th>تنخواہ</th>
                      </tr>
                      <tr>
                         <td>رمیش رمان</td>
                         <td>5000</td>
                      </tr>
                      <tr>
                         <td>شبیر حسین</td>
                         <td>7000</td>
                      </tr>
                   </table>
                </td>
             </tr>
             
          </table>
       </body>
    	
    </html>

یہ مندرجہ ذیل نتیجہ پیدا کرے گا -