html table basics

Table of Contents

1 HTML table introduction in hindi
2 HTML table को basically three-section में divided कर सकते है|
3 HTML Table colspan and rowspan attributes
4 HTML Table cellpadding and cellspacing attributes
5 HTML Table backgrounds attributes
6 HTML Table WIDTH & HEIGHT attributes
7 HTML Table caption
8 Nested Table

HTML table introduction in hindi

HTML table, data को row और column के formate में manage करता है| HTML में table को और tags से create कर सकते है| और table के अंदर table row और tags से create कर सकते है|

Table row में एक से ज्यादा table data को create कर सकते है| जिसमे perticuler data table data ke cell में manage होते है| table row में table data को सेट करने के लिए और tags का इस्तेमाल होता है|

HTML tables में row header , column header set करने के लिए और tags का उपयोग होता है| सामान्य तोर पर HTML tables create करने के लिए <table>,<tr>,<th>,<td> elements का इस्तेमाल किया जाता है|

HTML table को basically three-section में divided कर सकते है|

Table header <thead>
Table body <tbody>
Table footer <tfoot>

Table header

HTML <thead> elements html table का header defind करता है|<thead>, <tbody>और <tfoot>के साथ लिखा जाता है| <thead> element को <tbody>और <tfoot> elements के पहले लिखा जाता है| <thead> elements के अंदर table row <tr> लिख सकते है|

<table>
<thead><---table header->
  <tr>
     <th>Name</th>
     <th>Hobby</th>
     <th>Gender</th>
   </tr>
 </thead>
  <body><----table body->
     Table body
   </tbody>
   <tfoot><-----table footer->
     Table footer
   </tfoot>
</table>

output

Name	Hobby	Gender
	Define Table body…
	Define table footer

table body

<tbody> element HTML table की body define करता है| HTML table body को <tbody>opening और </tbody>closing tags के साथ लिखा जाता है| </tbody>element को <thead> और <tfoot> element के बीच में define किया जाता है| <tbody> और </tbody> tags के बीच में एक से ज्यादा table row <tr> को सेट कर सकते है|

Basic table body setup structure

<tbody>
  <tr><!---table row1->
     <td>define table body cell1</td>
     <td>define table body cell2</td>
  </tr>
 <tr><!---table row2-> 
    <td>define table body cell1</td>
    <td>define table body cell2</td>
 </tr>
</tbody>

Basic HTML Table structure with table <tbody>

<table>
<thead><---table header->
  <tr>
     <th>Name</th>
     <th>Hobby</th>
     <th>Gender</th>
   </tr>
 </thead>
  <tbody>
    <tr>
      <td>GARRY</td>
      <td>SING A SONG</td>
      <td>MALE</td>
    </tr>
    <tr>
      <td>NICK</td>
      <td>PLAYING CRICKET</td>
      <td>MALE</td>
     </tr>
     <tr>
       <td>JOHN</td>
       <td>READING</td>
       <td>MALE</td>
     </tr>
   </tbody>
   <tfoot>
     Table footer
   </tfoot>
</table>

output

Name	Hobby	Gender
GARRY	SING A SONG	MALE
NICK	PLAYING CRICKET	MALE
JOHN	READING	MALE

Table footer

<tfoot> element HTML table कl footer define करता है| HTML table footer को <tfoot>opening और </tfoot>closing tags के साथ लिखा जाता है| </tfoot>element को <thead> और <tbody> element के last में define किया जाता है| <tfoot> और </tfoot> tags के बीच में एक से ज्यादा table row <tr> को सेट कर सकते है|

Basic table footer setup structure

<tfoot>
  <tr><!---table row1->
     <td>define table footer cell1</td>
     <td>define table footer cell2</td>
  </tr>
 <tr><!---table row2-> 
    <td>define table footer cell1</td>
    <td>define table footer cell2</td>
 </tr>
</tfoot>

Basic HTML Table structure with table <tfoot>

<table>
<thead><---table header->
  <tr>
     <th>Name</th>
     <th>Hobby</th>
     <th>Gender</th>
   </tr>
 </thead>
  <tbody>
    <tr>
      <td>GARRY</td>
      <td>SING A SONG</td>
      <td>MALE</td>
    </tr>
    <tr>
      <td>NICK</td>
      <td>PLAYING CRICKET</td>
      <td>MALE</td>
     </tr>
     <tr>
       <td>JOHN</td>
       <td>READING</td>
       <td>MALE</td>
     </tr>
   </tbody>
   <tfoot>
     <tr>
       <td>Name</td>
       <td>Gender</td>
     </tr>
     <tr> 
       <td>Jony</td>
       <td>Male</td>
     </tr>
   </tfoot>
</table>

output

Name	Hobby	Gender
GARRY	SING A SONG	MALE
NICK	PLAYING CRICKET	MALE
JOHN	READING	MALE
Name	Gender
Jony	Male

HTML Table colspan and rowspan attributes

HTML table में colspan attribute दो और उससे ज्यादा column को एक column में merge करने के लिए table में इस्तेमाल किया जाता है| इसी तरह rowspan attribute ये बी दो और इससे ज्यादा row को एक ही row में merge कर देता है|

colsapn example

<tr>
  <td colspan="3">Row 3 Cell 1</td>
<tr>

rowspan example

<tr>
    <td rowspan="2">Group B</td>
    <td>Raman</td>
    <td>10k</td>
</tr>

Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan and Rowspan</title>
   </head>
	
   <body>
   <table border="1">
    <tbody>
     <tr>
       <th>Group</th>
       <th>Name</th>
       <th>salary</th>
     </tr>
     <tr>
      <td rowspan="2">Group A</td>
      <td>Ronny</td>
      <td>20k</td>
     </tr>
     <tr>
      <td>Ruhi</td>
      <td>18k</td>
     </tr>
     <tr>
       <td rowspan="2">Group B</td>
       <td>Raman</td>
       <td>10k</td>
     </tr>
     <tr>
      <td>takes</td>
      <td>8k</td>
     </tr>
     <tr>
      <td colspan="3">Row 3 Cell 1</td>
     </tr>
   </tbody>
</table>
</body>
</html>

output

HTML Table cellpadding and cellspacing attributes

HTML table me cellspacing attribute का इस्तेमाल cells के बीच में spacing सेट करने के लिए होता है| और HTML table me cellpadding का इसका इस्तेमाल cells के अंदर की और से spacing सेट करने के लिए होता है |

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

हम ऊपर image देख सकते है की cells के अंदर white spacing text के आसपास दिखाय दे रही है और इस text के आसपास में white spacing सेट करने के लिए cellpadding का इस्तेमाल किया है|

table tr td{ 
    padding:15px;
}

हम ऊपर image देख सकते है की cells के बीच ने spacing सेट दिखाय दे रही है और इस cells के बीच में spacing सेट करने के लिए cellspacing का इस्तेमाल किया है|

HTML Table backgrounds attributes

HTML table में bgcolor और background ये attributes का इस्लेमाल table में या table के perticuler cell में background color सेट करने के लिए होता है| जिसमे ये background attribute से हम table के background में images रख (set) कर सकते है|

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan and Rowspan</title>
   </head>
	
   <body>
   <table border="0" bgcolor="red">
    <tbody>
     <tr>
       <th>Group</th>
       <th>Name</th>
       <th>salary</th>
     </tr>
     <tr>
      <td rowspan="2">Group A</td>
      <td>Ronny</td>
      <td>20k</td>
     </tr>
     <tr>
      <td>Ruhi</td>
      <td>18k</td>
     </tr>
     <tr>
       <td rowspan="2">Group B</td>
       <td>Raman</td>
       <td>10k</td>
     </tr>
     <tr>
      <td>takes</td>
      <td>8k</td>
     </tr>
     <tr>
      <td colspan="3">Row 3 Cell 1</td>
     </tr>
   </tbody>
</table>
</body>
</html>

HTML Table WIDTH & HEIGHT attributes

HTML table की width और height,table में width और height attribute का इस्तेमाल करके सेट कर सकते है| width और height value हम “px,%” में रख सकते है|

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan and Rowspan</title>
   </head>
	
   <body>
   <table border="0" width="400px" height="400px">
    <tbody>
     <tr>
       <th>First-Name</th>
       <th>Last-Name</th>
       <th>City</th>
     </tr>
     <tr>
      <td>tom</td>
      <td>danny</td>
      <td rowspan="2">newyork</td> 
     </tr>
     <tr>
      <td>dev</td>
      <td>david</td>
     </tr>
     <tr>
       <td>lisa</td>
       <td>lussy</td>
       <td rowspan="2">landon</td>
     </tr>
     <tr>
      <td>somiya</td>
      <td>alita</td>
     </tr>
   </tbody>
</table>

output

HTML Table caption

HTML table में <caption>tag table का caption(title) दिखता है| HTML table में <caption> tag को <table>tag के बाद में लिखा जाता है| table के <caption> tag में लिखा text by default center में होता है|

<caption>THIS IS TABLE CAPTION</caption>

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan and Rowspan</title>
   </head>
   <body>
   <table border="1" align="center">
    <caption>THIS IS TABLE CAPTION</caption>
    <tbody>
     <tr>
       <th>Group</th>
       <th>Name</th>
       <th>salary</th>
     </tr>
     <tr>
      <td rowspan="2">Group A</td>
      <td>Ronny</td>
      <td>20k</td>
     </tr>
     <tr>
      <td>Ruhi</td>
      <td>18k</td>
     </tr>
     <tr>
       <td rowspan="2">Group B</td>
       <td>Raman</td>
       <td>10k</td>
     </tr>
     <tr>
      <td>takes</td>
      <td>8k</td>
     </tr>
     <tr>
      <td colspan="3">Row 3 Cell 1</td>
     </tr>
   </tbody>
</table>
</body>
</html>

output

Nested Table

Nested table का मतलब की एक table की अंदर दूसरा table को add करना होता है| एक table के अंदर में दूसरे table के सभी elements ,tags को लिखा जाता है| तो उसे हम nested table कह सकते है|

<html>
<head>
<title> NestedTables </title>
</head>
<body align="center">
 <caption> <b>Caption of table</b> </caption>
  <table border="1px" align="center">
    <tr>
      <td >
        <table>
          <tr> <th> Nested Table 1 </th> </tr>
          <tr> 
            <th> table 1 header 1 </th> 
            <th> table 2 header 2 </th> 
          </tr>
          <tr> 
            <td> First Table data1 </td>
            <td> First Table data2 </td> 
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr> 
            <th> Nested Table 2 </th> 
          </tr>
          <tr>
            <td>
              <ul>
                <li> List item 1 </li>
                <li> List item 2 </li>
                <li> List item 3 </li>
              </ul>
            </td>
          </tr>
        </table> 
      </td>
    </tr>
    <tr>
      <td>
        <table>
          <tr> 
            <th colspan="2" align="center"> 
            Nested Table 3 
            </th> 
          </tr>
          <tr>
            <td> <a href=""> Nested Table3  </a> </td>
            <td> Nested Table3 data3 </td> </tr>
        </table>
      </td>
      <td>
        <table>
          <tr> 
            <th> Nested Table 4 </th> 
          </tr>
          <tr>
            <td> 
              Nested Table4 data4
            </td> 
          </tr> 
        </table>
      </td>
    </tr>
</table>
</body>
</html>

output

HTML table structure basics in hindi
Post Views : 76

HTML table introduction in hindi

HTML table को basically three-section में divided कर सकते है|

Table header

table body

Table footer

HTML Table colspan and rowspan attributes

HTML Table cellpadding and cellspacing attributes

HTML Table backgrounds attributes

HTML Table WIDTH & HEIGHT attributes

HTML Table caption

Nested Table

Leave a Comment Cancel Reply

Related Posts