Table tag in HTML

TABLE TAG IN HTML

Html मे सारणी बनाने के लिये Table Tag का उपयोग किया जाता है। किसी Table का तत्व का सामान्य रूप निम्न प्रकार है-

<table>
Table Data
</table>

इससे स्पष्ट है कि सारणी बनाने का प्रारंभ <Table> Tag से किया जाता है और समापन </table> Tag से किया जाता है। इन दोनो के बीच मे Table के Data को परिभाषित किया जाता है। इस Data मे Table का नाम प्रत्येक पंक्ति के प्रत्येक सैल की परिभाषा आदि शामिल होती है। इनको परिभाषित करने के लिये विभिन्न Tag का उपयोग किया जाता है।
Table Tag मे कई एट्रीव्यूट हो सकते है, जैसे- width, border, cellpadding, cellspacing, bgcolor आदि।

Learn HTML in Hindi Table Tag by Video Tutorial

अगर आप टेबल टैग का कैसे प्रयोग करना है जानना चाहते हैं तो कृपया नीचे दिए गए विडियो को अवश्य देखें

1. td tag (Table data tag)

सारणी के किसी सैल को परिभाषित करने के लिये <td> Tag का उपयोग किया जाता है। इसका पूरा रूप है- table data इस टैग मे एक सैल की सामग्री उसके विभिन्न एट्रीव्यूट के साथ दी जाती है। <td> टैग का उपयोग इच्छानुसार कितनी भी बार किया जा सकता है।
उदाहरण के लिये यदि हम केवल एक सैल वाली सारणी बनाना चाहते है, तो उसे निम्न प्रकार बना सकते है-

<table>
<td> one cell table </td>
</table>

Output-

2. Border एट्रीव्यूट –

ऊपर के उदाहरण की सारणी मे किसी बाॅर्डर का उपयोग नही किया जा सकता है। यदि हम बार्डर भी दिखाना चाहते है, तो हमे <table> tag के साथ border एट्रीव्यूट का उपयोग करना होगा। इसका सामान्य रूप निम्न प्रकार है-

<table border= “1”>
<td> one cell table </td>
</table>

Output –

इस table मे एक से अधिक cell निम्न प्रकार जोड सकते है.

<table border= “2”>

<td> First cell </td>

<td> Second cell </td>

<td> Third cell </td>

</table>

Output-

3. Width एट्रीव्यूट-

ऊपर के उदाहरण की सारणी की कोई चौड़ाई नही दी गई है। जब चौड़ाई नही दी जाती है, तो उसकी चौड़ाई एक पंक्ति के सभी सैलो की चौड़ाई के योग के बराबर होती है। हम चाहे तो सारणी की चौड़ाई Width एट्रीव्यूट द्वारा दे सकते है। इसका सामान्य रूप निम्न प्रकार है-

<table border= “2” width=”500″ >

<td> first cell table </td>

<td> second cell </td>

<td> third cell </td>

</table>

Output-

4. Tr Tag (Table row)

अभी तक के सभी उदाहरणो मे केवल एक पंक्ति (row) है। यदि हम सारणी (Table) मे एक से अधिक पंक्तियाॅ देना चाहते है, तो उसके लिये <tr> tag का उपयोग किया जाता है। tr का पूरा रूप है Table Row.
उदाहरण के लिये हम दो पंक्तियो वाली एक सारणी हम निम्न प्रकार बना सकते है|

<table border= “2” width=”500″ >
<tr>
<td> first cell </td>
<td> second cell </td>
<td> third cell </td>
</tr>
<tr>
<td> first cell of 2^nd row </td>
<td> second cell of 2^nd row </td>
<td> third cell of 2^nd row </td>
</tr>
</table>

Output-

Example of Student Record in HTML

अब हम एक उदाहरण लेंगे जिसमे हम एक टेबल का निर्माण करेंगे, इस टेबल में हम स्टूडेंट का रिकॉर्ड रखेंगे

HTML Coding

<table border="1" cellpadding="1">
<tr>
<th> Student Name </th>
<th> Roll No. </th>
<th> Total Marks </th>
</tr>
<tr>
<td> Ashish </td>
<td> 2345432 </td>
<td> 210 </td>
</tr>

<tr>
<td> Mohit</td>
<td> 2346345 </td>
<td> 210 </td>
</tr>

<tr>
<td> Shivani </td>
<td> 3456232 </td>
<td> 201 </td>
</tr>

<tr>
<td> Jitendra </td>
<td> 2345652 </td>
<td> 230 </td>
</tr>
</table>