Html table क्या है और html का उपयोग करके table का निर्माण कैसे किया जाता है | HTML Table in Hindi

आपने school या college के समय कभी ना कभी table तो बनाया ही होगा या calendar तो देखा ही होगा जो पूरा table की तरह दिखता है. आज हम सीखेंगे Html table क्या है और कैसे बनाते है table के ऊपर हमें heading दिखती है जो मोटे काले अक्षरों में होती है जिसे html में thead कहते है.

तथा उसके नीचे detail होती है जिसे tbody कहते है. इसी तरह हम website में भी table बनाते है इसके लिए html, CSS का इस्तेमाल करते है.

table का हिंदी में meaning – row तथा column से मिलकर बनी हुई आकृति या सारणी है यानि की पट्टियों से मिलकर बना हुई एक सूची है.

Table और Table tag in Html | html me table क्या है हिंदी में

html में <table> का इस्तेमाल किसी website में table का निर्माण करने के लिए करते है जिसके अंदर हम कितने भी tr, th, td रखे उसके हिसाब से table का size बड़ता है.

table में हम tag को open कर उसे close भी करते है जिसे html क्या है में tag के बारे में बताया गया है. table के साथ class=”table” देना बहुत जरुरी है.

<table class="table">
  <tr>
    <td>...</td>
  </tr>
</table>

html table में tr क्या है और html में tr tag का इस्तेमाल

जब table का निर्माण करते है तो इसके लिए <table> के साथ <tr> tag का इस्तेमाल करना जरुरी है जिसका मतलब table row है.

जैसे calendar के सबसे ऊपर month का नाम लिखा होता है वह एक row है. उसके नीचे दिन का नाम sun, mon लिखा होता है वह दूसरी row है इस प्रकार हर बार नयी line में जाने के लिए row का इस्तेमाल करना पड़ेगा.

th क्या है th tag in html और इस्तेमाल कैसे करे

th का मतलब table heading है आपने table में देखा होगा table की heading सबसे ऊपर मोटे काले अक्षरों में होता है जैसे sun, mon ये सब हम thead के अंदर लिखते है.

html td tag और html में td tag का इस्तेमाल

td का मतलब table data है table के अंदर जो भी data होता है उस data को दिखाने के लिए <td> का इस्तेमाल किया जाता है जैसे महीने की तारीख 1, 2, 3 यह सब <td> के अंदर लिखा जाता है पहली line में हम जितने <th> रखते है उसी के हिसाब से उसके नीचे उतने <td> को रखते है.

html में table tag का इस्तेमाल कर calendar बनाए

html में table से calendar का निर्माण कर सकते है-

• हमेशा Table के साथ class=”table” का इस्तेमाल करे जिससे table सही दिखे.
• calendar की heading के लिए हमेशा thead tag का इस्तेमाल करे.
• th और td tag को हमेशा tr tag के अंदर रखे.
• जितने th का इस्तेमाल करते है उतने ही td का इस्तेमाल करे नहीं तो डिज़ाइन सही नहीं आएगा.
• 2 th या td को एक करने के लिए या खाली जगह रखने के लिए &nbsp; का इस्तेमाल करे.

अगर पूरी table एक साथ दिखानी है तो उसके लिए <table> के साथ <tr>, <th> तथा <td> का इस्तेमाल करना अनिवार्य है.

एक calendar बनाने पर इस प्रकार का डिज़ाइन दिखेगा –

thead और tbody tag क्या है

<thead> tag का उपयोग table के अंदर head वाले section को रखने के लिए किया जाता है जिसका मतलब table header होता है. इसी तरह <tbody> tag का इस्तेमाल body वाले section को रखने के लिए किया जाता है जिसका मतलब table body है.

Html table design और Bootstrap में table design

table design करने के लिए CSS का इस्तेमाल करते है जैसे – color, font, margin, padding आदि चीज़ो का इस्तेमाल कर एक table बना सकते है. और bootstrap की class add करनी होती है जो table को responsive और आकर्षित बनाती है bootstrap क्या है आप यहाँ पर जाकर सींखे.

Html table color

हम पूरे table, tr, th या td का color और background-color बदल सकते है. अगर पूरे table का color grey रखना है तो CSS में background-color grey देंगे. इसके अलावा हम font-size, text color, margin, padding, line-height का इस्तेमाल कर table को अच्छे से design कर सकते है.

Html table align और table align center

हमारे पास table को align करने के 2 तरीके है एक html से दूसरा CSS, जब table बनाते है तो हमेशा th और td के अंदर का data जैसे – sun, mon और 1, 2 यह हमेशा left side से शुरू होता है. data को center या right में ले जाने के लिए text-center और text-right का इस्तेमाल करते है.

Html table column width

बहुत सारे column होने से हम table में एक column की width कम ज्यादा रख सकते है. लेकिन इसके लिए th में पहले column की width 20% रखते है तो ऊपर से नीचे की तरफ जितने भी td है पहले column की width 20% ही रखनी पड़ेगी.

नहीं तो table सही नहीं आएगा किसी भी तरह से हमे सारे column की width लिखकर table को 100% पूरा करना होता है.

Table की styling कैसे करे html में

Table के head जहा month का नाम दिया है उसमे कलर करना है तो उसके लिए css में td में backgorund-color का इस्तेमाल करेंगे.

इसी तरह किसी भी th या td में class लगाकर उसी column के लिए color, font-size, font-family, padding आदि चीज़े दे सकते है.

Html में border collapse और table border क्या है

border के लिए th और td class में border देना पड़ता है जिसके बाद हमें हर column box की तरह दिखता है. border-collapse: seprate; रखने पर table column के बीच में gap आ जाता है border-collapse: border; रखने पर सारे cell एक साथ चिपक जाते है.

मुझे यकीन है आपको पूरी तरह से समझ में आया होगा कि html table क्या है, html में table कैसे बनाते है tr, th, td, thead और tbody का इस्तेमाल, border और table design कैसे करते है. html CSS तथा bootstrap से संबंधित किसी भी प्रकार कि जानकारी के नीचे अपने सवालों को पूछ सकते है.