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

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

इसका एक सीधा सा हल है कि टेबल का बोर्डर सेट करो फिर उसके बोर्डर कलर वाले एट्रीब्यूट की वेल्यू में उस कलर का नाम दे दो जिस रंग का बोर्ड सेट करना है (bordercolor=red)। उदाहरण के लिये पहले नीचे का कोड देखिये पिर उससे बनी टेबल -

<TABLE width=”200px” border=1 bordercolor=red >
    <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>

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

   

       
तालिका नंबर १
   
   

       
देश
       
राजधानी
   
   

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

लेकिन इस तरह से करने से टेबल अच्छी नही लगती, एक तो row और column दोनों में बोर्डर आ जाता है और दूसरा ये बोर्डर डबल लाईन की तरह दिखता है यानि कि White space के साथ। इसको ठीक करने के लिये दूसरा ब्लोग पोस्ट में तालिका कैसे बनायें -
भाग १, भाग २ तरीका है कि हम टेबल के अंदर टेबल बनायें। सबसे पहले तो अपनी मुख्य टेबल बना लें, उदाहरण के लिये ऊपर वाली टेबल को अपनी मुख्य टेबल मान लेते हैं। उसके बाद एक नयी टेबल बनाते हैं और इसके एकमात्र कॉलम में अपनी मुख्य टेबल का कोड डाल देंगे। नयी टेबल का कोड कुछ ऐसा होगा -

<TABLE width=”200px” border=0 bgcolor=red cellspacing=1 cellpadding=1>
    <TR>
      <TD width=”100%” align=”center”>
      </TD>
    </TR>
</TABLE>

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

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

अब इसके टैग के अंदर अपनी मुख्य टेबल का कोड कॉपी करके डाल देते हैं। उसमें दो बदलाव करेंगे - पहला इसका भी बोर्डर 0 सेट करेंगे और दूसरा बोर्डर कलर के बजाय बैकग्राउंड कलर का उपयोग करेंगे और इसको वेल्यू देंगे White। कोड कुछ ऐसे दिखेगा -

<TABLE width=”200px” border=0 bgcolor=red cellspacing=1 cellpadding=1>
    <TR>
      <TD width=”100%” align=”center”>
<TABLE width=”200px” border=0 bgcolor=white >
    <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>
      </TD>
    </TR>
</TABLE>

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

   

       


   

       
तालिका नंबर १
   
   

       
देश
       
राजधानी
   
   

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

       
   

देखिये, अब वो ही टेबल कितनी अलग सी लगती है, इसमें आप चाहें तो पहली Row का बैकग्राउंड कलर अलग सा भी सेट कर सकते हैं। तालिका नंबर १ वाले कॉलम के TR टैग में bgcolor=yellow करके देखियेगा क्या फर्क दिखता है। आशा है इस लेखमाला से आप भी अपनी वेबसाईट में या ब्लोग पोस्ट में टेबल बना पायेंगे।

[नोटः ये फायरफोक्स में शायद ठीक ना दिखे, उसका कोड वक्त मिलते ही अपडेट करता हूँ।]