HTML टेबल | HTML Table in Hindi

893
HTML टेबल

HTML table tag का इस्तेमाल डाटा को tabular form (row * column) में दिखाने के लिए होता है| एक row में कई column हो सकते हैं|

HTML tables का इस्तेमाल किसी पृष्ठ के layout के लिए किया जाता है जैसे कि header section, navigation bar, body content, footer section आदि| पर आजकल यह सुझाव दिया जाता है कि पृष्ठ के layout के लिए table tag की बजाय div tag का इस्तेमाल करना चाहिए|

HTML Table Tags

Tag Description
<table> यह table को परिभाषित (define) करता है|
<tr> यह table में row को परिभाषित (define) करता है|
<th> यह table में header cell को परिभाषित (define) करता है|
<td> यह table में cell को परिभाषित (define) करता है|
<caption> यह table caption को परिभाषित (define) करता है|
<colgroup> यह table में formatting के लिए एक या एक से ज्यादा columns के समूह को परिभाषित (define) करता है|
<col> इसका इस्तेमाल <colgroup> element के साथ प्रत्येक column के लिए column properties के बारे में बताने के लिए होता है|
<tbody> इसका इस्तेमाल body कंटेंट को table में समूह में रखने के लिए होता है|
<thead> इसका इस्तेमाल header कंटेंट को table में समूह में रखने के लिए होता है|
<tfooter> इसका इस्तेमाल footer कंटेंट को table में समूह में रखने के लिए होता है|

HTML Table Example

HTML table tag का उदाहरण देखें, आउटपुट नीचे दिखाया गया है|

  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>

ट्राई करें

Output

First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

ऊपर दिए गए table में 5 rows और 3 columns हैं = 5*3= 15 values

HTML Table with Border

HTML tables के लिये border का दो तरह से इस्तेमाल किया जा सकता है|

  1. HTML में table के border attribute द्वारा
  2. CSS में border property के द्वारा

HTML Border attribute

आप border के बारे में बताने के लिये HTML में table tag के border attribute का इस्तेमाल कर सकते हो, परन्तु आजकल इसके इस्तेमाल का सुझाव नही दिया जाता|

  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 के इस्तेमाल का सुझाव दिया जाता है|

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

ट्राई करें

आजमा कर देखेंआप border-collapse property की मदद से सभी borders को एक border में बदल सकते हो

  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 cell padding के साथ

आप दो प्रकार से table header और table data के लिये padding specify कर सकते हो|

  1. HTML में table के cellpadding attribute द्वारा
  2. CSS में padding property द्वारा

HTML का cellpadding attribute अब चलन में नहीं है|CSS के इस्तेमाल का सुझाव दिया जाता है| इसलिए आओ देखें CSS का code कैसा होता है|

  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 colspan के साथ

अगर आप cell को एक से ज्यादा column में फैलाना (span) चाहते हो तो आप colspan attribute का इस्तेमाल कर सकते हो|

ओ एक उदाहरण देखें जिसमे दो column 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 Maurya</td>
  8.     <td>7503520801</td>
  9.     <td>9555879135</td>
  10.   </tr>
  11. </table>

ट्राई करें

Output

Name Mobile No.
Ajeet Maurya 7503520801 9555879135

HTML Table rowspan के साथ

अगर आप cell को एक से ज्यादा row में फैलाना (span) चाहते हो तो आप rowspan attribute का इस्तेमाल कर सकते हो|

आओ एक उदाहरण देखें जिसमे दो 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>Ajeet Maurya</td></tr>
  3. <tr><th rowspan=“2”>Mobile No.</th><td>7503520801</td></tr>
  4. <tr><td>9555879135</td></tr>
  5. </table>

ट्राई करे

Output

Name Ajeet Maurya
Mobile No. 7503520801
9555879135

HTML table caption के साथ

HTML caption table के ऊपर दिखाया जाता है| इसे सिर्फ table tag के बाद इस्तेमाल करना चाहिए|

  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 Image

Supporting Browsers

Element chrome  Chrome ie  IE firefox  Firefox opera  Opera safari  Safari
<table> Yes