Nested Table HTML In Hindi

HTML Table बनाना आसान है और HTML में Nested Table HTML create करना और भी आसान लेकिन इसके लिए कुछ बातों का ध्यान रखना जरूरी है, इसलिए आपको ये आर्टिकल पूरा पढना चाहिए जिससे आपके सभी Doubt clear हो जायेंगें |

उम्मीद है आपने HTML में टेबल create करना तो सिख ही लिया होगा अगर नहीं सिखा है तो आप HTML Table का ये आर्टिकल पढ़ सकते हैं जिसमें HTML table के बारे में detail से जानकारी दी गयी है |

HTML table क्या है ?

दोस्तों टेबल एक तकनीक है जिसके इस्तेमाल से user अपना डेटा व्यवस्थित तरीके से रख सकता है user ही नहीं खुद developers अपना डेटा टेबल के अंदर रखते हैं |

डेटा रखनें के लिए टेबल में column और row बनें होते जिनमें डेटा को रखा जा सकता है और डेटा को आसानी से manage भी किया जा सकता है |

HTML में टेबल बनाना और इसे डायनमिक करना आसान है तो आइए अब आगे हम बात कर लेते हैं कि Nested Table HTML क्या है ओर इसे कैसे बनाया जाता है |

Nested Table HTML क्या है ?

दोस्तों HTML कोडिंग में table का इस्तेमाल करते टाइम Nested Table का एक अहम रोल होता है | Nested Table या फिर टेबल के अंदर दूसरी टेबल एक concept है जिसका उपयोग बड़ी और complex टेबल बनाने के लिए किया जाता है |

कोडिंग में अच्छा control रखनें के लिए ज़्यादातर complex ओर बड़ी tables में जो main या फिर मुख्य table होती है उसके अंदर दूसरी table को बनाया जाता है जिससे डेटा को सुरक्षित और समझने में आसान बनाया जाता है |

दोस्तों HTML Table के अंदर दूसरी html table बनाना Nested Table कहलाता है और जिस प्रकार HTML Table बनाते हैं ठीक उसी प्रकार Nested Table बनाई जाती है लेकिन फर्क सिर्फ इतना है की एक वेब पेज में किसी टेबल के अंदर दूसरी टेबल को बनाना वो भी उसी same वेब पेज के अंदर, तो उसे nested टेबल कहा जाता है |

Nested Table के फायदे

दोस्तों Nested Table बनाकर हम आसानीं से जानकारी का पता लगा सकते हैं और Nested Tableमें हम एक स्पेसिफिक column की जानकारी भी आसानीं से ढूंड सकते हैं जिसके कारण confusion न के बराबर होता है | इसके आलावा Nested Table मैं हम पेराग्राफ के बजाय एक अलग तरीके से भी जानकारी जोड़ सकते हैं जिससे डेटा समझनें में आसान हो जाता है |

nested table में डेटा की complexity(जटिलता) कम होती है जिससे सभी डेटा को समझनें में आसानीं होती है |

Nested Table HTML को कैसे बनाएँ ?

दोस्तों nesting table बनाने के लिए हमें उन्हीं टैग की ज़रूरत होती है जो एक normal टेबल बनाने के लिए ज़रूरत होती है लेकिन nesting table में आपको एक cell के अंदर दूसरी टेबल बनानी होती है जिसका ख़्याल रखना ज़रूरी है और सभी tags का ध्यान रखना भी ज़रूरी है |

  • सबसे पहले आपको एक मुख्य टेबल तैयार करनी है |
  • उसके बाद आपको यह तय करना है की मुख्य टेबल के किस row या किस column में दूसरी टेबल को रखना है, एक बार तय होनें के बाद आपको अगले step पर जाना है |
  • <td> – यह एक ऐसा element है जिसके अंदर एक नयी टेबल बनायी जाएगी और <td> के अंदर आप एक नयी टेबल को start कर सकते हैं कुछ इस प्रकार से,
  • <td>इसके अंदर नयी टेबल को रखना है,</td>
  • इतना काम करने के बाद आपकी Nested Table बनकर तैयार हो जाएगी |
Nested-Table-Html
Normal HTML Table

अब हम create करते हैं एक Nested Table कुछ इस प्रकार से –

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Nested Table</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body{
			font-family: sans-serif;
		}
		table,td,tr,th{
			border: 1px solid #000;
			border-collapse: collapse;
			padding: 10px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<th>Table Heading</th>
			<th>Table Heading</th>
			<th>Table Heading</th>
		</tr>
		<tr>
			<td>Table Data</td>
			<td>Table Data</td>
			<td>Table Data</td>
		</tr>
		<tr>
			<td>Table Data</td>
			<td>Table Data
				<table>
					<tr>
						<th>Table Heading</th>
						<th>Table Heading</th>
						<th>Table Heading</th>
					</tr>
					<tr>
						<td>Table Data</td>
						<td>Table Data</td>
						<td>Table Data</td>
					</tr>
					<tr>
						<td>Table Data</td>
						<td>Table Data</td>
						<td>Table Data</td>
					</tr>
					<tr>
						<td>Table Data</td>
						<td>Table Data</td>
						<td>Table Data</td>
					</tr>
				</table>
			</td>
			<td>Table Data</td>
		</tr>
		<tr>
			<td>Table Data</td>
			<td>Table Data</td>
			<td>Table Data</td>
		</tr>
	</table>
</body>
</html>

Complex Table Design – Other Nested Table Design

output

Nested-Table-Html
Nested Table HTML

Conclusion

उम्मीद है दोस्तों Nested Table HTML का ये आर्टिकल आपको helpful लगा होगा अगर आपको ये आर्टिकल helpful लगा हो तो आप इस आर्टिकल को अपनें दोस्तों के साथ share जरुर करें |

और ताज़ा अपडेट पानें के लिए आप मेरे social media से जुड़ सकते हैं |

धन्यवाद

Nested Table से जुड़े कुछ सवाल और जवाब

Q – क्या हम टेबल के अंदर टेबल बना सकते हैं ?

क्यों नहीं, हम एक HTML टेबल के अंदर दूसरी टेबल को बना सकते हैं जिसे जिसको nested table कहा जाता है |

लेकिन इसको बनाने से पहले आपको कुछ बातों का ध्यान रखना बहुत ज़रूरी है जैसे की अगर आप tr, td, th जैसे element को अगर सही ढंग से बंद नहीं करते हैं तो पुरानें ब्राउज़र में आपको समस्याओं का सामना करना पड़ सकता है इसलिए सभी टैग को सही तरीक़े से बंद करना ज़रूरी है |

Q – मेरी टेबल से पहले ओर बाद में ख़ाली स्थान क्यों ?

अगर आपकी टेबल के ऊपर या नीचे extra space या ख़ाली स्थान आ रहा है तो हो सकता है की आपके HTML syntax या फिर कोई HTML टैग में problem है |

इसके अलावा हो सकता है की आपकी टेबल के अंदर कोई loose content है जिसके कारण ख़ाली स्थान आ रहा हो, दोस्तों loose content से मतलब है की आपका कोई content किसी element से बाहर रखा गया है जिसके कारण ख़ाली स्थान आ रहा हो |

Solution – इसका हल यह है की जब भी आप कोई टेबल बनाएँ उसके अंदर कोई भी loose content को ना छोड़ें क्योंकि पुराने ब्राउज़र loose content के ऊपर और नीचे एक ख़ाली स्थान छोड़ देते हैं जिससे टेबल कि डिज़ाइन ख़राब हो सकती है इसलिए content को td और th के अंदर ही डालें |

Leave a Comment