Connect with us

tech help

▷How To Create Table In Html In हिंदी-15 steps full info

How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

हेलो दोस्तों हम एक बार फिर से आपका स्वागत करते है। जैसा की हम दे की हमने html की एक सूचि तैयार की है। जिसमे हमने html के पाठ को बहुत ही आसान तरिके से हिंदी में समझने का प्रयाश कर रहे है। हमें इस पोस्ट से पहले एक पोस्ट साँझा की है। जिसमे हमने html को बहुत ही आसान भाषा में समझाया है। अगर आप html के बारे में सारी बेसिक जानकारी एक ही स्थान से प्राप्त करना चाहते है। तो आप उस पोस्ट पढ़ सकते है। आपको उस पोस्ट का लिंक इस पोस्ट के निचे मिल जायेगा। और आज हम बताएंगे। how to create table in html in hindi आपको वो सारी जानकारी आपको मिल जाएगी।

जिसे प्राप्त करने के बाद आप बहुत ही आसानी से कोई भी html टेबल का निर्माण कर पाएंगे। हम आपको बहुत ही बारीकी से समझायेंगे। हमें पूरी उम्मीद है। की आप इस जानकारी को प्राप्त करने बाद बहुत ही आसानी से कोई भी टेबल का निर्माण कर पाएंगे। चलिए हम जानते है। की आखिर टेबल कैसे बनता है। और टेबल बनाने के लिए किन टैग का उपयोग किया जाता है।

Introduction -how to create table in html in hindi

1. Introduction for table
2. Table Tags in hindi html
3. Start with basic table
4. Column representation
5. Collapsed Border Table in Html
6. text align Property in Html Table
7. Generate table space
8. Table Under Cell Span Columns
9. Cell Span Rows
10. Caption Tag Table in Hindi
11. Draw for multi-column headings table in hindi
12. Create a chart table
13. Create top and left side heading tables
14. head color chang table in hindi
15. Complete Table Body Color Change
16. Table align

1. Introduction for table

HTML में Table को <table> टैग द्वारा define किया जाता है। यानिकि हम इस टैग करके ब्रौज़र को है। की ये एक टेबल है। और इसके भीतर लिखा गया सारा कोड एक की टेबल का है। जिसे पढ़ने के बाद ब्रौज़र हमें उस कोड की जगह एक टेबल दिखता है। लैपटॉप मोबाईल स्क्रीन में यानिकि जो भी उपकरण हम इस्तमाल करते है।

किसी भी प्रकार का टेबल बनाने के लिए हमें <table> tag का उपयोग करना होता है। यह टैग ही टेबल को प्रदर्शित करता है। जिस प्रकार हम किसी व्यक्ति को नाम से पहचानते है। उसी प्रकार <table> टैग से टेबल की पहचान की जाती है।

Table को <table> टैग की शुरुआत इस प्रकार होती है। और एन्ड करने के लिए आप / का उपयोग करना होता है। जैसे – </table>
इस स्लेश के साथ टैग को लिखने से ब्रौज़र समझजाता है। की यह टेबल केवल इसी टैग तक था।

इसी प्रकार टेबल को बनाने में टेबल हेड की पहचान हम <th> टैग का उपयोग है। हेड में हम उस टैक्स को लिखते है। जिसके बारे में हम टेबल बनाकर जानकारी लिखते है। एक बार हम केवल बेसिक जानकरी प्रदान कर रहे है। आगे चल कर हम टेबल निर्माण करेंगे तो आप बारीकी से समझ पाएंगे।

इसी प्रकार टेबल में किस लाइन का निर्माण करने के लिए <tr> टैग का उपयोग किया जाता है। और लाइन में कोई भी डाटा भी डाटा लिखने के लिए <td > टैग का उपयोग किया जाता है।

2. Table Tags in hindi html

सबसे पहले हम कुछ टैग के बारे में जान लेते है। जो की एक टेबल का निर्माण करने के लिए आवश्क होते है। और इस टैग को समझने के बाद आपके लिए टेबल को समझना भी आसान हो जायेगा। और आप केवल एक बार पढ़ने से ही किसी भी टेबल का निर्माण कर पाएंगे।

<Table> tag इस टैग का उपयोग सबसे पहले किया जाता है। जब भी हम कोई टेबल का निर्माण करते है। तो ब्रौज़र को ये बताता है। की यह यहाँ से टेबल का कोड स्टार्ट हो चूका है।
<Th> tag इस टैग से ब्रौज़र को बताया जाता है। की यह हमारे टेबल का मुख्य हेड है।
<Tr> tag इस टैग की मदद से टेबल की लाइनों को डिफाइन किया जाता है।
<Td> tag इस टैग की मदद हम टेबल की सेल को डिफाइन करते है। जहाँ हम कोई भी टेक्स्ट लिखते है।
<caption> tag इस टैग की मदद हम टेबल के केप्सन को डिफाइन करते है। यानिकि हम किसी भी टेबल को कोई नाम से पहचान दे सकते है।
<Colgroup> tag यह formatting के लिए उपयोग किया जाता है। किसी table में एक या अधिक columns के समूह को Specifies करता है।
<Col> tag इस टैग का प्रयोग प्रत्येक column के लिए column properties को specify करने के लिए <colgroup> element के साथ किया जाता है।
<Tbody> tag table में समूहित करने के लिए इस का उपयोग किया जाता है।
<Thead> tag इसका टैग का उपयोग header content को table में समूहित करने के लिए किया जाता है।
<Tfooter> tag table में footer content को डिफाइन करने के लिए उपयोग किया जाता है।

3. Start with basic table

चलिए हम एक बेसिक टेबल से शुरुआत करते है। एक बेसिक टेबल बनाने के लिए हमे कुछ इस प्रकार एक कोड को लिखना होता है।

try this code

<!DOCTYPE html>
<html><head>
<title> Basic Table info </title>
</head>
<body>
<table style= "width:100%">
<tr>
<th>Name</th>
<th>Height</th>
<th>Weight</th>
</tr>
<tr>
<td>poonam</td>
<td> 5.8 inch</td>
<td>45 kg </td>
</tr>
<tr>
<td> poona </td>
<td>5.8 inch</td>
<td>45 kg</td>
</tr>
<tr>
<td>poni</td>
<td>5.8 inch</td>
<td>45 kg</td>
</tr>
</table>
</body>
</html>

आप यह देख सकते है। की हमने जो कोड लिखा है। उस कोड का आउटपुट स्क्रीन में कुछ इस प्रकार दिखाई देता है।

How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

 

जैसा की आप कोड में देख सकते है। की हमने ब्रौज़र को बताने के लिए <table > टैग का उपयोग किया है। और उसके बाद हमने इस टेबल की हैडिंग को दर्शाने के लिए <th> का उपयोग किया है। जिसमे हमने हैडिंग में नाम, हाइट और वेट को दर्शाया है।

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

लेकिन आप देख सकते है। की हमारा टेबल तो दिखाई दे रहा है ,लेकिन उसमे किसी प्रकार का कोई कोलम दिखाई नहीं दे रहा। जिसके कारण हमारा टेबल अधिक प्रभावी दिखाई नहीं दे रहा है। तो चलिए अब हम कॉलम का निर्माण करते है।

 

4. Column representation

कॉलम को दर्शाने के लिए हमे कोड को कुछ इस प्रकार से css के साथ जोड़ना होगा। यानिकि टेबल को css कैस्केडिंग स्टाइल शीट देना होगा। जिसके बाद हमारा टेबल कॉलम के साथ दिखाई देने लगेगा।

try this code

<!DOCTYPE html>
<html>
<head><style>
table, td, th {
border: 1px solid red;</style></head>
<body></body>
</html>

जैसा की आप देख सकते है। की हमने जैसे ही css को जोड़ा तो हमारा टेबल कुछ इस प्रकार दिखाई देना लगा है। हमने इसमें बॉर्डर के साथ रेड कलर को जोड़ा है। तो हमारा टेबल लाल रंग में दिखाई देने लगा है।

How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

 

आप कोई भी कलर को जोड़ सकते है। जो भी कलर आप जोड़ते है। आपका टेबल उसी कलर में दिखाई देने लगेगा.

5. Collapsed Border Table in Html

जैसा की आप ऊपर वाले टेबल देख सकते है। की हमने टेबल को बॉर्डर दिया है। css की मदद से लेकिन उसमे आपको बॉर्डर की लाइन दो दिखाई दे रही है।

अगर आप चाहते है। हमारे टेबल की ब्रॉर्डर लाइन दो की जगह केवल एक ही दिखाई दे। तो आपको css में border-collapse: collapse; and th, td { padding: 10px; } कोड को भी जोड़ना होगा। और आपको css कोड कुछ इस प्रकार लिखना होगा।

<head>   <style> table, th, td{ border:1px solid black; border-collapse: collapse; } th, td { padding: 10px; } </style> </head>

जैसे ही आप इस प्रकार कॉड को लिखते है। तो हमारा टेबल कुछ इस प्रकार दिखाई देने लगता है। अब आप देख सकते है। की हमारे टेबल में डबल बॉर्डर की जगह सिंगल बॉर्डर दिखाई देने लगेगी।

How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

6. text align Property in Html Table

जैसा की आप देख सकते है। की हमारे टेबल में हैडिंग में जो टेक्स्ट लिखे है। वह सेन्टर में लिखे हुए है। अगर आप चाहते है। की वो टेक्स्ट सेण्टर की बजाय लेफ्ट या राइट साइड की और दिखाई दे तो आपको CSS कोड में इस प्रकार से कोड को लिखना होगा।

try this code

<style>
table, th, td{
border:1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}th {
text-align: right; (लेफ्ट या राइट लिखे )
}</style>

इस में आप यह देख रहे है। की यह राइट लिखा है। यहाँ आप लेफ्ट लिखेंगे। तो हैडिंग टैग लेफ्ट की और खिसक जायेंगे। हमने  राइट लिखा तो हैडिंग टेक्स्ट राइट की और चले गए है।

How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

7. Generate table space

जैसा की आप देख सकते है। की हमारे टेबल में जितने भी कॉलम है। वो सभी एक दूसरे के साथ चिपके हुए दिखाई दे रहे है। अगर आप चाहते है। की टेबल के कॉलम एक दूसरे के साथ चिपके हुए दिखाई ना दे। बल्कि जब भी हमरा टेबल कीसी webpage में दिखाई दे तो सभी कलम एक दूसरे से अलग अलग दिखाई दे। तो आपको css कोड को कुछ इस प्रकार लिखना होगा।`

<style>
    table, th, td{
    border:1px solid black;
    padding: 5px;
    }
    table{
    border-spacing: 5px;
    }
    </style>

अब आप देख सकते है। की जैसे ही हमने css कॉड जोड़ा तो हमारे टेबल के सभी कॉलम अलग अलग दिखाई देने लगे है।
How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

8. Table Under Cell Span Columns

अगर मान लीजिये की आप किसी भी प्रोडक्ट के बारे में कोई जानकरी टेबल बनाकर पेश करना चाहते है। और उसी प्रोडक्ट के बारे में जानकारी लिखने के लिए आपको एक से अधिक कॉलम की आवश्कता है।

तो आप क्या करेंगे। कैसे बनाएंगे टेबल। तो चलिए हम जानते है। की हमे कैसे कॉलम की आवश्कता को पूरा करना है। इसे हम एक उदाहरण से समझते है। मान लीजिये एक व्यक्ति है। जिसका नाम राम है।

और उसके पास तीन बाइक है। और आपको उन बाइक के नाम लिखने है। वो भी उस कॉलम के निचे जहाँ राम का नाम लिखा है। इसके लिए आपको कुछ इस प्रकार से कोड लिखने की आवश्कता होगी।

try this code

<!DOCTYPE html><html>
<head>
<style>
table, th, td
{
border: 1px solid black;
border-collapse: collapse; padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th colspan="3">baike</th></tr>
<tr>
    <td>ram</td>
<td>hero</td>
<td> apache</td>
<td> honda</td>
</tr>
</table>
</body>
</html>

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

हम आपको बता दे की ये कॉलम इस प्रकार दिखाई देने का कारण क्या है। किस प्रकार वो कलम जिसमे बाइक लिखा है। अपने आप इतना बड़ा दिखाई देने लगा है। की निचे के तीन कॉलम जिसमे बाइक के नाम लिखे है।

वो बिलकुल एक समान दिखाई दे रहे है। इसके लिए हमने Cell Span Columns को colspan द्वारा define किया है। जैसा की आप ऊपर लिखे कोड में देख सकते है।

की हमने <th colspan=”3″>baike</th> लिखा है। इस तीन को लिखने के कारण ही ऊपर वाला कलम निचे के तीन कॉलम के समान दिखाई दे रहे है।

 

9. Cell Span Rows

जैसा की आप देख रहे है। की हमने एक और table का निर्माण किया है। अगर आप इस प्रकार किसी टेबल का निर्माण चाहते है। तो आपको कुछ इस प्रकार से कोड को लिखने की आवश्कता है।

try this code

<body> <table> <tr> <th>Name:</th> <td>Ram</td> </tr> <tr> <th rowspan="2">baike</th> <td>hero</td> </tr> <tr> <td>honda</td> </tr> </table> </body>

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

How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

इस टेबल को बनाने के लिए हमें rowspan का उपयोग किया है। हम आपको बता दे की Cell Span Rows भी Span Columns कुछ के समान ही काम करता है।

इसमें केवल आपको एक ही डिफरेंस देखने को मिलता है।यह की यह टेबल की लाइनों को increase करता है और columns को घेरता है। हम आपको बता दे की rowspan द्वार define किया जाता है।

अगर आप इस कोड में td की संख्या को दो से बढ़ा कर तीन कर देते है। और इस कॉड में जहाँ rowspan=”2 ” लिखा है। उसके स्थान पर rowspan=”3″ कर देते है। तो आपको ये देखने को मिलेगा की जिस कॉलम में बाइक लिखा है।

वो उन तीन td कॉलम के समान ही दिखाई देने लगता है। इस प्रकार आप rowspan और td की संख्या को बढ़ते हुए एक बड़े कॉलम का निर्माण भी कर सकते है।

10. Caption Tag Table in Hindi

यदि आप कोई टेबल का निर्माण करते है। और आप चाहते है। की उस Table का कोइ नाम देना चाइये या कोई ऐसी स्थिति आपके सामने आती है। की आपको उस टेबल का नाम दे कर उस टेबल को एक पहचान देनी होगी।

तो आप वो भी बहुत ही आसानी से कर पाएंगे। इसके लिए अआप्को caption tag की help लेनी होगी। HTML में caption tag को define करने के लिए <caption> का उपयोग किया जाता है।

आपको केवल <table ></table> के मध्य caption टैग को जोड़ना होगा। चलिए हम एक उदहारण से समझते है। आपको इसके लिए इस प्रकार कोड को लिखना होगा।

try this code

<!DOCTYPE html><html>
<head>
<style>
table, th, td
{
border: 1px solid black;
border-collapse: collapse; padding: 5px;
}
</style>
<title> Span Columns </title>
</head>
<body>
    <table><caption>This is Caption</caption>
        <tr> <th>Name:</th>
        <td>Ram</td>
        </tr>
        <tr>
        <th rowspan="3">baike</th>
        <td>hero</td> </tr>
        <tr> <td>hoda</td>
            <tr> <td>apache</td>
        </tr>
        </table>
</body>
</html>
अब आप देख सकते है। की जैसे ही हमने हेड टैग में टेबल टैग के आगे कैप्सोन टैग लगाया तो हमारे टेबल के ऊपर टेबल का कैप्सोन यानिकि टेबल का नाम जुड़ चूका है।

How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

इस प्रकार आप किसी भी प्रकार के टेबल को एक निर्धारित नाम के साथ जोड़ सकते है।

11. Draw for multi-column headings table in hindi

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

try this code

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
border-collapse: collapse;}
th, td { padding: 10px; }
th{background-color: rgb(128, 139, 132);
color: white;}
</style>
</head><body><table>
    <tr>
     <th colspan="2">45</th>
     <th colspan="2">60</th>
     <th colspan="2">60</th>
    </tr>
    <tr>
     <th id="one">vikas</th>
     <th id="one">aakas</th>
     <th id="one">Manoj</th>
     <th id="one">vijay</th>
     <th id="one">vicky</th>
     <th id="one">vikram</th>
    </tr>
    <tr>
     <td>32</td>
     <td>55</td>
     <td>28</td>
     <td>52</td>
     <td>57</td>
     <td>71</td>
    </tr>
   </table>
</body>
</html>

अब आप देखिए की हमारे द्वारा लिखे गए इस कॉड का आउटपुट हमें कुछ इस प्रकार देखने को मिलता है।
How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

आप देख सकते है। की हमारे टेबल की ऊपर की तीन हैडिंग निचे की छ हैडिंग के समान दिखाई दे रही है। आप आप देख सकते है। की हमने जो कोड लिखा है।

उस कोड में हमने ऊपर की तीन हैडिंग के सामने colspan=”2″ लिखा है। इसका मतलब यह होता है। की जिस भी हैडिंग में colspan=”2″ लिखा गया है। उस हैडिंग के बॉक्स को निचे की दो हैडिंग बॉक्स के समान आकर दिया जाना चाहिए।

इसी प्रकार अगर आप चाहते है। की ऊपर वाला हेडिंग बॉक्स जो निचे के दो बॉक्स के समान दिखाई दे रहा है। वह बॉक्स निचे के तीन बॉक्स के समान दिखाई दे तो।

आपको colspan=”2″ के स्थान में colspan=”3″ लिख देना है। इतना लिखते ही आपका बॉक्स आपके द्वारा दिए निर्देश अनुशार तीन बॉक्स के समान दिखाई देने लगेगा।

12. Create a chart table

तो चलिए दोस्तों अब हम एक चार्ट टेबल का निर्माण करते है। हमें बहुत ही जगह ऐसे टेबल का निर्माण आवश्कता होती है। तो हम आपको ये चार्ट टेबल का टेबल का निर्माण करना भी सिखाते है।

ताकि आपको कभी भी किसी भी प्रकार का टेबल बनाने की आवश्कता हो तो आप को कोई भी परेशानी का सामना करने की आवश्कता न रहे।

चार्ट टेबल निर्माण करने के लिए हमें कुछ इस प्रकार से कोड को लिखने की आवश्कता होगी।

try this code

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
border-collapse: collapse;}
th, td { padding: 10px; }
th{background-color: rgb(61, 81, 255);
color: white;}
</style>
</head><body><table>
    <caption>chart table</caption>
    <tr>
     <th>Item </th>
     <th>Qty.</th>
     <th>@</th>
     <th>reat</th>
    </tr>
    <tr>
     <td>books (Box)</td>
     <td>98</td>
     <td>2.17</td>
     <td>313.00</td>
    </tr>
    <tr>
     <td>use paper (Case)</td>
     <td>20</td>
     <td>55.49</td>
     <td>439.40</td>
    </tr>
    <tr>
     <td>uselesspaper</td>
     <td>4</td>
     <td>57.99</td>
     <td>75.98</td>
    </tr>
    <tr>
     <th colspan="3">total</th>
     <td>645.88</td>
    </tr>
    <tr>
     <th colspan="2">Tax</th>
     <td>8%</td>
     <td>62.56</td>
    </tr>
    <tr>
     <th colspan="3">all Total</th>
     <td>653.64</td>
    </tr>
   </table>
</body>
</html>

आप देख सकते है। की हमारे द्वारा लिखे गए कोड काआउटपुट हमें कुछ इस प्रकार देखने को मिला है।
How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example
अब आप देख सकते है। की हमारे टेबल में निचे की और दिखाई दे रहे कुछ कॉलम का आकर आगे पीछे खिसका हुआ दिखाई दे रहा है। इन कॉलम को आगे पीछे खिसकाने के लिए हमें इन कॉड का उपयोग किया है।
<tr>
<th colspan="3">total</th>
<td>645.88</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td>8%</td>
<td>62.56</td>
</tr>
<tr>
<th colspan="3">all Total</th>
<td>653.64</td>
</tr>

जैसा की आप देख सकते है। की हमने इसमें भी colspan का उपयोग किया है। जो की कॉलम का आकर को नियंत्रित करता है। आशा करते है। की आप चार्ट कॉलम का निर्माण करना सिख गए है।

13. Create top and left side heading tables

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

try this code

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
border-collapse: collapse;}
th, td { padding: 10px; }
th{background-color: rgb(61, 81, 255);
color: white;}
</style>
</head><body><table>
    <caption>Create top and left side heading tables</caption>
    <tr>
     <th></th><th></th>
     <th>ram </th>
     <th>shyam</th>
    </tr>
    <tr>
     <th rowspan="2">Favorite</th>
     <th>Color</th>
     <td>red</td>
     <td>white</td>
    </tr>
    <tr>
     <th>Flavor</th>
     <td>Banana</td>
     <td>apple</td>
    </tr>
    <tr>
     <th rowspan="2">Least Favorite</th>
     <th>Color</th>
     <td>black</td>
     <td>green</td>
    </tr>
    <tr>
     <th>Flavor</th>
     <td>Mint</td>
     <td>Walnut</td>
    </tr>
   </table>
</body>
</html>
अब आप इस कोड का आउटपुट भी देख लीजिये। की इस कॉड के उपयोग से हमारा टेबल केसा दिखाई दे रहा है।
How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

अब हम इसके कॉड को समझते है। आप देख सकते है। की हमने इस कोड में हमने पहले दो कॉलम को खाली छोड़ा छोड़ा है। इसके लिए हमने <th></th><th></th> इस कॉड को लिखा है।

और उसके बाद राम और श्याम वाले कॉलम के लिए <th>ram </th> <th>shyam</th> ये कॉड लिखा है। और उसके बाद फेवरेट और फ्लेवर वाले कॉलम के लिए <th rowspan=”2″>Favorite</th> <th rowspan=”2″>Least Favorite</th> कॉड लिखा है।

जिसमे हमने कॉलम को बड़ा करने के लिए rowspan का उपयोग किया है। जैसा की हमने पहले भी जाना है। की किसी भी कॉलम का आकर बढ़ाने के लिए rowspan का उपयोग किया जाता है।

और उसके बाद हमने कलर व फ्लेवर का कॉलम का निर्माण करने के लिए हमें th व td कॉलम का उपयोग किया है। इस सभी कोड के मिश्रण से हमने इस कॉड का निर्माण किया है।

14. head color chang table in hindi

हमने टेबल को बनाना सिख लिया है। की हम किस प्रकार अगल अलग प्रकार से टेबल का निर्माण कर सकते है। लेकिन हमने टेबल को स्टाइल देने के बारे में अधिक बात नहीं की थी।

तो अब हम इसके बारे में बात करते है। सबसे पहले हम बात करते है। की हमारे table के हेड के टेक्स्ट का कलर और बैकग्राउंड कलर को किस प्रकार chang कर सकते है।

तो चलिए जानते है। इसके लिए हमें css कॉड को कुछ इस प्रकार लिखना होगा।

try this code

<!DOCTYPE html>
<html>
<head>
<style>th{background-color: blue;
color:white}</style></head>
<body></body></html>

चलिए पहले हम ये देख लेते है। की इस कोड को जोड़ने के बाद हमारा टेबल केसा दिखाई दे रहा है। उसके बाद हम ये जानेंगे की हमने कॉड किस प्रकार लिखा है। कोड में कोनसी लाइन का क्या अर्थ बनता है। जिसके कारण ये सब बदलाव हुए है।

How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

जैसा की हमने देखा की हमारे टेबल का हेड कलरफुल हो चूका है। इस कॉड में आप देख सकते है। की हमने html पेज में हेड टैग के बिच में कुछ css कोड लिखा है। तो आप इसमें देखिये की हमने th{background-color: blue; color:white} ये लाइन लिखी है।

इसमें th से हमारा मतलब है। की टेबल का हेड जैसा की हमने पहले जाना है। की टेबल के हेड को डिफाइन करने के लिए हमें th टैग लगाना होता है। तो अब हम हेड को स्टाइल दे रहे है। इसलिए हमने th का उपयोग किया है। और उसके बाद सेनिकोलन का उपयोग किया है। जो की अनिवार्य होती है।

उसके बाद background-color: blue; लिखा है। इसका मतलब तो इसके नाम से ही पता चल जाता है। की इसके पीछे का कलर chang करना है। और उसके बाद color:वाइट लिखा है। इसका मतलब यही बनता है। की इसके भीतर लिखे गए टेक्स्ट का कलर वाइट करना है। तो आप इस प्रकार टेबल के हेड को कलरफुल बना सकते है।

15. Complete Table Body Color Change

जैसा की हमने टेबल हेड का कलर चेंज किया था। उसी प्रकार अब हम टेबल की पूरी बॉडी का कलर चेंज करते है। साथ ही बॉडी के टेक्स्ट को भी हम सेण्टर में करेंगे। ताकि आप कोई टेबल का निर्माण करे तो आपको परेशानी न हो। इसका कोड लिखते है।

try this code

<!DOCTYPE html>
<html>
<head>
<style>th{background-color: blue;
color:white}tr{background-color: rgb(45, 214, 115);
color:white;
text-align: center;}</style></head>
<body></body>

</html>

हमारे इस कोड का आउटपुट हमें कुछ इस प्रकार दिखाई दे रहा है।

How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

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

जो की हमने टेक्स्ट को सेण्टर में करने के लिए दिया है। यह कॉड आपको कुछ इस प्रकार लिखा हुआ दिखाई देगा। text-align: center; इस कॉड का उपयोग करके हमने टेबल के सभी टेक्स्ट को सेण्टर में किया है।

16. Table align

हमने टेबल का निर्माण करना और उसमे कलर डालना सीख लिया है। अब सीख लेते है। की हम टेबल को ब्रौज़र की बॉडी यानिकि स्क्रीन में लेफ्ट ,राइट या सेण्टर में कैसे कर सकते है।

इसके लिए हमें css कोड को लिखना होगा जो की कुछ इस प्रकार लिखा जाता है। border=”1″ align=”center” इस कोड को आप इस प्रकार से लिख सकते है। <table border=”1″ align=”center”> टेबल टैग के साथ ही जोड़ कर । अन्य align property css के लिए जानकारी।

अगर आप align के सामने लेफ्ट या राइट लिखेंगे। तो टेबल आपके निर्देश के अनुसार लेफ्ट या राइट साइड की और खिसक जायेगा। हमे इस टेबल के लिए align=”center” टैग जोड़ा है। तो हमारा टेबल सेंटर में दिखाई दे रहा है। आप ये आउटपुट देख सकते है।

 

How To Create Table In Html In Hindi- how to make table in html in hindi table tag in html- colspan html in hindi- html table with images table layout and presentation in html- html table row group example

आशा करते है। की आपको जानकारी पसंद आयी होगी। अगर आपके दिमाग में कोई भी सवाल है। तो आप हमे कॉमेट बॉक्स में पूछ सकते है। या अपना कोई सुझाव भी हमें दे सकते है।

read more

Html के बारे में विस्तार से पूरी जानकारी जाने।

▷Blogger Me Whatsapp Share Button Kaise Lagaye

 

Click to comment

Leave a Reply

tranding