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 कॉलम।

This entry was posted in HTML/CSS/Web sites, How to and tagged , , , . Bookmark the permalink.

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

  1. seema gupta says:

    ” wow again an important and useful tool” thanks for sharing

    Regards

  2. Suresh Chiplunkar says:

    बहुत उपयोगी जानकारी है, बहुत दिनों से सोच रहा था कि टेबल कैसे बनती है, ब्लॉगर के टेम्प्लेट में ही ऐसी सुविधा होना चाहिये, लेकिन अब इसे आजमा कर देखेंगे… हालांकि तकनीकी ज्ञान कम होने से शुरु में दिक्कत तो होगी, लेकिन कई बार लेख में टेबल देना जरूरी होता है तब यह काम आयेगा…

  3. himanshu says:

    ek achchhee jaankaaree. dhanyavaad.

  4. रोचक।
    मैने भी इस प्रकार तालिका बनाने के प्रयोग किये थे। अन्तत: जोहो और विण्डोज लाइवराइटर से ही बनाने लगे।
    हां यह मूल HTML जानना जरूरी है – जो आपने बताया।

  5. बहुत उपयोगी जानकारी …

  6. यस्स ! कोड पकड़ लिया श्रीमान, अब आगे का पाठ दिया जाय !

  7. Tarun says:

    @लवली, आपने HTML के बारे में बेसिक देकर अच्छे ढंग से समझाया है लेकिन यहाँ सिर्फ और सिर्फ टेबल के बारे में समझाने की कोशिश की जा रही है। ज्यादातर एडिटर में इसकी डायरेक्ट सुविधा नही होती।

  8. इस महत्वपूर्ण जानकारी के लिए धन्यवाद।

  9. ANYONAASTI says:

    मैं बहुत दिन से कालम बना कर कुछ लिखना चाहता था
    तरुण आप का धन्यवाद

    नव वर्ष मंगल मय हो
    नई दिल्ली

    तरुण आप का धन्यवाद