Blog Post में Table तालिका कैसे बनाये - डिब्बे दार Table बनाये

Blog Post मैं डिब्बे दार तालिका कैसे बनाएं? डिजाइन दार table बनाना सीखें।

क्या आप अपने पोस्ट आर्टिकल के अंदर डिजाइन दार सुंदर तालिकाओं का उपयोग करना चाहते हैं। ताकि आप जो भी अपने उपयोगकर्ताओं को समझाएं, वह उसे ठीक से समझ सके। और आप भी इन तालिकाओं के माध्यम से ठीक से समझा सकें। तो आज इस पोस्ट में आप डिब्बे दार तालिकाओं के बारे में जानेंगे। तो इस पोस्ट को लास्ट तक पढ़े, और पढ़ने का आनंद लें।

ऐसी डिब्बे दार तालिकाओं की अक्सर सभी ब्लॉगरों और वेबसाइटों को जरूरत होती है। इससे हम जो पोस्ट लिखते हैं, उसकी क्वालिटी भी बनी रहती है। और जो हम अपने आने वाले विजिटर को समझाना चाहते हैं, वह भी हम डिब्बे दार तालिका के अंदर अलग-अलग भाजक के तौर पर समझा सकते हैं। और विजिटर अच्छे से समझ भी जाते हैं।

तो दोस्तों चलिए सीधे मुद्दे पर आते हैं, और पोस्ट के अंदर तालिका कैसे बनाते हैं। इस बारे में जानना शुरू करते हैं।

तो अपने पोस्ट के अंदर डिब्बे दार तालिका बनाने के लिए अपने पोस्ट संपादक मेनू में ऊपर की ओर  HTML  विकल्प पर क्लिक करें, और पोस्ट का html ओपन करें।

अब आप जहां तालिका रखना चाहते हैं, वहां पर यहां नीचे दिए गए कोड को कॉपी और पेस्ट करें।

<table>
<tbody>
<tr>
<td></td>
</tr></tbody></table>

जरा रुकिए अभी आप की तालिका तैयार नहीं हुई है, यह वह कोड है। जिसको हम स्टाइल करके अपने पोस्ट के अंदर तालिका तैयार करेंगे। अब थोड़ा सा और ध्यान देने की जरूरत है, और आसान स्टाइल कोड जोड़ने की जरूरत है।

तो तालिका का आरंभ करने के लिए हम <table> के अंदर कुछ कोड का प्रयोग करेंगे।

उदाहरण:

<table border="1" cellpadding="1" cellspacing="1">

इन कोड का table के अंदर उपयोग करने के बाद ही एक सामान्य सरल तालिका उत्पन्न होती हैं, जिसे आप नीचे देख सकते हैं।

पोस्ट लास्ट तक पढ़े	पसंद आए तो इसे शेयर करें
इस ब्लॉग की सदस्यता लें	नई पोस्ट के अपडेट पाए

अब इसके अंदर जो कमियां है। जैसेः Background Color, Border Color, Text Color, और border से टेक्स्ट को थोड़ा दूर करना। इन कमियों को हम <table> के अंदर style="" का उपयोग करके पूरा करेंगे।

तो चलिए अब हम <table> के अंदर <table style=""> स्टाइलटैग जोड़कर स्टाइल CSS कोड का उपयोग करते हैं।

उदाहरणः

<table border="1" cellpadding="1" cellspacing="1" style="background-color: #eeeeee; border-color: pink; font-size: 18px; text-align: left; width: auto;">

जैसा कि आप ऊपर इस कोड में देख सकते हैं, मैंने style="डबल कोट के अंदर " कोड जोड़े हैं।

यह कोड आपकी तालिका का बैकग्राउंड कलर बदल देगा, और उसका जो बॉर्डर है, वह पिंक कलर में होगा। और इसका width ऑटोमेटिक बदलेगा, यानी कि जो आपकी साइट का width है, उसी width में तालिका बदल कर पिक्स हो जाएगी।


यदि आप तालिका का width पिक्स रखना चाहते हैं तो कोड width: auto; मैं auto की जगह 400px जोड़ें। और फिर इसका width ओर कम या अधिक करने के लिए अंक 400 की जगह  कम या अधिक अंक डालें और पूर्वालोकन करें।

अब हम Border से Text को दूर रखने के लिए padding का उपयोग करेंगे, और इसके लिए हम <td> सेक्शन के अंदर <td style=""> स्टाइल्टैग का उपयोग करेंगे। और इसके अंदर हम बॉर्डर से टेक्स्ट को दूर करने के लिए padding लगाएंगे।

उदाहरणः <td style="padding: 5px;">

यह कोड तालिका बॉर्डर से टेक्स्ट की दूरी 5 पिक्सल तक बनाए रखेगा, इसका एक अच्छा उदाहरण नीचे इस तालिका में देखें।

" Mobile Phone से घर बैठे पैसे कैसे कमाए, आसान तरीके "	" Tik Tok से पैसे कैसे कमाए, ऐसे कमाएंगे लाखों रुपए "
" YouTube पर Video डालकर पैसे कैसे कमाए "	" Blogging से घर बैठे पैसे कैसे कमाए, लाखों कमाने का सुझाव "

अब बात आती है, इनके अंदर टेक्स्ट लिखने की, कि हम इन कोड के अंदर टेक्स्ट कहां लिखते हैं।

Text लिखने के लिए कोड पर नजर डालें, वहां आपको <td> और </td> यह दो सेक्शन दिखाई देंगे, इनके बीच में आपको अपना टेक्स्ट लिखना है।

उदाहरण: <td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>

अब यदि आप एक समान सतह पर 4 डिब्बे रखना चाहते हैं, तो आपको चार अलग-अलग <td> और </td> क्लोज सेक्शन बनाने होंगे। और उन्हें <tr> और </tr> क्लोज के अंदर बंद करना होगा।

उदाहरणः

<tr>
<td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
<td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
<td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
<td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
</tr>

अब यह कोड आपकी पोस्ट के अंदर समान सतह पर चार डिब्बों की लाइन लगाएंगे, जिसका उदाहरण नीचे देखें।

Sikhoinall

sikhoinall

sikhoinall

sikhoinall

अब यदि आप इन चार डिब्बों के नीचे चार डिब्बे ओर जोड़ना चाहते हैं। तो आप ऊपर दिए गए उदाहरण कोड को कॉपी करके वापस उनके ठीक नीचे एक लाइन स्पेस देकर इन कोड को जोड़ देंगे। और उनमें जो टेक्सट आप लिखना चाहते हैं, वह लिखेंगे। जैसे

उदाहरणः

<tr>
  <td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
   <td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
    <td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
     <td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
      </tr>
      <tr>
     <td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
    <td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
   <td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
  <td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
</tr>

जैसे ऊपर चार डिब्बे मैंने आपको उदाहरण में बनाकर दिखाएं हैं। वैसे ही चार डिब्बे उन डिब्बों के नीचे और बन जाएंगे, जिसका उदाहरण आप नीचे देखें।

Sikhoinall	sikhoinall	sikhoinall	sikhoinall
Subscribe	Subscribe	Subscribe	Subscribe

तो देखा आपने कैसे 4 डिब्बे से मेंने 8 डिब्बे बना दिए हैं। और ऐसे ही आप भी बना सकते हैं और सिर्फ चार डिब्बे ही नहीं, जितने डिब्बे आप चाहे बना सकते हैं। या इनसे कम डिब्बे भी बना सकते हैं।

Text को मोटा Bold और Color करें।

तो दोस्तों टेक्स्ट का कलर चेंज करने के लिए और उसे मोटा बोल्ड करने के लिए हमें पोस्ट संपादक मेनू में यह विकल्प Already मिलते हैं।

Text को मोटा बोल्ड करने के लिए उस टेक्स्ट को सेलेक्ट करें, जिस Text को आप मोटा बोल्ड करना चाहते हैं। और फिर ऊपर मेनू बार में B बटन पर क्लिक क्लिक करें, और आपका टेक्स्ट मोटा बोल्ड हो जाएगा।

और टेक्स्ट का कलर चेंज करने के लिए आप उस टेक्स्ट को सेलेक्ट करें, जिस टेक्स्ट का कलर आप चेंज करना चाहते हैं। और फिर पोस्ट संपादक मेनू बार में A बटन पर क्लिक करके अपने मनपसंद कलर पर टैप करें। और फिर सेलेक्ट किए गए टेक्स्ट को छोड़ दें, अब आप देखेंगे, कि आपका टेक्स्ट कलर बदल चुका है।

तो दोस्तों अब मैं आपको ऊपर बताए गए, आठ डिब्बों वाली तालिका का संपूर्ण कोड देता हूं। जिसे आप डायरेक्ट अपने पोस्ट  HTML  में कॉपी और पेस्ट कर सकते हैं।

कोड:

<table border="1" cellpadding="1" cellspacing="1" style="background-color: #eeeeee; border-color: pink; font-size: 18px; text-align: left; width: auto;">
<tbody>
<tr>
<td style="padding: 5px;">आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
<td style="padding: 5px;">आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
<td style="padding: 5px;">आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
<td style="padding: 5px;">आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
</tr>
<tr>
<td style="padding: 5px;">आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
<td style="padding: 5px;">आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
<td style="padding: 5px;">आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
<td style="padding: 5px;">आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>
</tr>
</tbody></table>

अब यदि आप इन डिब्बों को कम करना चाहते हैं, तो आप इनमें से निम्न कोड को हटा देंगे।

<td>आपका टेक्स्ट इन दोनों सेक्शन के बीच में होना चाहिए</td>

ऐसे आप अपने अनुसार डिब्बे कम या अधिक भी कर सकते हैं। और इसके साथ-साथ बैकग्राउंड कलर, पेडींग, फोंट साइज और भी बहुत कुछ आप अपने अनुसार बदल सकते हैं।

तो दोस्तों हमें उम्मीद है, कि आपको हमारी यह पोस्ट पसंद आई होगी। और अगर पोस्ट पसंद आई है। तो इसे अपने दोस्तों में शेयर करें ताकि आपके दोस्तों को भी इस पोस्ट के बारे में पता चल सके। और हमें कमेंट करें, कि आपको हमारी यह पोस्ट कैसी लगी।

 यदि आपका कोई प्रश्न है, तो नीचे Comment बॉक्स में हमें बताएं।