Table Types

📊 Basic Table — Simple Table

Basic table jaise class attendance register — students ke rows, details ke columns (name, roll number, status). Simple grid of data rows aur columns mein organized.

Teen tags foundation hain: <table> sab kuch wrap karta hai, <tr> row banata hai, <td> cell banata hai. Bas itna. Rows horizontal jaati hain, columns implicit hain.

🛺

Register Analogy: Class register mein rows hain (students) aur columns hain (name, roll no, present/absent). HTML table exactly waise kaam karta hai — tr = ek student ki row, td = ek detail cell.

Code Example

HTML — Basic Table — Simple Table

<!-- Basic 2x2 table -->
<table>
  <tr>
    <td>HTML</td>
    <td>HyperText Markup Language</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Cascading Style Sheets</td>
  </tr>
  <tr>
    <td>JS</td>
    <td>JavaScript</td>
  </tr>
</table>

<!-- 3x3 table -->
<table>
  <tr>
    <td>Monday</td>
    <td>Subah 6 baje utho</td>
    <td>Gym 7 baje</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>Subah 6 baje utho</td>
    <td>Yoga 7 baje</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>Subah 6 baje utho</td>
    <td>Rest day</td>
  </tr>
</table>

<table>Table wrapper — saari rows contain karta hai

<tr>Table row — cells ki ek horizontal line

<td>Table data cell — ek piece of data

ColumnsExplicitly define nahi hote — row mein td count se columns automatically bante hain

✅ When to Use

Simple data display — name-value pairs
Quick reference tables
20 rows se chhote datasets
Jab kuch jaldi banana ho

❌ When NOT to Use

Layout ke liye (CSS grid ya flexbox use karo)
Jab headers chahiye (thead add karo)
Complex data jisko styling chahiye (CSS add karo)

💡

Bina headers wali table jaise spreadsheet bina column names ke — chalti hai par confusing hai. Hamesha headers add karo simple tables ke liye bhi. Users ko guess nahi karna chahiye ki har column kya represent karta hai.

← Back to Tables Chapter