📘 Lesson  ·  Lesson 12

Tables in HTML

HTML में Tables

Table Anatomy — rows first, then cells

<table>
    <tr>                      ← tr = table ROW (horizontal line)
        <th>Roll No</th>      ← th = HEADER cell (bold + centered)
        <th>Name</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>101</td>          ← td = DATA cell
        <td>Aman</td>
        <td>92</td>
    </tr>
    <tr>
        <td>102</td><td>Priya</td><td>88</td>
    </tr>
</table>
Roll No | Name | Marks --------|-------|------ 101 | Aman | 92 102 | Priya | 88
The mental model: a table is built row by row (like writing a register line by line), never column by column. Each <tr> is one horizontal line; inside it, each <td>/<th> is one box. Column count = number of cells you put in each row — keep it equal in every row or the table looks broken.

Note: modern tables have no visible border by default — borders come from CSS (border: 1px solid). The old border="1" attribute still works for quick tests but is not used in production.

th vs td — the exam favorite

thtd
Stands forTable HeaderTable Data
LookBold + centered (default)Normal + left
MeaningLabel of a column/rowThe actual value
Screen readersAnnounce it with each related cell ("Marks: 92")Just the value

th is not "bold td" — it semantically LABELS the column, and screen readers pair it with every data cell below. Using td with manual bold loses that meaning.

colspan and rowspan — merging cells, visually

<table>
    <tr><th colspan="3">Class 10-A Result</th></tr>     ← 1 cell stretches across 3 columns
    <tr><th>Roll</th><th>Name</th><th>Marks</th></tr>
    <tr><td rowspan="2">House A</td><td>Aman</td><td>92</td></tr>
    <tr><td>Priya</td><td>88</td></tr>                ← only 2 cells! House A occupies the first
</table>
+-----------------------------+ | Class 10-A Result | ← colspan=3 +---------+---------+---------+ | Roll | Name | Marks | +---------+---------+---------+ | | Aman | 92 | | House A +---------+---------+ ← rowspan=2 (tall cell) | | Priya | 88 | +---------+---------+---------+
Memory trick: col-span spans ACROSS columns (goes WIDE →); row-span spans DOWN rows (goes TALL ↓). The counting trap: after rowspan="2", the NEXT row writes one cell LESS — the tall cell is already occupying that spot. Forgetting this pushes cells sideways and mangles the table; it is the #1 table bug.

caption, thead, tbody, tfoot — the professional shape

<table>
    <caption>Term 1 Result – Class 10-A</caption>
    <thead>
        <tr><th>Name</th><th>Marks</th></tr>
    </thead>
    <tbody>
        <tr><td>Aman</td><td>92</td></tr>
        <tr><td>Priya</td><td>88</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Average</td><td>90</td></tr>
    </tfoot>
</table>

Why bother? caption gives the table an official title (read by screen readers, good for SEO). thead/tbody/tfoot let CSS style each zone separately, let long tables print the header on every page, and enable sticky headers while scrolling. Small effort now, big powers later.

When NOT to Use Tables

Tables are for DATA, not for page layout. In the 2000s entire websites were built inside giant tables — header in one cell, sidebar in another. That era is dead: layout is CSS's job (flexbox/grid — full chapters in our CSS course). Interviewers still ask this to detect outdated habits. Rule: marksheets, timetables, price lists → table ✅. Positioning a sidebar → CSS ❌ never a table.

Table की बनावट — पहले rows, फिर cells

<table>
    <tr>                      ← tr = table ROW (aadi line)
        <th>Roll No</th>      ← th = HEADER cell (bold + center)
        <th>Name</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>101</td>          ← td = DATA cell
        <td>Aman</td>
        <td>92</td>
    </tr>
    <tr>
        <td>102</td><td>Priya</td><td>88</td>
    </tr>
</table>
Roll No | Name | Marks --------|-------|------ 101 | Aman | 92 102 | Priya | 88
Mental model: table row by row बनती है (register में line-by-line लिखने जैसा), कभी column by column नहीं. हर <tr> एक आड़ी line; उसके अंदर हर <td>/<th> एक खाना. Columns की गिनती = हर row में डाले cells — हर row में बराबर रखिए वरना table टूटी दिखती है.

Note: modern tables में default border नहीं दिखता — borders CSS से आते हैं (border: 1px solid). पुराना border="1" attribute quick tests में अब भी चलता है पर production में use नहीं होता.

th vs td — exam favorite

thtd
मतलबTable HeaderTable Data
दिखावटBold + center (default)Normal + left
अर्थColumn/row का labelअसली value
Screen readersहर related cell के साथ बोलते हैं ("Marks: 92")सिर्फ value

th "bold वाला td" नहीं है — वह column को semantically LABEL करता है, और screen readers उसे नीचे की हर data cell से जोड़कर बोलते हैं. td पर manual bold से यह meaning खो जाती है.

colspan और rowspan — cells merge करना, visual के साथ

<table>
    <tr><th colspan="3">Class 10-A Result</th></tr>     ← 1 cell 3 columns तक फैला
    <tr><th>Roll</th><th>Name</th><th>Marks</th></tr>
    <tr><td rowspan="2">House A</td><td>Aman</td><td>92</td></tr>
    <tr><td>Priya</td><td>88</td></tr>                ← sirf 2 cells! पहली जगह House A ने घेरी है
</table>
+-----------------------------+ | Class 10-A Result | ← colspan=3 +---------+---------+---------+ | Roll | Name | Marks | +---------+---------+---------+ | | Aman | 92 | | House A +---------+---------+ ← rowspan=2 (lambi cell) | | Priya | 88 | +---------+---------+---------+
Memory trick: col-span columns के PAAR जाता है (चौड़ा →); row-span rows में NEECHE जाता है (लंबा ↓). गिनती वाला trap: rowspan="2" के बाद AGLI row में एक cell KAM लिखनी है — वह जगह लंबी cell पहले से घेरे है. यह भूलने पर cells खिसक जाती हैं और table बिगड़ जाती है; यही #1 table bug है.

caption, thead, tbody, tfoot — professional shape

<table>
    <caption>Term 1 Result – Class 10-A</caption>
    <thead>
        <tr><th>Name</th><th>Marks</th></tr>
    </thead>
    <tbody>
        <tr><td>Aman</td><td>92</td></tr>
        <tr><td>Priya</td><td>88</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Average</td><td>90</td></tr>
    </tfoot>
</table>

क्यों? caption table को official title देता है (screen readers पढ़ते हैं, SEO को अच्छा). thead/tbody/tfoot से CSS हर zone को अलग style कर सकती है, लंबी tables print में हर page पर header दोहरा सकती हैं, और scroll पर sticky header बन सकता है. अभी छोटी मेहनत, बाद में बड़ी powers.

Tables कब NAHI use करें

Tables DATA के लिए हैं, page layout के लिए नहीं. 2000s में पूरी websites बड़ी tables के अंदर बनती थीं — एक cell में header, दूसरी में sidebar. वह दौर खत्म: layout CSS का काम है (flexbox/grid — हमारे CSS course में पूरे chapters). Interviewers आज भी यह पूछकर पुरानी आदतें पकड़ते हैं. Rule: marksheets, timetables, price lists → table ✅. Sidebar की positioning → CSS ❌ कभी table नहीं.
← Back to HTML Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.