- Introduction to HTML Table tag in hindi
- HTML Table Tags in hindi
- HTML Table Example in hindi
- HTML Table with Border in hindi
- HTML Border attribute in hindi
- CSS Border property in hindi
- HTML Table width in hindi
- HTML Table with colspan in hindi
- HTML Table with rowspan in hindi
- HTML table with Caption in hindi
- Styling HTML table even and odd cells in hindi
Introduction HTML Table tag in hindi
HTML table tag का उपयोग tabular form (row * column) में डेटा प्रदर्शित करने के लिए किया जाता है। एक row में कई column हो सकते हैं।
हम <table> element, <tr>, <td>, और <th> elements की मदद से tabular form में डेटा प्रदर्शित करने के लिए एक table बना सकते हैं।
प्रत्येक table में, table row को <tr> टैग द्वारा परिभाषित किया जाता है, table header को <th> द्वारा परिभाषित किया जाता है, और table data <td> टैग द्वारा परिभाषित किया गया है।
HTML tables का उपयोग page के layout को manage करने के लिए किया जाता है जैसे header section, navigation bar, body content, footer section आदि। लेकिन पेज के लेआउट को प्रबंधित करने के लिए table पर div टैग का उपयोग करने की सलाह दी जाती है।
HTML Table Tags in hindi
| Tag | Description |
| <Table> | यह एक table को परिभाषित करता है। |
| <Tr> | यह एक table में एक row को परिभाषित करता है। |
| <Th> | यह एक table में एक header cell को परिभाषित करता है। |
| <Td> | यह एक table में एक cell को परिभाषित करता है। |
| <caption> | यह table caption को परिभाषित करता है। |
| <Colgroup> | यह formatting के लिए एक table में एक या अधिक columns के समूह को specify करता है। |
| <Col> | इसका उपयोग प्रत्येक column के लिए column properties को specify करने के लिए <colgroup> element के साथ किया जाता है। |
| <Tbody> | इसका उपयोग body की content को एक table में समूहित करने के लिए किया जाता है। |
| <Thead> | इसका उपयोग header content को table में समूहित करने के लिए किया जाता है। |
| <Tfooter> | इसका उपयोग किसी table में footer content को समूहीकृत करने के लिए किया जाता है। |
HTML Table Example
आइए HTML table टैग का उदाहरण देखें। यह आउटपुट ऊपर दिखाया गया है।
<table><tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr><tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr><tr><td>James</td><td>William</td><td>80</td></tr><tr><td>Swati</td><td>Sironi</td><td>82</td></tr><tr><td>Chetna</td><td>Singh</td><td>72</td></tr></table>
आउटपुट:
| First_Name | Last_Name | Marks |
|---|---|---|
| Sonoo | जायसवाल | 60 |
| जेम्स | विलियम | 80 |
| स्वाति | Sironi | 82 |
| चेतना | सिंह | 72 |
उपरोक्त html table में, 5 rows और 3 column = 5 * 3 = 15 value हैं।
HTML Table with Border in hindi
HTML tables के लिए border specify करने के दो तरीके हैं।
- HTML में table की border attribute के द्वारा
- CSS में border property द्वारा
1) HTML Border attribute
Border specify करने के लिए आप HTML में टेबल टैग की border attribute का उपयोग कर सकते हैं। लेकिन अभी इसको recommend नहीं किया गया है।
<table border="1"><tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr><tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr><tr><td>James</td><td>William</td><td>80</td></tr><tr><td>Swati</td><td>Sironi</td><td>82</td></tr><tr><td>Chetna</td><td>Singh</td><td>72</td></tr></table>
Output:
| First_Name | Last_Name | Marks |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
2) CSS Border property
अब table में border specify करने के लिए CSS की border property का उपयोग करने की recommendation की गई है।
<style>table, th, td {border: 1px solid black;}</style>
आप border-collapse property द्वारा एक border में सभी borders को collapse कर सकते हैं। यह borders को एक में समेट देगा।
<style>table, th, td {border: 2px solid black;border-collapse: collapse;}</style>
Output:
| Name | Last Name | Marks |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
HTML Table with cell padding
आप table header और table data के लिए दो तरीकों से padding specify कर सकते हैं:
- HTML में table की cellpadding attribute द्वारा
- CSS में padding property द्वारा
HTML टेबल टैग की cell padding attribute अब obselete है। CSS का उपयोग करने को recommend किया गया है। तो चलिए CSS का कोड देखते हैं।
<style>table, th, td {border: 1px solid pink;border-collapse: collapse;}th, td {padding: 10px;}</style>
Output:
| Name | Last Name | Marks |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
HTML Table width:
हम CSS Table property का उपयोग करके HTML table width specify कर सकते हैं। इसे pixel या प्रतिशत में specify किया जा सकता है।
हम अपनी आवश्यकता के अनुसार अपनी table width adjust कर सकते हैं। निम्नलिखित width के साथ table प्रदर्शित करने के लिए उदाहरण है।
table{width: 100%;}
Example:
<!DOCTYPE html><html><head><title>table</title><style>table{border-collapse: collapse;width: 100%;}th,td{border: 2px solid green;padding: 15px;}</style></head><body><table><tr><th>1 header</th><th>1 header</th><th>1 header</th></tr><tr><td>1data</td><td>1data</td><td>1data</td></tr><tr><td>2 data</td><td>2 data</td><td>2 data</td></tr><tr><td>3 data</td><td>3 data</td><td>3 data</td></tr></table></body></html>
Output:
HTML Table with colspan
यदि आप cell column को एक से अधिक कॉलम बनाना चाहते हैं, तो आप colspan attribute का उपयोग कर सकते हैं।
यह एक cell/row को कई column में divide करेगा, और column की संख्या colspan attribute के value पर निर्भर करती है।
आइए दो columns के span का उदाहरण देखें।
CSS code:
<style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 5px;}</style>
HTML code:
<table style="width:100%"><tr><th>Name</th><th colspan="2">Mobile No.</th></tr><tr><td>Ajeet singh</td><td>7xxxxxxx21</td><td>9xxxxxxx35</td></tr></table>
Output:
| Name | Mobile No. | |
|---|---|---|
| Ajeet singh | 7xxxxxxx21 | 9xxxxxxx35 |
HTML Table with rowspan
यदि आप एक से अधिक row में cell span बनाना चाहते हैं, तो आप rowspan aatribute का उपयोग कर सकते हैं।
यह एक cell को कई rows में विभाजित करेगा। विभाजित rows की संख्या rowspan values पर निर्भर करेगी।
आइए दो rows के span का उदाहरण देखें।
CSS code:
<style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 10px;}</style>
HTML code:
<table><tr><th>Name</th><td>Ajit Maurya</td></tr><tr><th rowspan="2">Mobile No.</th><td>7xxxxxxx01</td></tr><tr><td>9xxxxxxx35</td></tr></table>
Output:
| Name | Ajit Maurya |
|---|---|
| Mobile No. | 7xxxxxxx01 |
| 9xxxxxxx35 |
HTML table with Caption
HTML caption table के ऊपर display किया गया है। इसका उपयोग टेबल टैग के बाद ही किया जाना चाहिए।
<table><caption>Student Records</caption><tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr><tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr><tr><td>Mike</td><td>Warn</td><td>60</td></tr><tr><td>Shane</td><td>Warn</td><td>42</td></tr><tr><td>Jai</td><td>Malhotra</td><td>62</td></tr></table>
Styling HTML table even and odd cells
CSS code:
<style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 10px;}table#alter tr:nth-child(even) {background-color: #eee;}table#alter tr:nth-child(odd) {background-color: #fff;}table#alter th {color: white;background-color: gray;}</style>
Output:
