HTML Table ये तालिका रूप के data का वर्णन करता है | इन tables में rows और columns में data को represent किया जाता है |

HTML में table को create करने के लिए <table> tag का इस्तेमाल किया जाता है |

एक table में एक से ज्यादा rows होते है | एक single row को define करने के लिए <tr> tag का इस्तेमाल किया जाता है |

row के हर table header को define करने के लिए <th> tag का इस्तेमाल किया जाता है | <th> tag ये by default दिया हुआ text ये bold और aligning; center(middle) होता है |

table row के हर data cell को define करने के लिए <td> tag का इस्तेमाल किया जाता है | ये data cells पर दिया जानेवाला data ये left align होता है |

इन data में text, images, links, list, table या HTML का कोई भी element हो सकता है |

Create Table in HTML

Example पर एक simple table को create को create किया गया है |

<table>
<tr>                  <!-- Row 1 -->
<th>Header 1</th> 
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>                  <!-- Row 2 -->
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>                  <!-- Row 3 -->
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr> 
<tr>                  <!-- Row 4 -->
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</table>

Output :

border Attribute for <table> tag in HTML

अगर आप border नहीं देते हा तो, आपको बिना border table दिखेगा | इस example में हमने border attribute को दिया है | border attribute की मदद से हर data cell को और पूरे table को separate border दी जाती है | इन data cells के borders; cellspacing की वजह से दिखाई देती है | अगर आप cellspacing="0" कर देते हो तो ये borders एक-दूसरे से मिल जाएँगी और अलग से नजर नहीं आएगी |

<table border="1">
<tr>                  <!-- Row 1 -->
<th>Header 1</th> 
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>                  <!-- Row 2 -->
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>                  <!-- Row 3 -->
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr> 
<tr>                  <!-- Row 4 -->
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</table>

Output :

cellspacing Attribute for <table> tag in HTML

cellspacing ये दो cells के बीच का space होता है | अगर cellspacing; 0 होता है तो दो cells के बीच में कोई space नहीं होता है | cellspacing; by default '2' होता है |

cellspacing के बजाय style="border-collapse:collapse;" का इस्तेमाल करना ही बेहतर रहेगा |

<table border="1" cellspacing="0">
<-- For Better use <table border="1" style="border-collapse:collapse;"> -->
<tr>                  <!-- Row 1 -->
<th>Header 1</th> 
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>                  <!-- Row 2 -->
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>                  <!-- Row 3 -->
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr> 
<tr>                  <!-- Row 4 -->
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</table>

Output :

cellpadding Attribute for <table> tag in HTML

cellpadding ये border और data cell के बीच का अंतर होता है | cellpadding; by default '1' होता है |

<table border="1" cellpadding="5">
<tr>                  <!-- Row 1 -->
<th>Header 1</th> 
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>                  <!-- Row 2 -->
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>                  <!-- Row 3 -->
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr> 
<tr>                  <!-- Row 4 -->
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</table>

Output :

rowspan Attribute for <table> tag in HTML

rowspan ये attribute दो या दो से ज्यादा rows को merge करता है |

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td rowspan="2">Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td rowspan="3">Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 3, Column 2</td>
</tr>
</table>

Output :

colspan Attribute for <table> tag in HTML

colspan ये attribute दो या दो से ज्यादा columns को merge करता है |

<table border="1">
<tr>
<th colspan="2">Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td colspan="3">Row 3, Column 1</td>
</tr>
</table>

Output :

width and height Attribute for <table> tag in HTML

width और height attribute से table के size को बदला जा सकता है |

table के width और height को बदलने के लिए style attribute का इस्तेमाल भी किया जाता है |

<table border="1" width="500" height="400">
<!-- same as <table border="1" style="width:500px;height:400px;"> -->
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Output :

Background Color(bgcolor) for <table> tag in HTML

Table के background color के लिए bgcolor attribute का इस्तेमाल किया जाता है | लेकिन bgcolor ये attribute HTML5 से हटा दिया गया है, इसे इस्तेमाल ना करना ही बेहतर रहेगा |

bgcolor attribute के बजाय style attribute का इस्तेमाल करे |

आप अलग-अलग data cells के लिए भी अलग-अलग background colors का इस्तेमाल कर सकते है |

<table border="1" bgcolor="red">
<-- for better use <table border="1" style="background-color:red;"> -->
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Output :

Add Caption to table in HTML

<caption> tag से table के लिए caption दिया जाता है | caption का aligning by default; center(middle) होता है |

<table border="1">
<caption>Table Data</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Output :