Computer से HTML Table में Border कैसे बनाते है ?

हेल्लो दोस्तों हमारी वेबसाइट में आपका स्वागत है | दोस्तों आज हम लोग Table मे Border कैसे शो करते है इसके बारे में जानेंगे | Freinds पिछले पोस्ट में मैंने बताया था की टेबल क्रिएट कैसे करते है (How To Make a Table in Html in hindi ) तो अगर अपने इसे नहीं पढ़ा होगा तो जरुर पढ़ लेना क्योकि table क्या है इसकी basic knowledge होना आवश्यक है तभी आप टेबल में बॉर्डर दिखा सकते है | तो चलिए बिना किसी देरी से Start करते है :

दोस्तों आपने पेन कॉपी में तो कभी टेबल बनाया ही होगा , पेन कॉपी ,MS Word, Power Point और बहुत से एसे तरीके और सॉफ्टवेर है जिसमे टेबल बनाना बहुत ही आसान है किन्तु HTML में टेबल बनाना और इसे stylish बनाना थोडा difficult है |

How To Set Border In Table (टेबल में बॉर्डर कैसे लगाते है )?

दोस्तों हम टेबल में बॉर्डर CSS की सहायता से set कर सकते है :

CSS (Cascading Style Sheet):

दोस्तों अपने तो सुना ही होगा की css क्या है ? CSS Web Document को stylish करने का भाषा है अर्थात जिस प्रकार लडकियों को क्रीम, makeup, कपडे इत्यादि सामान सुन्दरता को बढ़ाने के लिए करते है ठीक उसी प्रकार Web डॉक्यूमेंट (Website) को सजाने और बढ़िया सुन्दर दिखाने के लिए CSS लैंग्वेज का use किया जाता है | तो चलिए एक टेबल Html के द्वारा बनाते है और उसमे CSS बॉर्डर सेट करते है :

<table>
<tr>
<th>Student Name</th>
<th>Roll No.</th>
<td>Percent</td>
</tr>
<tr>
<td>Ramkrishna</td>
<td>xxxxxxxxxx</td>
<td>79.2%</td>
</tr>
</table>

यहाँ पर हमने सिंपल एक टेबल बनाकर बताया है जिसका आउटपुट इस प्रकार से दिखाई देगा :

With Out css

देखिये देखने में टेबल की तरह तो दिख रहा but अच्छी नहीं लग रहा है चलिए अब इसे स्टाइलिश मतलब अच्छा बनाते है css की सहायता से :

<style type="text/css">
table{
text-align: center;

}
th, td {
border: 1px solid black;
</style>

<table>
<tr>
<th>Student Name</th>
<th>Roll No.</th>
<th>Percent</th>
</tr>
<tr>
<td>Ramkrishna</td>
<td>xxxxxxxxxx</td>
<td>79.2%</td>
</tr>

</table>

जिसका आउटपुट कुछ इस प्रकार से दिखाई देगा :

यहाँ पर double बॉर्डर दिखाई दे रहा है ऐसा इसलिए दिखाई दे रहा है क्योकि यहाँ पर टेबल और <td> टेबल डाटा और <th> टेबल हैडर इन सभी की अलग - अलग सीमाए है | यहाँ एक ही बॉर्डर में सभी तत्व आ जाये इसके लिए Collapes Table Bordes का Use किया जाता है :

table{ border-collapse: collapse; }

table, th, td { border: 1px solid black; }

अब आपको कुछ इस प्रकार से रिजल्ट मिलेगा :

इस प्रकार से यदि आप table मे Background Color देना चाहते है तो आप निचे दिए गए कोड के माध्यम से दे सकते है :

background-color: #136d04;
color: white;

OUTPUT :

How to set background color in css table html

यहाँ पर मैंने पूरा टेबल में background कलर लिया हूँ अगर आप सिर्फ हैडिंग में background colorलेना चाहते है तो replace कीजिये इस कोड से <th>{background-color: #136d04; color:white;}

How To Add Padding & Margin in Table with CSS?

Padding & Margin Cell के मध्य दुरी बनता है जिससे हमारी tableऔर भी आकर्षित दिखाई देता है दोस्तो टेबल में सेल के कंटेंट की दुरी बनाये रखने के लिए कुछ इस प्रकार से आपको अपने टेबल कोड में ये कोड ऐड करना पड़ेगा :

margin: 16px; padding: 16px;

आप अपने टेबल के अनुशार पैडिंग और मार्जिन रख सकते है | इस प्रकार से हम html टेबल में border set कर सकते है |

Conclusion:

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