Basic table structure table, tr, td, th in html hindi
एचटीएमएल वेब पेज में यदि आप टेबल यानि नार्मल टेक्स्ट कंटेंट डाटा और इनफार्मेशन को रौ एंड कॉलम फॉर्मेट आर्डर में डिस्प्ले करना चाहते है, तो आप एचटीएमएल टेबल टैग से वेब पेज में टेबुलर डाटा और इनफार्मेशन को क्रिएट कर डिस्प्ले कर सकते है। एचटीएमएल वेब पेज में टेबल में आप टेबल, टेबल रौ, टेबल डाटा, टेबल हैडिंग, और अन्य कई टेबल ऐट्रिब्यूट्स के बारे में डिटेल में जानेंगे।
So, let’s know the table tag attributes <table>, <tr>, <td>, and <th> tags in HTML.
HTML basic table structure.
- <table> tag attributes – टेबल टैग एचटीएमएल वेब पेज में न्यू टेबल क्रिएट करने में उपयोग होता है।
- <tr> tag attributes – टेबल रौ टैग से जरूरत के अनुसार एचटीएमएल वेब पेज में क्रिएटेड टेबल में नंबर ऑफ़ न्यू टेबल रौ क्रिएट कर सकते है।
- <td> tag attributes – एचटीएमएल वेब पेज में जरूरत के अनुसार नंबर ऑफ़ टेबल डेटा सेल को क्रिएट कर सकते है।
- <th> tag attributes – मौजूदा एचटीएमएल वेब पेज में जरूरत के अनुसार टेबल हेडर सेल को क्रिएट कर सकते है।
Table example in an HTML web page.
Table example in an HTML web page, with all table tag attributes explained.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title> Html Table Tag Attributes</title>
<style>
table {
color:red;
font-size:1.3em;
width: 80%;
border-collapse: collapse;
}
th, td {
border: 2px solid blue;
padding: 6px;
text-align: justify;
margin:10px;
font-family: times new roman;
}
th {
background-color: yellow;
font-family: monotype corsiva;
}
</style>
</head>
<body>
<h1><center>Web Development Course Table</center></h1>
<table>
<thead>
<tr>
<th>#.</th>
<th>Course Name.</th>
<th>Duration.</th>
<th>Price.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Html</td>
<td>1 Month</td>
<td>Rs – 499</td>
</tr>
<tr>
<td>2.</td>
<td>Css </td>
<td>2 Month</td>
<td>Rs – 799</td>
</tr>
<tr>
<td>3.</td>
<td>Php </td>
<td>2 Month</td>
<td>Rs – 899</td>
</tr>
<tr>
<td>4.</td>
<td>JavaScript </td>
<td>2 Month</td>
<td>Rs – 999</td>
</tr>
</tbody>
</table>
</body>
</html>
Table example in an HTML web page.
<table> tag – एचटीएमएल वेब पेज में जब टेबल स्ट्रक्चर या लेआउट को क्रिएट करना हो, तब टेबल टैग सम्पूर्ण टेबल स्ट्रक्चर को डिज़ाइन करता है।
Basic HTML table syntax.
<table>
<!– add desired table row, column cell, table heading, and more element –>
</table>
<thead> tag – एचटीएमएल वेब पेज में टेबल हेडर या टेबल हैडिंग पर्टिकुलर इनफार्मेशन को बोल्ड हैडिंग में ग्रुप कर प्रीव्यू करता है। वैसे टेबल हैडिंग टैग का कोई इम्पोर्टेन्ट रोल नहीं है. लेकिन कई बार आपको टेबल के फर्स्ट रौ और सेल एलिमेंट को हैडिंग आर्डर में प्रीव्यू करना हो, तब टेबल हैडिंग टैग को उपयोग करे.
Basic HTML thead tag syntax.
<thead>
<tr>
<th>Table row cell 1 heading 1 </th>
<th> Table row 1 column 2 heading 2 </th>
<th>Table row 1 column 3 heading 3 </th>
<th> Table row 1 column 4 heading 4 </th>
</tr>
</thead>
<tbody> tag – एचटीएमएल वेब पेज में क्रिएटेड न्यू टेबल में मैन्युअल टाइप टेक्स्ट कंटेंट को ग्रुप कर डिस्प्ले करता है। वैसे यह टैग इम्पोर्टेन्ट नहीं है, लेकिन यह टैग आपको टेबल बॉडी कंटेंट को पर्टिकुलर बॉडी ब्लॉक में एडजस्ट कर डिस्प्ले करने में सहायता करता है।
Basic HTML tbody tag syntax.
<tbody>
<tr>
<td>Table Data </td>
<td>Table Data</td>
<td>Table Data </td>
<td>Table Data</td>
</tr>
</tbody>
<tr> tag – एचटीएमएल वेब पेज में टेबल में एक न्यू टेबल पंक्ति को क्रिएट करने में उपयोग करते है। जिसे टेबल रौ के रूप में टेबल में इंडिविजुअल <tr> टेबल रौ में एक या अधिक <th> टेबल हैडिंग/टेबल हैडिंग या <td> टेबल डाटा कंटेंट डिस्प्ले हो सकते हैं।
Basic HTML tr tag syntax.
<tr>
<td>Table Row Content </td>
<td>Table Row Content</td>
<td>Table Row Content </td>
<td>Table Row Content</td>
</tr>
<th> tag – एचटीएमएल वेब पेज में टेबल के फर्स्ट रौ हेडर सेल में हैडर, हैडिंग टेक्स्ट को बोल्ड कर हैडिंग फॉर्मेट में प्रीव्यू करते है। टेबल हैडिंग टेक्स्ट बड़े बोल्ड करैक्टर में डिस्प्ले होता है, और नार्मल टेबल टेक्स्ट सामान्य फॉर्मेट में प्रीव्यू होता है।
Basic HTML table heading tag syntax.
<th>table Header </th>
<th>table Header </th>
<td> tag – एचटीएमएल वेब पेज में टेबल डेटा सेल को क्रिएट करता है। टेबल सेल में आप अपने जरूरत के अनुसार टेबल सेल डाटा को स्टोर और डिस्प्ले कर सकते है। एक कम्पलीट टेबल स्ट्रक्चर में टेबल सेल, टेबल डाटा का इम्पोर्टेन्ट रोल है.
Basic HTML table cell data tag syntax.
<td>Table Cell Data</td>
<td>Table Cell Data</td>
Table attributes and styling in HTML web page.
colspan tag – एचटीएमएल वेब पेज में टेबल कोलस्पेन टैग से जरूरत के अनुसार टेबल सेल की चौड़ाई को बढ़ाता है, कई बार आपको टेबल सेल को थोड़ा लम्बा या फैला कर डिस्प्ले करना हो, तब टेबल कोलस्पेन टैग को उपयोग करे।
Basic HTML table colspan tag syntax.
<td colspan=”4″>Write the table text content you want to display with table colspan tag</td>
rowspan tag – एचटीएमएल वेब पेज में टेबल रौस्पेन टैग का उपयोग पर्टिकुलर टेबल रौ को कितना चौड़ा करना या टेबल में रौ को कितना फैलाना है।
Basic HTML table rowspan tag syntax.
<td rowspan=”4″>Write the table text content you want to display with table rowspan tag</td>
Table CSS Styling – एचटीएमएल वेब पेज में टेबल साधारण लुक और लेआउट के साथ प्रदर्शित होते है, एचटीएमएल वेब पेज में क्रिएटेड टेबल को बेहतर प्रीव्यू करने और एडवांस्ड टेबल थीम के साथ स्टाइल्स करने के लिए सीएसएस स्टाइल को उपयोग करे. सीएसएस स्टाइल्स आपके टेबल स्ट्रक्चर लेआउट को अट्रैक्टिव और मोर कमर्शियल बना देते है.
<style>
table {
color:red;
font-size:1.3em;
width: 80%;
border-collapse: collapse;
}
th, td {
border: 2px solid blue;
padding: 6px;
text-align: justify;
margin:10px;
font-family: times new roman;
}
th {
background-color: yellow;
font-family: monotype corsiva;
}
</style>
Table Tag Attributes Detail Explanation.
- <table> tag – कम्पलीट टेबल स्ट्रक्चर लेआउट के लिए एक कंटेनर है.
- <thead> tag – टेबल में फर्स्ट रौ हैडिंग इनफार्मेशन प्रीव्यू करता है.
- <tbody> tag – टेबल में लिखे गए टेबल बॉडी रो के लिए इनफार्मेशन होल्डर है.
- <tr> tag – टेबल में नंबर ऑफ़ न्यू रौ क्रिएट करता है.
- <th> tag – टेबल हेडर सेल इनफार्मेशन को क्रिएट कर डिस्प्ले करता है.
- <td> tag – टेबल डेटा सेल एलिमेंट को क्रिएट कर डिस्प्ले करता है.
