HTML टिप्सः ब्लोग पोस्ट में तालिका कैसे बनायें - १

आज हम आपको बतायेंगे कि आप HTML को उपयोग में लाकर अपने ब्लोग की पोस्ट में या वेबसाईट में टेबल यानि तालिका कैसे बनायेंगे। टेबल बनाने का तरीका या कोड जानने से पहले इसे बनाने में यूज होने वाले HTML के कुछ टैग जान लेते हैं।

HTML में किसी टैग को ओपन (शुरू) करके उसी नाम से उसे क्लोज भी करते हैं, बस एक slash ( “/” ) अतिरिक्त लगाना होता है। उदाहरण के लिये, किसी शब्द को बोल्ड में लिखने के लिये HTML का टैग <strong> उपयोग में लाते हैं, इस प्रकार <strong>ये बोल्ड है</strong> कुछ ऐसे दिखेगा - ये बोल्ड है।

किसी भी टेबल या तालिका को बनाने की शुरूआत <TABLE> नाम के टैग से होती है, ये case sensitive नही है इसलिये अपर या लोअर केस दोनों में लिख सकते हैं। टेबल को क्लोज करने के लिये लिखेंगे </TABLE>, यानि कि कोड कुछ ऐसे बनेगा -

<TABLE>

</TABLE>

इतने से ही टेबल नही बनती, इसलिये अभी इसमें और भी कोड जोड़ना बाकि है। एक टेबल में क्या होती हैं? कुछ Row और कुछ कॉलम, अब हम इन्हें बनाने का कोड जानते हैं। टेबल के अंदर Row बनाने के लिये <TR> नाम का टैग यूज करेंगे, और ये हमेशा टेबल के टैग के अंदर ही लिखना होगा। तो अब इसे उपयोग में लाने पर हमारा कोड कुछ ऐसा दिखेगा -

<TABLE>
<TR>
</TR>
</TABLE>

अब हमें इस Row के अंदर कुछ कॉलम चाहिये, इसके लिये HTML टैग <TD> को उपयोग में लाते हैं। जितने कॉलम आपको एक Row में चाहिये उतने ही <TD> टैग को आप इस्तेमाल में लायेंगे। ध्यान रहे एक टैग को क्लोज करने के बाद ही आप दूसरा इस्तेमाल में ला सकते हैं। मान लीजिये हमें अपनी टेबल की Row में दो कॉलम चाहिये। इसके लिये अब हमारा कोड कुछ ऐसे दिखेगा -

<TABLE>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>

इसे कोड को थोड़ा ठीक सा लगने के लिये, ऐसे लिखेंगे -

<TABLE>
   <TR>
     <TD></TD>
     <TD></TD>
   </TR>
</TABLE>

ये कहलाती है Indentation; अब, अगर हमें अपने टेबल के लिये दो Row चाहिये तो, हमारी टेबल का कोड कुछ ऐसे होगा -

<TABLE>
   <TR>
     <TD></TD>
     <TD></TD>
   </TR>
   <TR>
     <TD></TD>
     <TD></TD>
   </TR>
</TABLE>

अब टेबल का structure तैयार है, बस इसके कॉलम में हमें जो चाहिये है वो लिख सकते हैं। चलिये इसके कॉलम में लिखकर देखते हैं ये टेबल पोस्ट में कैसा दिखाई देगा।

<TABLE>
   <TR>
     <TD>देश</TD>
     <TD>राजधानी</TD>
   </TR>
   <TR>
     <TD>भारत</TD>
     <TD>नई दिल्ली</TD>
   </TR>
</TABLE>

ये पोस्ट में कुछ इस तरह से दिखाई देगा -

   

       
देश
       
राजधानी
   
   

       
भारत
       
नई दिल्ली
   

टेबल तो बन गयी लेकिन ये कुछ आकर्षक नही लग रही, तो इसे आकर्षक बनाने के लिये उपयोग में लायेंगे कुछ HTML प्रोपर्टीज (Properties), जिन्हें Attributes कहते हैं। आज हम यूज करके देखेंगे - Width, Border और Align नाम के Attributes को। Width के लिये आप वेल्यू या तो Percentage (% का उपयोग करके) देकर या pixel (px का उपयोग करके) देकर यूज करेंगे। Border की वेल्यू नंबर में होगी, जैसे 1, 2, 3 इत्यादि, अगर बोर्डर नही चाहिये तो 0 देंगे। Align की वेल्यू हैं - Left, Right या Center। चलिये इन्हें उपयोग में लाकर देखते हैं, कोड कुछ ऐसा बनेगा -

<TABLE width=”200px” border=1 >
   <TR>
     <TD width=”70px” align=”center”>देश</TD>
     <TD width=”130px” align=”center”>राजधानी</TD>
   </TR>
   <TR>
     <TD>भारत</TD>
     <TD>नई दिल्ली</TD>
   </TR>
</TABLE>

इस सब के बाद हमारी देबल कुछ ऐसी दिखायी देगी -

   

       
देश
       
राजधानी
   
   

       
भारत
       
नई दिल्ली
   

दूसरी Row के लिये हमने कॉलम की वेल्यू Align नही की हैं तो वो लेफ्ट में आ रही हैं। टेबल की दूसरी Row के कॉलम वही Width की वेल्यू लेते हैं जो पहले Row में डिफाइन होती है।

आज के लिये इतना ही, अगले आलेख में टेबल के बारे में कुछ और ज्यादा जानने की कोशिश करेंगे। तब तक आप खुद आजमा के देखिये, इतना पढ़कर क्या आप एक ऐसी टेबल बना सकते हैं जिसमें कम से कम 4 Row हों और 5 कॉलम।