Tables
Tables — Basics
table, tr, td
💡 HTML table ek grid/spreadsheet jaisa hai — rows (<tr>) aur unke andar cells (<td>) — jaise Excel ka ek simplified version, tabular data (jaise timetable, price list) dikhane ke liye.
<table> poori table ka container hai. <tr> ("table row") ek row banata hai. <td> ("table data") ek cell hai row ke andar. Structure hamesha table > tr > td (ya th) hota hai — kabhi seedha table > td nahi.
<table>
<tr>
<td>Aarav</td>
<td>85</td>
</tr>
<tr>
<td>Riya</td>
<td>92</td>
</tr>
</table>
<!-- 2 rows, 2 columns ki simple table -->🧮
HTML table ek grid/spreadsheet jaisa hai — rows (<tr>) aur unke andar cells (<td>) — jaise Excel ka ek simplified version, tabular data (jaise timetable, price list) dikhane ke liye.
1 / 4
⚡ झट से Recap
- table > tr > td = basic structure
- table = container, tr = row, td = cell
- Sirf tabular data ke liye — layout ke liye nahi (purani practice)
इस page में (2 subtopics)
Purane HTML mein border="1" attribute se borders diye jaate the — ye deprecated hai (avoid karo). Modern approach: CSS border property use karo, jo bahut zyada control deta hai (color, style, individual cells).
<!-- Purana (avoid): -->
<!-- <table border="1"> -->
<!-- Modern (CSS): -->
<style>
table, th, td { border: 1px solid #ccc; border-collapse: collapse; }
</style>
<table>
<tr><td>Data</td></tr>
</table>Tip: border-collapse: collapse; almost hamesha use hota hai tables ke saath — bina isके, adjacent cells ke borders double-thick dikhte hain (spacing ki wajah se).
<caption> table ke andar (pehle child ke roop mein) uska title/description deta hai — screen readers isse announce karte hain, aur ye table ke context ko clarify karta hai.
<table>
<caption>2026 Ke Student Marks</caption>
<tr>
<td>Aarav</td>
<td>85</td>
</tr>
</table>Tip: caption CSS se bhi style ho sakta hai (position: top/bottom se upar/niche rakh sakte ho) — semantically ye <h3> jaisi heading se better hai kyunki table se directly associated hai.