हेल्लो दोस्तों आपने html के बारे में बहुत सी जानकारी दी जा चुकी है आज इस पोस्ट में Table in html in Hindi के बारे में दिया गया है तो चलिए शुरू करते है
Contents
HTML tables का परिचय
किसी भी data को structured form में represent करने के लिए table की आवश्यकता होती है आप अपने web-page में table(Table in html in Hindi) को include करके आप उसे और भी structure को attractive बना सकते है
html में table को create करने के लिए <table> tag का प्रयोग किया जाता है जैसा की नाम से जान सकते है की ये tag table को create करने के लिए प्रयोग होता है
इस tag का एक sub tag भी होता है जिसे <tr> tag (tr=table row) और इसका भी sub tag <td> tag (td=table data) होता है
Creating tables in html
कोई भी table rows और columns से मिलकर बना होता है इसलिए आप <table> tag के बाद rows create करने के लिए आप <tr>tag का प्रयोग किया जाता है आप <tr> tag की सहायता से जितने भी rows को create करना चाहते हो कर सकते है इसके बाद आप rows में columns को create करने के लिए <td> tag का प्रयोग किया जाता है आप जितने columns create करना चाहते है उतने <td> tags को define कर सकते है
इसको हम एक example से समझ सकते है
<html>
<head>
<title>table create</title>
</head>
<body>
<table border=”1”>
<tr>
<!-- left side में row define किया गया है और right side में column को define किया गया है -->
<td>1,1</td> <!-- first row and first column-->
<td>1,2</td> <!-- first row and second column -->
</tr>
<tr>
<td>2,1 </td>
<td>2,2 </td>
</tr>
</table>
</body>
</html>OUTPUT
Note:-table को create करने के लिए आपको tags का order को हमेश ध्यान में रखना चाहिए की आप पहले <table> tag आता है उसके बाद <tr> tag तब <th> (table heading) और <td> tags आते है जिसमे <th> और <td> tags हमेश <tr> tag के अंदर आते है
Creating table heading
Table में heading को create करने के लिए <th> tag का प्रयोग किया जाता है जिसमे table की first row में heading भी create कर सकते है heading text table के बाकि text से मोटा और बड़ा web page पर दिखाई देता है
जैसे आप table में कोई table create किये हो तो वह किस समूह में होता है उसे heading में लिखा जाता है जैसे अगर बहुत सारे books के name हो तो वह books उसका heading define करते है इसी प्रकार यदि लडको के name हो तो heading में boys define किया जाता है
heading को create करने के लिए <th> tag का प्रयोग करते है जो <table> tag के sub tag के <tr> tag के sub tag में आता है
इसको हम एक example से द्वारा अच्छे से समझ सकते है
<html>
<head>
<title>table heading</title>
</head>
<body>
<table border=”1”>
<tr>
<th>name</th>
<th>Gender</th>
</tr>
<tr>
<td>Vinay</td>
<td>male</td>
</tr>
<tr>
<td>Shobha</td>
<td>Female</td>
</tr>
</table>
</body>
</html>OUTPUT
COLSPAN Attribute
इस attribute के द्वारा आप किसी एक row के column को एक से ज्यादा columns में भी divide कर सकते है इसके लिए पहले column में col-span attribute को define किया जाता है तथा उसकी value भी define करते है जो value दिया जाता है वह cells की value होती है जितने भी table में cells होते है आप उनकी number value को define करते है
जिस column में आप col-span को define करते है तो वो एक column उतनी columns को लेता है
col-span attribute <tr> और <td> element पर apply किया जाता है
इसको एक example के द्वारा समझ सकते है
<html>
<head>
<title>col-span webpage</title>
</head>
<body>
<table border=”1”>
<tr>
<th>Name</th>
<th colspan=”2”>city home</th>
</tr>
<tr>
<td>Vinay</td>
<td>gorakhpur</td>
<td>ballia</td>
</tr>
<tr>
<td>prabhat</td>
<td colspan=”2”>bhatni</td>
</tr>
</table>
</body>
</html>OUTPUT
इस example में हम देख सकते है की vinay का दो city में उसका घर है लेकिन prabhat केवल एक ही city में घर है जिसके कारण prabhat वाली row में एक column की जगह empty रह जायेगा इस लिए prabhat वाली row का एक column उपर वाली row के दो columns को कवर करे तो आप उस स्थान पर colspan attribute का प्रयोग कर सकते है इसके लिए हमे integer values देते है
ROWSPAN Attribute
Rowspan attribute भी colspan की तरह होता है इसे आप <tr> tag में define करते है इस attribute की आप जितनी values देते है वह एक row उतने ही columns की जगह घेरता है
इसको एक example के द्वारा समझ सकते है
<html>
<head>
<title>rowspan webpage</title>
</head>
<body>
<table border=”1”>
<tr>
<th rowspan=”2”>fruits</th>
<td>mango</td>
</tr>
<tr>
<td>blue</td>
</tr>
<tr>
<th rowspan=”2”>colors</th>
<td>yellow</td>
</tr>
<tr>
<td>white</td>
</tr>
</table>
</body>
</html>OUTPUT
Naming <caption> tag table
table का जो नाम देना चाहते है दे सकते है इसके लिए <caption> tag का प्रयोग किया जाता है इस tag को table tag के बाद define किया जाता है
caption tag webpage पर table के उपर show होता है
इसको हम एक example से समझ सकते है
<html>
<head>
<title>using caption tag</title>
</head>
<body>
<table border=”2”>
<caption>friends table</caption>
<tr>
<td>vinay</td>
<td>prabhat</td>
</tr>
</table>
</body>
</html>OUTPUT
refenence-https://www.tutorialspoint.com/html/html_tables.htm
निवेदन:-आप सभी छात्र –छात्रों से निवेदन है की अगर आपको ये Topic(Table in html in Hindi) अच्छा लगा हो तो कृपया आप इस वेबसाइट के बारे में अपने दोस्तों को जरुर बताये अगर कोई topic से संबधित प्रश्न हो तो कमेंट्स(comments) आपके लिए ही बना है और किसी Subject के लेकर भी कोई प्रश्न हो तो कमेंट करे