HTML TABLE

What is HTML Table?

Table tag is used to bring any data into Structure Form. Which makes the web page attractive to look at and makes the page look good.

In HTML, tables are defined by the <table> tag.

The table is started by <table> and end by </table>.

Syntax of HTML Table:

<table> .................. </table>

Define or use the following in an HTML table:

  • tr - The row in each table is defined by <tr> Tag.
  • th - The header of the table is defined by <th> Tag.
  • td - The data present in the table is defined by <td> Tag.

Example:

<! DOCTYPE html>
<html>
     <head>
          <title> Basic HTML Table </title>
     </head>
<body>
     <h2>Basic HTML Table</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output:

Basic HTML Table

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25

HTML टेबल क्या है?

किसी भी Data को Structure Form में लाने के लिए Table tag का उपयोग किया जाता हैं। जिससे web page देखने में attractive और page की बनावट अच्छी लगती हैं।

HTML में Table को <table> टैग द्वारा define किया जाता हैं।

Table को <table> द्वारा start और </table> द्वारा end किया जाता हैं।

Syntax of HTML Table:

<table> .................. </table>

HTML Table में निम्न को Define या उपयोग किया जाता हैं:

  • tr - हर table में row को <tr> Tag द्वारा define किया जाता हैं।
  • th - <th> Tag द्वारा table के header को define किया जाता हैं।
  • td - <td> Tag द्वारा table में present डाटा को define किया जाता हैं।

Example:

<! DOCTYPE html>
<html>
     <head>
          <title> Basic HTML Table </title>
     </head>
<body>
     <h2>Basic HTML Table</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output:

Basic HTML Table

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25

Table of Contents (सामग्री तालिका)

We will define the given contents as one by one.
हम दिये हुए Contents को one by one define करेंगे:

  1. HTML Table - Add a Border
  2. HTML Table - Collapse Borders
  3. HTML Table - Add Cell Padding
  4. HTML Table - Left Align Property
  5. HTML Table - Add Border Spacing
  6. HTML Table - Cell that Spans Many Columns
  7. HTML Table - Cell that Spans Many Rows
  8. HTML Table - Add a Caption
  9. HTML Table - A Special Style for One Table

Add a Border in HTML Table

If you need to put the HTML Table tag in proper structure then the border attribute is used.

You can also use border by adding style property to tag.

You can make the border more or less according to your liking and it is in px (pixel).

If you do not show the border in code, it will not show in the output.

Example:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add a Border</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Add a Border

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25

HTML टेबल में एक बॉर्डर जोड़ें

यदि आपको HTML Table tag को proper structure में लाना है तो border attribute का उपयोग किया जाता हैं।

आप border का उपयोग tag में style property लगाकर भी कर सकते हो।

border को आप अपने हिसाब से कम या ज्यादा कर सकते हो और यह px(pixel) में होते हैं।

यदि आप border को code में show नहीं करते हो तो यह output में show नहीं होंगे।

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add a Border</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Add a Border

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25


Collapse Border in HTML Table

In Add a Border, you must have seen that 2 lines of border are visible, which is not good to see.

You can use the collapsed border attribute in it. So that it will be changed to single line.

Example:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Collapse Border</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Collapse Border

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25

HTML Table में Border को संक्षिप्त (Collapse) करें

Add a Border में आपने देखा होगा कि border की 2 lines दिखाई दे रहीं हैं, जो देखने में अच्छी नहीं लग रही है।

इसमें collapsed border attribute का use कर सकते हो। जिससे यह single line में बदल जायेगा।

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Collapse Border</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Collapse Border

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25


Add Cell Padding in HTML Table

The padding attribute is used to increase the space between the border and the data inside the table cell.

It is also a CSS property and is used inside the style.

It is defined through padding.

Example:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
               th, td {
                       padding: 10px;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add Cell Padding</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Add Cell Padding

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25

HTML Table में Cell Padding जोड़ें

Table cell के अंदर border और data के बीच में space बढ़ाने के लिए padding attribute का उपयोग किया जाता हैं।

यह भी एक CSS की property है और style के अंदर use होती हैं।

इसको padding के जरिये define किया जाता हैं।

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
               th, td {
                       padding: 10px;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add Cell Padding</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Add Cell Padding

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25


Left Align Property in HTML Table

HTML table heading by default bold and centered.

The text-align property is used to bring it into Left Align.

Example:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
               th, td {
                       padding: 10px;
               }
               th {
                       text-align: left;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add Cell Padding</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Left Align Headings

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25

HTML Table में बाएँ संरेखित गुण (Left Align Property)

HTML Table heading by default bold and center में होता हैं।

इसको Left Align में लाने के लिए text-align property का उपयोग किया जाता हैं।

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
               th, td {
                       padding: 10px;
               }
               th {
                       text-align: left;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add Cell Padding</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Left Align Headings

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25


Add Border Spacing in HTML Table

Through Border Spacing you can add spacing to one cell and another cell.

The border-spacing property is used in style to define it in HTML.

Example:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         padding: 10px;
               }
               table {
                       border-spacing: 10px;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add Cell Padding</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Add Border Spacing

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25

HTML Table में बॉर्डर रिक्ति (Border Spacing) जोड़ें

Border Spacing के जरिये आप एक cell और दूसरे cell में spacing add कर सकते हो।

इसको HTML में define करने के लिए style में border-spacing property का उपयोग किया जाता हैं।

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         padding: 10px;
               }
               table {
                       border-spacing: 10px;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add Cell Padding</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Add Border Spacing

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25


Cell that Spans Many Columns in HTML Table

Cell Span Columns are defined by colspan in the HTML table.

As if suppose Ajay has two mobile numbers and we have to show both the mobile numbers in the same column, then colspan is used in such a situation.

If we do not do this, then the table will be miss-match. Which will not show any good looks.

Example:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
                         padding: 8px;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add Cell Padding</h2>
     <table style="width:100%">
          <tr>
               <th>Name</th>
               <th colspan="2">Mobile No.</th> 
          </tr>
          <tr>
               <td>Ajay</td>
               <td>7741562477</td>
               <td>8745907645</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>8878821923</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>6261789065</td>
               <td>8075643789</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Cell that Spans Many Columns

Name Mobile No.
Ajay 7741562477 8745907645
Naveen 8878821923
Harshad 6261789065 8075643789

Cell जो HTML Table में कई Columns को फैलाती हैं

HTML Table में Cell Span Columns को colspan द्वारा define किया जाता हैं।

जैसे की मान लीजिये Ajay के पास दो Mobile नंबर हैं और हमें दोनों मोबाइल नंबर एक ही column में show करवाने हैं तो ऐसी situation में colspan का उपयोग किया जाता हैं।

यदि ऐसा नहीं करेंगे तो table का miss-match हो जायेगा। जो की देखने में बिलकुल आच्छा नहीं दिखेगा।

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
                         padding: 8px;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add Cell Padding</h2>
     <table style="width:100%">
          <tr>
               <th>Name</th>
               <th colspan="2">Mobile No.</th> 
          </tr>
          <tr>
               <td>Ajay</td>
               <td>7741562477</td>
               <td>8745907645</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>8878821923</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>6261789065</td>
               <td>8075643789</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Cell that Spans Many Columns

Name Mobile No.
Ajay 7741562477 8745907645
Naveen 8878821923
Harshad 6261789065 8075643789


Cell that Spans Many Rows in HTML Table

This is defined by the rowspan gate.

Cell Span Rows also function like Span Columns.

But the only difference is that it increases the rows and surrounds the columns.

Example:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
               th, td {
                         padding: 8px;
                         text-align: left;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add Cell Padding</h2>
     <table style="width:100%">
          <tr>
               <th>Name</th>
               <td>Ajay</td>
               <td>Naveen</td>
               <td>Harshad</td>
          </tr>
          <tr>
               <th rowspan="2">Mobile No.</th> 
               <td>7741562477</td>
               <td>8878821923</td>
               <td>6261789065</td>
          </tr>
          <tr>
               <td>8745907645</td>
               <td></td>
               <td>8075643789</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Cell that Spans Many Rows

Name Ajay Naveen Harshad
Mobile No. 7741562477 8878821923 6261789065
8745907645 8075643789

Cell जो HTML Table में कई Rows को फैलाती हैं

इसे rowspan द्वार define किया जाता हैं।

Cell Span Rows भी Span Columns की तरह ही काम करता हैं।

लेकिन इसमें फर्क बस इतना होता है कि यह rows को increase करता है और columns को घेरता हैं।

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
               th, td {
                         padding: 8px;
                         text-align: left;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add Cell Padding</h2>
     <table style="width:100%">
          <tr>
               <th>Name</th>
               <td>Ajay</td>
               <td>Naveen</td>
               <td>Harshad</td>
          </tr>
          <tr>
               <th rowspan="2">Mobile No.</th> 
               <td>7741562477</td>
               <td>8878821923</td>
               <td>6261789065</td>
          </tr>
          <tr>
               <td>8745907645</td>
               <td></td>
               <td>8075643789</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Cell that Spans Many Rows

Name Ajay Naveen Harshad
Mobile No. 7741562477 8878821923 6261789065
8745907645 8075643789


Add a Caption in HTML Table

To add a caption to an HTML table, & lt; caption & gt; Tags are used.

If you want to give a name for the table, that too <caption> Can be provided with the help of tag.

This will make it easy for the user to understand the table and it will be easy to know what the table is about.

Example:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
               th, td {
                       padding: 10px;
                       text-align: left;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add a Caption</h2>
     <table style="width:100%">
     <caption>This is a Caption</caption>
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Add a Captiion

This is Caption
Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25

HTML Table में एक कैप्शन (Caption) जोड़ें

किसी HTML Table में Caption जोड़ने के लिए, <caption> टैग का उपयोग किया जाता हैं।

यदि आप Table का कोई नाम देना चाहते हैं तो वह भी <caption> tag की help से दे सकते हैं।

इससे user को table समझने में आसानी होगी और यह पता आसानी से लगेगा की table किस बारे में हैं।

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
               th, td {
                       padding: 10px;
                       text-align: left;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Add a Caption</h2>
     <table style="width:100%">
     <caption>This is a Caption</caption>
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Add a Captiion

This is Caption
Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25


A Special Style for One in HTML Table

Example:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Style Table</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Style Table

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25

HTML Table में एक के लिए एक विशेष शैली (Special Style)

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <style>
               table, th, td {
                         border: 1px solid black;
                         border-collapse: collapse;
               }
          </style>
     </head>
<body>
     <h2>HTML Table - Style Table</h2>
     <table style="width:100%">
          <tr>
               <th>Firstname</th>
               <th>Lastname</th> 
               <th>Age</th>
          </tr>
          <tr>
               <td>Ajay</td>
               <td>Pagare</td>
               <td>23</td>
          </tr>
          <tr>
               <td>Naveen</td>
               <td>Pagare</td>
               <td>22</td>
          </tr>
          <tr>
               <td>Harshad</td>
               <td>Khole</td>
               <td>25</td>
          </tr>
     </table>
</body>
</html>

Output

HTML Table - Style Table

Firstname Lastname Age
Ajay Pagare 23
Naveen Pagare 22
Harshad Khole 25