HTML मे Table Tag ? HTML मे Table कैसे बनाए ?

 HTML मे  Table Tag ? How तो use table tag ?

अगर आप भी जानना चाहते है की  HTML मे Table Tag ? HTML मे Table कैसे बनाए ? तो आप बिल्कुल सही जगह आए है। आज के इस ब्लॉग मे आपको HTML के टेबल टैग की हर छोटी से छोटी ओर IMPORTANT जानकारी मिलेगी 

मैंने ये ब्लॉग लिखने से पहले टेबल टैग के बारे मे बहुत Research की ताकि मे सबसे शानदार तरीके से आपको समझ सकु साथ ही मे आपको कुछ TASK भी देने वाला हूँ जिसे आप करते है तो आपके टेबल टैग की प्रैक्टिस बहुत भी अच्छी हो जाएगी । 

HTML मे टेबल कैसे बनाए 

HTML मे टेबल बनाने के लिए आप <table> </table> टैग को कुछ इस तरह इस्तेमाल करते है Table tag  को इस्तेमाल करने से पहले समझ लेते है की टेबल किस प्रकार से बनती है ओर इसमे कौन कौन से element होते है । 

जितने भी Element या content होंगे वो सारे ही table टैग के अंदर लिखे जाएंगे 

कुछ इस तरह से 👉

Table Tag

इस image मे आप देख सकते है की <table> के अंदर ही सारे टैग है ओर end मे </table> इस तरह close हुआ है अब जानते है की एक टेबल मे कौन कौन से element होते है । 

एक टेबल ROW ओर Column से मिलकर बनती है और HTML मे इसके लिए 

दो  तरह के टैग है 

1. <td>Column </td>
2. <tr> Row </tr>

NOTE : tr stands for table row. and td stands for table column

एक और IMPORTANT TAG होता है जिसे हम कहते है <th> </th> tag 

ये टैग टेबल की HEADING के लिए होता है 

तो चलते है अपनी कंप्युटर स्क्रीन पर और आप भी अपना कोड एडिटर ओपन कर  ले ताकि साथ साथ आप भी टेबल टैग को IMPLEMENT कर सके । 

तो बनाते है इस टेबल को 

सबसे पहले हम इसके लिए HTML के STRUCTURE को लिखते है और हमारा TABLE को Initialize करेंगे और इसके साथ ही इसमे width attribute के इस्तेमाल से इसकी साइज़ को लिखेंगे अभी के लिए मैं इसे 50% रखता हूँ 

 जो की कुछ इस प्रकार है 

अब जो हमे टेबल बनानी है उसमे 4 Rows ओर 3 Column है और 3 HEADING है 

तो सबसे पहले 4 ROW बनाने के लिए 4 बार <tr> </tr> को लिखना है जो की कुछ इस प्रकार है -

इसके बाद हमे ये इस टेबल मे कॉलम को Create करना होगा जैसा की आप इस इमेज मे देख रहे हो की हर Row मे 3 Column है ध्यान देने वाली बात ये है की 1st row मे 3 Heading है तो अब हमने heading के लिए <th></th> का इस्तेमाल करेंगे  

ये तो हो गई Normal table अगर हम इसे सेव करके ब्राउजर मे open करते है तो वो कुछ इस तरह दिखाई देगी

 

इस टेबल मे हमे बॉर्डर नहीं मिल रहा तो इसके लिए मे ये Recommend करूंगा की आप इसके लिए CSS का इस्तेमाल कीजिए अगर आपको same पेज मे ही काम करना है तो आप internal styling का इस्तेमाल भी कर skte है 

अब इस file को save करके अपने ब्राउजर मे open करना है फाइल को .html से सेव करे। 

इस टेबल मे आप CSS की मदद से और भी ज्यादा style कर सकते है 

Practice Questions : 

1. Create a basic table with three rows and two columns.

   • The table should contain any text of your choice in each cell.

2. Add table headings to the table created in question 1.

   • Use "Name" as the heading for the first column and "Age" as the heading for the second column.

3. Create a table with four rows and three columns.

   • Populate the first row with headings "Country", "Capital", and "Population".
   • Populate the subsequent rows with data for at least three different countries.

4. Create a table with two rows and four columns.

   • Merge the cells in the first row to create a single header cell spanning all four columns. Use "Company Information" as the header text.
   • Populate the second row with data for a company (e.g., Name, Address, Phone, Website).

5. Create a table with two rows and two columns.

   • Add an image in one of the cells. You can use any image URL or upload an image to your project directory.

Conclusion 

आप को ये ब्लॉग कैसा लगा हमने कमेन्ट करके जरूर बताए ओर आप इन Questions मे से कितने कर पाए ओर क्या क्या दिककते आई या अगर solve हुए तो आप ईमेल भी कर सकते है 

webwizardhamza@gmail.com