Table Tags
Last Updated: 01 Nov 2025
A table helps display information in rows and columns, just like an Excel sheet. We use <table> to create it, and inside it we use:
- <tr> → Table Row
- <th> → Table Header (bold by default)
- <td> → Table Data (normal cell)
- caption → Table Caption (below the table and it is optional)
Syntax
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
</tr>
</table>
🗣 Hinglish Tip: <tr> means ek row, <td> ek cell.<th> header hota hai — automatically bold aur center aligned.
Attributes for <table> (deprecated)
- border → Adds border around the table
- cellpadding → Adds space between cells
- cellspacing → Adds space between rows
- width → Sets the width of the table
Note : border, cellpadding, cellspacing,width are deprecated in HTML5. Use CSS instead.
Merging Cells — colspan & rowspan
- colspan → Merges cells horizontally
- rowspan → Merges cells vertically
Example
<table border="1">
<caption>
Student Marks
</caption>
<tr>
<th>Name</th>
<th colspan="2">Subjects</th>
</tr>
<tr>
<td>Ravi</td>
<td>Math</td>
<td>Science</td>
</tr>
<tr>
<td rowspan="2">Sita</td>
<td>English</td>
<td>Hindi</td>
</tr>
<tr>
<td>History</td>
<td>Geography</td>
</tr>
</table>
Table Selection Tag — <thead>, <tbody>, <tfoot>
- <thead> → Table Header use to Wraps header rows
- <tbody> → Table Body use to Wraps main data
- <tfoot> → Table Footer use to Summary or total rows
Example
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pen</td>
<td>10</td>
</tr>
<tr>
<td>Notebook</td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<th>60</th>
</tr>
</tfoot>
</table>
🗣 Hinglish Tip: Table ko thead, tbody, tfoot se divide karne se structure clear hota hai — especially jab data zyada ho.
Quick Practice
