HTML Table Kya Hai - What are HTML Tables | Structure & Examples

HTML Tables Kya Hain?

HTML tables ka use structured data ko row aur column format mein dikhane ke liye hota hai. Ye ek systematic tareeke se information ko organize karne ka effective tarika hai. Tables mein hum text ke saath images, links, aur buttons bhi add kar sakte hain.

Tables ko web pages par data ko clearly aur systematically present karne ke liye use kiya jata hai. Har table <table> tag se shuru hoti hai, aur usme <tr> (table row), <th> (table header), aur <td> (table data) tags ka use hota hai.

Basic Table Structure:

<table border="1">
  <tr>
    <th>Naam</th>
    <th>Umar</th>
    <th>Shaher</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>25</td>
    <td>Delhi</td>
  </tr>
  <tr>
    <td>Neha</td>
    <td>22</td>
    <td>Mumbai</td>
  </tr>
</table>

Output:

Naam	Umar	Shaher
Amit	25	Delhi
Neha	22	Mumbai

<table> –
<table> tag ka use HTML me tabular data ko dikhane ke liye hota hai. Yeh rows aur columns ka structure follow karta hai, jisme hum data ko systematically organize kar sakte hain.
<tr> (Table Row)–
<tr> (Table Row) tag ka use HTML table me ek naya row (pankti) banane ke liye hota hai. Yeh table ke andar multiple rows create karne me madad karta hai.
<th> (Table Header)–
<th> (Table Header) tag ka use HTML table me heading cells banane ke liye hota hai. Yeh column headings ko represent karta hai aur by default bold text aur center alignment me hota hai.
<td> (Table Data)–
<td> (Table Data) tag ka use HTML table me data cells create karne ke liye hota hai. Yeh table ke rows (<tr>) ke andar use hota hai aur table ke andar actual data ko represent karta hai.

Table Headers (<thead>, <tbody>, <tfoot>) Kya Hota Hai?

1.<thead> (Table Header) –

HTML me <thead> tag ka use table ke header section ko define karne ke liye hota hai. Yeh table ke headings ko logically group karta hai aur readability improve karta hai.

<thead> ka use kyun hota hai?

Table ke header ko structured aur semantic banata hai.
Accessibility aur SEO ke liye useful hota hai.
CSS ke through styling aur formatting easy hoti hai.
Large tables ke liye helpful hota hai, jisme scrolling ke time headers visible rah sakte hain.

2. <tbody> (Table Body) –

HTML me <tbody> tag ka use table ke main content (data rows) ko define karne ke liye hota hai. Yeh <thead> (header) aur <tfoot> (footer) se separate hota hai aur table ke actual data ko logically group karta hai.

<tbody> ka use kyun hota hai?

Table ke data section ko structured banata hai.
Accessibility aur SEO ke liye helpful hota hai.
JavaScript aur CSS ke saath table ko easily manipulate karne me madad karta hai.
Large tables ke liye useful hota hai, jisme scrolling aur sorting apply ki ja sakti hai.

3.<tfoot> (Table Footer) –

HTML me <tfoot> tag ka use table ke footer section ko define karne ke liye hota hai. Yeh mostly total, summary, ya additional information show karne ke liye use hota hai.

<tfoot> ka use kyun hota hai?

Table ke bottom me summary ya total values dikhane ke liye helpful hota hai.
Accessibility aur SEO ke liye useful hota hai.
Large tables ke liye scrolling ke time useful hota hai, jab <thead> aur <tfoot> fix ho jayein.
Table structure ko clean aur readable banata hai.

Example:

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$2</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$1</td>
      <td>10</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Total</strong></td>
      <td>$3</td>
    </tr>
  </tfoot>
</table>

Output:

Product	Price	Quantity
Apple	$2	5
Banana	$1	10
Total	$3

Row aur Column Span Kya Hota Hai?

Rowspan aur Colspan ka use rows aur columns ko merge karne ke liye hota hai. Ye data ko aur structured aur organized banane mein madad karte hain.

1. Rowspan (Row Merge):

HTML me <td> ya <th> element me rowspan attribute use karke hum kisi cell ko multiple rows me merge kar sakte hain.

Rowspan ka use kyun hota hai?

Jab kisi table me ek column ke multiple rows ko combine karna ho.
Data ko structured aur readable banane ke liye.
Table ka layout improve karne ke liye.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th rowspan="2">City</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Neha</td>
    <td>30</td>
    <td>Delhi</td>
  </tr>
</table>

Rowspan Kaise Kaam Karta Hai?

rowspan="2" ka matlab hai ki ek cell do rows ko cover karega.
Isse “Sandeep” wala cell 2 rows me merge ho jayega.
Baki rows apne normal structure me rahengi.

2. Colspan (Column Merge):

HTML me <td> ya <th> element me colspan attribute use karke hum kisi cell ko multiple columns me merge kar sakte hain.

Colspan ka use kyun hota hai?

Jab kisi table me ek row ke multiple columns ko combine karna ho.
Data ko structured aur readable banane ke liye.
Table ka layout improve karne ke liye.

<table border="1">
  <tr>
    <th colspan="2">Student Information</th>
    <th>City</th>
  </tr>
  <tr>
    <td>xyz name</td>
    <td>25</td>
    <td>Mumbai</td>
  </tr>
  <tr>
    <td>abc name</td>
    <td>30</td>
    <td>Delhi</td>
  </tr>
</table>

Colspan Kaise Kaam Karta Hai?

colspan="2" ka matlab hai ki ek cell do columns ko cover karega.
“Naam aur Umra” wala cell do columns me merge ho jayega.
Baki rows apne normal structure me rahengi.

Rowspan aur Colspan ke Fayde:

Table ka layout clean aur organized dikhai deta hai.
Data ko visually attractive aur easily readable banata hai.
Complex data ko structured format mein dikhane mein aasani hoti hai.

Cell Spacing aur Cell Padding Kya Hote Hain?

HTML tables me cellspacing aur cellpadding ka use table ke layout aur spacing ko control karne ke liye hota hai.

1. Cell Spacing (cellspacing) :

cellspacing ek table attribute hai jo cells ke beech ka gap (outer spacing) set karta hai.
Default value 0 hoti hai (no spacing).

2. Cell Padding (`cellpadding`):

cellpadding ek table attribute hai jo cell ke andar content aur border ke beech ka space (inner spacing) define karta hai.
Default value 0 hoti hai.

Quiz: Test Your Knowledge on HTML Table Tags

Bonus: Practical Application!

Try adding a table to your webpage today! Use tags like <table>, <tr>, <th>, and <td> to organize your data effectively for better readability and structure.