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

पिछले लेख में हमने HTML टेबल के बारे में थोड़ा बेसिक जानकारी प्राप्त की थी। आज उसी टेबल के कुछ और Attributes की बात करके इस लेखमाला को आगे बढ़ाते हैं। आज जिन Attributes के बारे में बात करेंगे उनको जानने के लिये पहले मैं सवाल करता हूँ, फिर उस सवाल का जवाब देते हुए इन Attributes को समझने की कोशिश करेंगे।

सवालः मैं चाहता हूँ कि मेरे टेबल की पहली वाली Row में सिर्फ एक ही कॉलम हो जिसमें मैं टेबल या तालिका का टाईटिल दे सकूँ और बाकि Rows में अलग अलग कॉलम वैसे ही नजर आयें।

हलः ये बहुत आसान है और इसे करने के लिये इस्तेमाल में लाते हैं टेबल के कॉलम वाले टैग यानि <TD> के एक Attribute को जिसे कहते हैं Colspan। इसका उपयोग करके हम टेबल के किसी भी Row के कॉलमस को आपस में Merge कर सकते हैं। जितने कॉलम को आप Merge करना चाहते हैं उतनी ही इसकी वेल्यू होगी। उदाहरण के लिये आपके टेबल में अगर कुल 3 कॉलम हैं और आप एक Row में पहले 2 को आपस में मिलाना चाहते हैं। तो आप उस Row के अंदर 3 के बजाय सिर्फ 2 बार ही <TD> टैग का उपयोग करेंगे। पहले वाले TD में colspan=2 देंगे और दूसरे वाले TD को वैसे ही यूज करेंगे।

इसे उपयोग में लाने के बाद हमारी टेबल का कोड कुछ ऐसे दिखायी देगा -

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

ऊपर दिये गये कोड से बनी टेबल कुछ ऐसी दिखायी देगी -

तालिका नंबर १
देश राजधानी
भारत नई दिल्ली

इसमें हमने २ कॉलम को मिलाने थे इसलिये Colspan की वेल्यू दी २, दूसरी बात आपने नोट की होगी कि पहली Row के लिये जिसमें हमने Colspan उपयोग में लाया, उसके कॉलम की Width के लिये कहा 100%। यानि कि जितनी भी टेबल की Width है उतना ही कॉलम की Width भी चाहिये।

सवालः बहुत अच्छे, लेकिन मुझे टाईटिल पहली Row में नही चाहिये बल्कि मैं चाहता हूँ कि मेरे टेबल का पहला कॉलम मैं टाईटिल के लिये यूज करूँ यानि कि मुझे टेबल के पहले कॉलम में सिर्फ एक ही Row चाहिये और बाकि कॉलम वैसे ही रहें जैसे अभी तक दिये हैं।

हलः ये भी आसान है और इसके लिये उपयोग में लाते हैं TD टैग का Rowspan नाम का Attribute। ये भी वैसे ही काम करता है फर्क ये है कि कॉलम के बजाय Rows को आपस में Merge करता है। इसकी वेल्यू देने के लिये भी वही लॉजिक है यानि अगर २ Rows को Merge करना है तो वेल्यू होगी २। अपने टेबल के कोड में इसे यूज करने पर कोड कुछ ऐसे दिखायी देगा -

<TABLE width=”200px” border=1 >
    <TR>
      <TD rowspan=2 width=”100px” align=”center”>देशों के नाम</TD>
      <TD width=”100px” align=”center”>अमेरिका</TD>
    </TR>
    <TR>
      <TD align=”center”>नई दिल्ली</TD>
    </TR>
</TABLE>

ऊपर दिये गये कोड से बनी टेबल कुछ ऐसी दिखायी देगी -

देशों के नाम अमेरिका
नई दिल्ली

इस कोड में कॉलम की Width के लिये 100px के बजाय आप 50% भी यूज कर सकते हैं। आपने नोट किया होगा कि पहली Row के पहले कॉलम में हमने Rowspan यूज किया और इसकी वेल्यू दी २, जिसका मतलब है कि हम इस पहले कॉलम को पहली और दूसरी Row के लिये Merge कर रहे हैं। इसलिये दूसरी Row में एक ही TD (कॉलम) का इस्तेमाल किया जो कि दरअसल दूसरी Row के दूसरे कॉलम के लिये उपयोग हुआ है।

इसी तरह से अगर ३ Rows को Merge करना चाहेंगे तो वेल्यू होगी ३ और दूसरी एवं तीसरी Row के लिये एक ही बार TD टैग का इस्तेमाल करेंगे।

सवालः अरे वाह, ये तो मजेदार है लेकिन मैं चाहता हूँ कि टाईटिल वाली Row या कॉलम का बैकग्राउंड थोड़ा अलग सा रखूँ, जिसे ये थोड़ा अलग सा लगे।

हलः ये भी हो जायेगा, इसके लिये उस कॉलम यानि TD टैग में bgcolor नाम के Attribute का उपयोग करें और जिस कलर का बैकग्राउंड चाहिये उस रंग की वेल्यू दे दें। कलर वेल्यू यहाँ से पिक कर सकते हैं।

पहले सवाल के हल में दी गयी टेबल के कोड में bgcolor का इस्तेमाल करेंगे तो ये कोड कुछ ऐसा हो जायेगा -

<TABLE width=”200px” border=1 >
    <TR>
      <TD colspan=2 bgcolor=”#F5A9F2″ width=”100%” align=”center”>तालिका नंबर १</TD>
    </TR>
    <TR>
      <TD width=”70px” align=”center”>देश</TD>
      <TD width=”130px” align=”center”>राजधानी</TD>
    </TR>
    <TR>
      <TD align=”center”>भारत</TD>
      <TD align=”center”>नई दिल्ली</TD>
    </TR>
</TABLE>

ऊपर दिये गये कोड से बनी टेबल कुछ ऐसी दिखायी देगी -

तालिका नंबर १
देश राजधानी
भारत नई दिल्ली

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

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

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

  1. seema gupta says:

    ” very interetsing and useful, great work keep it up..”

    Regards

  2. एक सेल को बीजीकलर एट्रीब्यूट देने वाली जानकारी अच्छी लगी!

  3. नमस्‍कार।
    आपको जानकर प्रसन्‍नता होगी कि विज्ञान और प्रौद्यौगिकी के प्रचार प्रसार एवं इससे जुडे ब्‍लॉगर्स के अधिकारों के संरक्षण के लिए ‘साइंस ब्‍लॉगर्स एसोसिएशन ऑफ इंडिया’ का गठन किया गया है।
    यह संस्था विज्ञान और प्रौद्योगिकी के प्रचार-प्रसार को बढावा देने वाले लोगों के हितों के संरक्षण का कार्य करेगी। इसके अतिरिक्त विज्ञान संचार के लिए आम जन को प्रेरित करने, इंटरनेट पर हिन्दी ब्लॉग लेखन को बढावा देने, ब्लॉग निर्माण सम्बंधी तकनीकी जानकारियां आम जन तक पहुंचाने, ब्लॉगर्स की तकनीकी / व्यवहारिक समस्याओं को सुलझाने का भी कार्य करेगी।
    आपके इस दिशा में किये गये महती कार्यों को दृष्टिगत रखते हुए संस्‍था आपको ‘साइंस ब्‍लॉगर्स एसोसिएशन ऑफ इंडिया’ की मानद सदस्‍यता प्रदान करती है। यदि आप इससे जुडने हेतु सहमति प्रदान करें, तो हमें अति प्रसन्‍नता होगी और आपकी मानद सदस्‍यता को पूर्णकालिक सदस्‍यता में परिवर्तित कर दिया जाएगा।
    आपका प्रोत्‍साहन हमारे विश्‍वास को नया बल प्रदान करेगा।
    सादर,
    जाकिर अली ‘रजनीश’
    सचिव
    साइंस ब्‍लॉगर्स एसोसिएशन ऑफ इंडिया