HTML in Hindi – Table tag

  • 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

Table tag in html in hindi, html table tag in hindi, table tag 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 टैग का उदाहरण देखें। यह आउटपुट ऊपर दिखाया गया है।

  1. <table>  
  2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
  3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
  4. <tr><td>James</td><td>William</td><td>80</td></tr>  
  5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
  6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
  7. </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 नहीं किया गया है।

 

  1. <table border="1">  
  2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
  3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
  4. <tr><td>James</td><td>William</td><td>80</td></tr>  
  5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
  6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
  7. </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 की गई है।

  1. <style>  
  2. table, th, td {  
  3.   border: 1px solid black;  
  4. }  
  5. </style> 

आप border-collapse property द्वारा एक border में सभी borders को collapse कर सकते हैं। यह borders को एक में समेट देगा।

  1. <style>  
  2. table, th, td {  
  3.   border: 2px solid black;  
  4.   border-collapse: collapse;  
  5. }  
  6. </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 का कोड देखते हैं।

 

  1. <style>  
  2. table, th, td {  
  3.   border: 1px solid pink;  
  4.   border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.   padding: 10px;  
  8. }  
  9. </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 प्रदर्शित करने के लिए उदाहरण है।

  1. table{  
  2.      width: 100%;   
  3.     }  

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>table</title>  
  5.     <style>  
  6.         table{  
  7.             border-collapse: collapse;  
  8.             width: 100%;   
  9.         }  
  10.     th,td{  
  11.         border: 2px solid green;   
  12.         padding: 15px;  
  13.     }  
  14.                
  15.     </style>  
  16.   </head>  
  17. <body>  
  18.   <table>  
  19.     <tr>  
  20.         <th>1 header</th>  
  21.         <th>1 header</th>  
  22.         <th>1 header</th>  
  23.     </tr>  
  24.     <tr>  
  25.         <td>1data</td>  
  26.         <td>1data</td>  
  27.         <td>1data</td>  
  28.     </tr>  
  29.     <tr>  
  30.         <td>2 data</td>  
  31.         <td>2 data</td>  
  32.         <td>2 data</td>  
  33.     </tr>  
  34.     <tr>  
  35.         <td>3 data</td>  
  36.         <td>3 data</td>  
  37.         <td>3 data</td>  
  38.     </tr>  
  39. </table>  
  40. </body>  
  41. </html>  

Output:

html table width

HTML Table with colspan

यदि आप cell column को एक से अधिक कॉलम बनाना चाहते हैं, तो आप colspan attribute का उपयोग कर सकते हैं।

यह एक cell/row को कई column में divide करेगा, और column की संख्या colspan attribute के value पर निर्भर करती है।

आइए दो columns के span का उदाहरण देखें।

CSS code:

  1. <style>  
  2. table, th, td {  
  3.   border: 1px solid black;  
  4.   border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.   padding: 5px;  
  8. }  
  9. </style>  

HTML code:

  1. <table style="width:100%">  
  2.   <tr>  
  3.   <th>Name</th>  
  4.   <th colspan="2">Mobile No.</th>  
  5.   </tr>  
  6.   <tr>  
  7.   <td>Ajeet singh</td>  
  8.   <td>7xxxxxxx21</td>  
  9.   <td>9xxxxxxx35</td>  
  10.   </tr>  
  11. </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:

  1. <style>  
  2. table, th, td {  
  3.   border: 1px solid black;  
  4.   border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.   padding: 10px;  
  8. }  
  9. </style>  

HTML code:

  1. <table>    
  2. <tr><th>Name</th><td>Ajit Maurya</td></tr>    
  3. <tr><th rowspan="2">Mobile No.</th><td>7xxxxxxx01</td></tr>    
  4. <tr><td>9xxxxxxx35</td></tr>    
  5. </table>   

Output:

Name Ajit Maurya
Mobile No. 7xxxxxxx01
9xxxxxxx35

HTML table with Caption

HTML caption table के ऊपर display किया गया है। इसका उपयोग टेबल टैग के बाद ही किया जाना चाहिए।

  1. <table>  
  2. <caption>Student Records</caption>  
  3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
  4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>  
  5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>  
  6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>  
  7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>  
  8. </table>  

 

Styling HTML table even and odd cells

CSS code:

  1. <style>  
  2. table, th, td {  
  3.   border: 1px solid black;  
  4.   border-collapse: collapse;  
  5. }  
  6. th, td {  
  7.   padding: 10px;  
  8. }  
  9. table#alter tr:nth-child(even) {  
  10.   background-color: #eee;  
  11. }  
  12. table#alter tr:nth-child(odd) {  
  13.   background-color: #fff;  
  14. }  
  15. table#alter th {  
  16.   color: white;  
  17.   background-color: gray;  
  18. }  
  19. </style>  

Output:

html table even and odd

Leave a Reply

DMCA.com Protection Status