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)

🧱 Basic 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

← PreviousNext →