HTML Tables Explained with Examples (thead, tbody & colspan)

HTML Tables Explained (Structure, Semantics & Real Use)

Is chapter me hum HTML tables ko detail me samjhenge. Tables ka use structured data jaise pricing, comparison, schedules, reports aur stats dikhane ke liye hota hai. Sahi table structure SEO, accessibility aur readability tino ko improve karta hai.

HTML Table Kya Hota Hai?

HTML table ek grid-based structure hota hai jisme rows aur columns hote hain. Table banane ke liye <table> tag use kiya jata hai, aur uske andar rows aur cells define hote hain.

• <table> – Table container
• <tr> – Table row
• <th> – Table heading cell
• <td> – Table data cell

Info:
Tables sirf tab use karein jab data truly tabular ho. Layout design ke liye tables ka use SEO aur accessibility ke liye harmful hota hai.

Basic HTML Table Example

<table border="1"> <tr> <th>Course</th> <th>Duration</th> <th>Level</th> </tr> <tr> <td>HTML</td> <td>2 Weeks</td> <td>Beginner</td> </tr> <tr> <td>CSS</td> <td>3 Weeks</td> <td>Intermediate</td> </tr> </table>

thead, tbody aur tfoot Kya Hain?

Large aur meaningful tables ke liye HTML table ko sections me divide karna best practice hai. Ye search engines aur screen readers dono ke liye helpful hota hai.

• <thead> – Table headings ka group
• <tbody> – Main table data
• <tfoot> – Summary, totals ya footer content

Semantic Table Example

<table border="1"> <thead> <tr> <th>Plan</th> <th>Price</th> <th>Users</th> </tr> </thead> <tbody> <tr> <td>Basic</td> <td>₹199</td> <td>1 User</td> </tr> <tr> <td>Pro</td> <td>₹499</td> <td>5 Users</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">Prices are subject to change</td> </tr> </tfoot> </table>

SEO Tip:
aur ka sahi use search engines ko batata hai ki kaunsa data header hai aur kaunsa content.

rowspan aur colspan Attributes

Kabhi-kabhi ek cell ko multiple rows ya columns cover karna hota hai. Iske liye rowspan aur colspan attributes use hote hain.

• rowspan – Cell ko multiple rows me stretch karta hai
• colspan – Cell ko multiple columns me stretch karta hai

colspan Example

<table border="1"> <tr> <th colspan="2">Student Info</th> </tr> <tr> <td>Name</td> <td>Maxon</td> </tr> </table>

rowspan Example

<table border="1"> <tr> <th>Day</th> <th>Course</th> </tr> <tr> <td rowspan="2">Monday</td> <td>HTML</td> </tr> <tr> <td>CSS</td> </tr> </table>

Warning:
rowspan aur colspan ka overuse table layout ko confusing aur accessibility-friendly nahi banata. Simple aur readable structure rakhein.

HTML Tables Best Practices

• Sirf tabular data ke liye tables use karein
• Headings ke liye <th> zaroor use karein
• thead, tbody, tfoot ka semantic use karein
• Complex tables ko simple aur readable rakhein
• Mobile users ke liye tables ka width aur overflow check karein

Result: Clean table structure = Better readability, SEO clarity aur accessibility support

Common Table Mistakes

• Tables ko page layout ke liye use karna
• <th> ki jagah <td> use karna
• Unnecessary rowspan / colspan lagana
• Large tables without headers banana

Key Takeaways

• table, tr, th, td core table tags hain
• thead, tbody, tfoot semantic clarity dete hain
• rowspan aur colspan se complex layouts possible hain
• Readable aur semantic tables SEO aur UX dono improve karti hain

Next Chapter: HTML Forms (Basics)