एचटीएमएल में टेबल कैसे बनायें? HTML Table in Hindi
टेबल का उपयोग कर हम किसी भी जानकारी को अच्छी तरह से समझा पाते हैं। यदि हम कोई वेब पेज बना रहे हैं या ब्लॉग पोस्ट लिख रहे हैं तो वहां पर भी हमें टेबल का उपयोग करना चाहिए।
वेब पेज में टेबल बनाने के लिए हम एचटीएमएल का उपयोग करते हैं। HTML table को बनाने के लिए हमें table tag की जानकारी होनी जरुरी है। इस आर्टिकल के माध्यम से आप एचटीएमएल में टेबल कैसे बनायें यह अच्छी तरह से समझ पायेंगे। निचे हमने विस्तार से HTML में table tag को समझाया है। टेबल टैग का उदहारण देखकर आप भी जरुरत के अनुसार अलग-अगल प्रकार के टेबल बना पायेंगे।
Contents
HTML में Table कैसे बनायें? [HTML Table Tag in Hindi]
HTML में टेबल बनाने के लिए हम <table> tag का उपयोग करते हैं। टेबल के अंदर कितने column और row होंगे यह हमें <tr> और <td> टैग के जरिये बताने पड़ता है। हमें वेब पेज में जिस स्थान पर टेबल दिखाना है वहां पर <table> का कोड लिखना होता है।
आइये इसे आसान steps में समझते हैं। किसी भी HTML document में टेबल बनाने के लिए इन स्टेप्स को फॉलो करें:
- एचटीएमएल टेबल का कोड <table> tag से शुरु करना है।
- <table> के अंदर <tr> लिखा जाता है जो की table row को define करता है।
- <tr> के अंदर <td> लिखा जाता है जहाँ TD का मतलब table data होता है।
- टेबल के अंदर डाटा को <td> और </td> के बीच लिखते हैं।
- जितने कॉलम बनाने हैं हमें उतनी बार <td> का उपयोग करना है।
- जितने rows बनाने हों उतने बार हमें <tr> element लिखने पड़ते हैं।
- ध्यान रहे हमें हर टैग की closing भी करनी है।
निचे दिए गये उदहारण से आप इसे आसानी से समझ सकते हैं।
HTML Table Tag का Basic Structure
Table tag का syntax या basic structure कुछ इस प्रकार होता है:
<table>
<tr>
<td>1st row 1st column</td>
<td>1st row 2nd column</td>
</tr>
<tr>
<td>2nd row 1st column</td>
<td>2nd row 2nd column</td>
</tr>
</table>Output:
| 1st row 1st column | 1st row 2nd column |
| 2nd row 1st column | 2nd row 2nd column |
ऊपर दिए गये कोड से 2 columns और 2 rows वाले टेबल बनेंगे। आप कोड देखकर समझ सकते हैं की 2 rows बनाने के लिए हमने दो बार <tr> टैग का उपयोग किया है। और दोनों rows के अंदर दो-दो <td> टैग लिखे गये हैं जिसे दो-दो cells यानि कॉलम बनेंगे। जो भी content हमें टेबल में दिखाना है उसे <td> और </td> के बीच लिखना है।
एचटीएमएल टेबल कैसे बनायें? उदाहरण से समझें
निचे हमने HTML table बनाने के कई सारे उदाहरण दिए हैं जिन्हें देखकर आप समझ सकते हैं:
उदाहरण 1: HTML Table में Border कैसे लगायें?
यदि आप टेबल में बॉर्डर लगाना चाहते हैं तो आपको border attribute का उपयोग करना होगा। इस एट्रिब्यूट को <table> के अंदर लिखना है और इसकी value जितनी ज्यादा रखेंगे बॉर्डर की मोटाई भी उतनी अधिक होगी। इसे example से समझिये:
<table border="1">
<tr>
<td>Name</td>
<td>Ashok</td>
</tr>
<tr>
<td>Age</td>
<td>28</td>
</tr>
</table>इसका output कुछ ऐसा होगा:
| Name | Ashok |
| Age | 28 |
उदाहरण 2: HTML Table में Header कैसे लगायें?
कई बार हमें टेबल में header बनाना पड़ता है और इसके लिए हम <td> की जगह <th> का उपयोग करते हैं।
<table border="1">
<tr>
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
<tr>
<td>Ashok</td>
<td>Raigarh</td>
<td>28</td>
</tr>
<tr>
<td>Amit</td>
<td>Mumbai</td>
<td>26</td>
</tr>
</table>Output:
| Name | City | Age |
|---|---|---|
| Ashok | Raigarh | 28 |
| Amit | Mumbai | 26 |
उदाहरण 3: HTML Table में Cellspacing और Cellpading का उपयोग
टेबल में किसी cell के अंदर की white space कम या ज्यादा किया जा सकता है इसके लिए cellpading और cellspacing attributes का उपयोग किया जाता है:
- cellpadding: इससे cell के बॉर्डर और content के बीच के space को define किया जाता है।
- cellspacing: इससे दो cells के बीच की दूरी को adjust किया जाता है।
आइये इसे एक example के द्वारा समझते हैं:
<table border = "1" cellpadding = "5" cellspacing = "10">
<tr>
<th>Name</th>
<th>Class</th>
</tr>
<tr>
<td>Mohan Verma</td>
<td>10th</td>
</tr>
<tr>
<td>Vikas Jain</td>
<td>12th</td>
</tr>
</table>Output:
| Name | Class |
|---|---|
| Mohan Verma | 10th |
| Vikas Jain | 12th |
उदाहरण 4: HTML Table की Height और Width कैसे set करें?
टेबल की लम्बाई और चौड़ाई को define करने के लिए height और width attribute का उपयोग किया जाता है। इनकी value को आप number या percent में रख सकते हैं।
<body>
<table border = "1" width = "400" height = "200">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>Output:
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
उदाहरण 5: HTML Table में Columns को Merge कैसे करें?
एचटीएमएल टेबल में दो या दो से अधिक कॉलम को आपस में merge करने के लिए <td> या <th> में colspan attribute का उपयोग करना होता है।
<table border="1" width="100%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Amit</td>
<td>Verma</td>
<td>23</td>
</tr>
<tr>
<td>Ajeet</td>
<td>Sharma</td>
<td>27</td>
</tr>
</table>Output:
| Name | Age | |
|---|---|---|
| Amit | Verma | 23 |
| Ajeet | Sharma | 27 |
उदाहरण 6: HTML Table में Rows को Merge कैसे करें?
जब दो row को merge करना हो तो हमें <td> या <th> में rowspan attribute use करना होगा। आइये इसे example से समझते हैं:
<table border="1" width="100%">
<tr>
<th>Name</th>
<td>Vivek</td>
</tr>
<tr>
<th rowspan="2">Phone No.</th>
<td>077-48112</td>
</tr>
<tr><td>75110000</td></tr>
</table>Output:
| Name | Vivek |
|---|---|
| Phone No. | 077-48112 |
| 75110000 |
Best HTML Table Generator Tools
यदि आप HTML की कोडिंग नही करना चाहते या आपके पास समय की कमी है तो आप कुछ ऑनलाइन एचटीएमएल टेबल जनरेटर का भी उपयोग कर सकते हैं और अपनी जरुरत के अनुसार टेबल बना सकते हैं।
कुछ काम के टेबल जनरेटर की लिंक निचे दी गयी है:
इन tools की मदद से आप table की styling भी कर सकते हैं और बहुत ही कम समय में HTML table का कोड generate कर सकते हैं।
यह भी पढ़ें
- सिर्फ 20 मिनट में सीखें HTML हिंदी में – HTML Tutorial in Hindi
- HTML5 में कौन-कौन से नए Features हैं ?
- CSS क्या है? इसके क्या फायदे हैं?- What is CSS in Hindi
HTML Table in Hindi – FAQ
क्या हम एक HTML table के अंदर दूसरा टेबल बना सकते हैं?
हाँ, आप ऐसा कर सकते हैं। टेबल के cell के अंदर आप एक और टेबल का कोड लिख सकते हैं।
HTML टेबल की Styling कैसे करें?
इसके लिए आप CSS का उपयोग करें।
