← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 3 of 26

HTML Tables

कल्पना कीजिए बीस अलग-अलग server files, उनके storage sizes, और compression times वाली एक spreadsheet को sort करना। अगर आप उस data को text के raw block के रूप में paste करते हैं, तो वह unreadable हो जाता है। HTML tables आपको data को rows और columns की साफ-सुथरी, grid-aligned structures में organize करने देती हैं, बिल्कुल Excel की एक sheet की तरह। आप complex schedules map out कर सकते हैं, tools compare कर सकते हैं, या log metrics को साफ, professional layouts में display कर सकते हैं जिन्हें scan करना आसान है।

In this page:

  1. बुनियादी Table Elements (table, tr, td)
  2. Table Headings (th) Declare करना
  3. Cells को Merge करना (colspan और rowspan)
  4. Semantic Table Structure (thead, tbody, tfoot)
  5. captions और scopes के साथ Accessible Tables
  6. Column और Row Spanning
  7. Table Structure Elements
  8. Colgroup और Col Elements
Syntax
markup 
<table>
  <tr>
    <th>Header</th>
    <th>Header</th>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

बुनियादी Table Elements (table, tr, td)

एक HTML table बनाने के लिए, आप तीन nested elements का उपयोग करके grid system define करते हैं: table container, table rows के लिए tr, और table data cells के लिए td।

Note:
  • tr को एक horizontal row container की तरह सोचें, और td को उस row के अंदर side-by-side individual cells की तरह।
  • Accepted attributes:
  • td colspan — cell कितने columns में फैला है
  • td rowspan — cell कितनी rows में फैला है
  • td headers — th ids की space-separated list
  • table पर border, cellpadding, cellspacing, align, width obsolete हैं; CSS का उपयोग करें
Warning: text को कभी सीधे tr tag के अंदर न रखें; सारा content td या th data cell containers के अंदर सुरक्षित रूप से रहना चाहिए।

उदाहरण: Basic Table Elements (table, tr, td)

markup 
<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

Table Headings (th) Declare करना

Table headings को regular data से अलग दिखना चाहिए। अपने header row के लिए td के बजाय th tag का उपयोग करके, ब्राउज़र स्वचालित रूप से text को bold और center-aligned format में render करेंगे।

Note:
  • table columns को पढ़ना बहुत आसान बनाने के लिए अपनी पहली row पर th tag का उपयोग करें।
  • Accepted attributes:
  • scope — row | col | rowgroup | colgroup | auto
  • colspan / rowspan — positive integers
  • headers — th ids की space-separated list
  • abbr — header cell के लिए छोटा label
Warning: normal data cells को manually headers जैसा दिखने के लिए style न करें; better code design के लिए semantic th tags का उपयोग करें।

उदाहरण: Declaring Table Headings (th)

markup 
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
</table>

Cells को Merge करना (colspan और rowspan)

कभी-कभी आपको किसी heading या summary row को कई columns में फैलाने या cells को vertically merge करने की ज़रूरत होती है। colspan attribute cells को columns के आर-पार horizontally merge करता है, और rowspan attribute उन्हें rows के नीचे vertically merge करता है।

Note:
  • span attributes का उपयोग करते समय table alignment issues से बचने के लिए अपनी cell counts को दोबारा जांचें।
  • Accepted attributes:
  • colspan — positive integer (default 1)
  • rowspan — non-negative integer (default 1; 0 row group के अंत तक फैलता है)
  • td और th पर valid
Warning: गलत span values आपके table borders को बिगाड़ सकते हैं और data cells को पूरी तरह alignment से बाहर धकेल सकते हैं।

उदाहरण: Merging Cells (colspan and rowspan)

markup 
<table>
  <tr>
    <td colspan="2">Merged across columns</td>
  </tr>
  <tr>
    <td rowspan="2">Merged down rows</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
</table>

Semantic Table Structure (thead, tbody, tfoot)

complex tables के लिए, आप rows को semantic containers में group कर सकते हैं: thead (table header), tbody (table body), और tfoot (table footer)। इससे specific visual styles apply करना और लंबी tables को कई pages में print करना आसान हो जाता है।

Note: clean code organization के लिए modern development standards अपनी rows को semantic containers के अंदर group करने की सलाह देते हैं।
Warning: सुनिश्चित करें कि आप अपने tr row tags को इन बड़े structural blocks के अंदर सुरक्षित रूप से रखें।

उदाहरण: Semantic Table Structure (thead, tbody, tfoot)

markup 
<table>
  <thead>
    <tr><th>Item</th></tr>
  </thead>
  <tbody>
    <tr><td>Apple</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td></tr>
  </tfoot>
</table>

captions और scopes के साथ Accessible Tables

जब तक आप accessibility helpers न जोड़ें, screen readers के लिए tables को interpret करना मुश्किल हो सकता है। caption tag table के लिए एक visible title description define करता है, और scope attribute assistive devices को बताता है कि कोई th किसी column या row का header है या नहीं।

Note:
  • अधिकतम accessibility के लिए अपने th tags के अंदर हमेशा scope="col" या scope="row" specify करें।
  • Accepted attributes:
  • caption — बिना special attributes वाला element; table का पहला child
  • scope — row | col | rowgroup | colgroup | auto (th पर)
  • headers — th ids की space-separated list (td/th पर)
Warning: captions और scopes declare न करने से complex data grids visually impaired visitors के लिए unusable हो सकते हैं।

उदाहरण: Accessible Tables with captions and scopes

markup 
<table>
  <caption>Monthly Sales</caption>
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Sales</th>
  </tr>
</table>

Column और Row Spanning

colspan attribute किसी cell को कई columns में फैलाता है। rowspan attribute किसी cell को कई rows में फैलाता है। दोनों numbers हैं जो दर्शाते हैं कि कितनी cells span करनी हैं।

Note:
  • layout टूटने से बचने के लिए colspan का उपयोग करते समय अपने columns को ध्यान से count करें।
  • Accepted attributes:
  • colspan — positive integer (default 1)
  • rowspan — non-negative integer (default 1)
  • headers — th ids की space-separated list
Warning: spanning को overuse करने से tables पढ़ना और maintain करना मुश्किल हो जाता है।

उदाहरण: Column and Row Spanning

markup 
<table>
  <tr>
    <td colspan="3">Spans 3 columns</td>
  </tr>
  <tr>
    <td rowspan="2">Spans 2 rows</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

Table Structure Elements

header rows के लिए thead, main data rows के लिए tbody, और summary rows के लिए tfoot का उपयोग करें। यह आपकी table को semantic meaning देता है और screen readers को इसे सही तरीके से navigate करने में मदद करता है।

Note: अगर आप tbody छोड़ दें तो भी ब्राउज़र इसे render करता है, लेकिन इसे explicitly लिखना आपके code को clean रखता है।
Warning: table structure elements को skip करने से बड़े tables screen reader users के लिए inaccessible हो जाते हैं।

उदाहरण: Table Structure Elements

markup 
<table>
  <thead>
    <tr><th>Product</th></tr>
  </thead>
  <tbody>
    <tr><td>Book</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Summary</td></tr>
  </tfoot>
</table>

Colgroup और Col Elements

colgroup और col elements आपको हर एक cell को छुए बिना table के पूरे column पर styling apply करने देते हैं। किसी column की हर td में class जोड़ने के बजाय, आप table के ऊपर एक बार column का वर्णन कर देते हैं।

Note:
  • जब आप हर row पर CSS classes दोहराए बिना कोई पूरा column, जैसे totals column, highlight करना चाहें, तो colgroup का उपयोग करें।
  • Accepted attributes:
  • span — covered columns की positive integer संख्या (col और colgroup पर)
  • width, align, bgcolor — obsolete; CSS का उपयोग करें
  • बाकी सिर्फ global attributes (class, id, style)
Warning: colgroup को opening table tag के ठीक बाद, thead या किसी भी row से पहले दिखना चाहिए, वरना browsers इसे नजरअंदाज कर देंगे।

उदाहरण: Colgroup and Col Elements

markup 
<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col>
  </colgroup>
  <tr>
    <td>Total</td>
    <td>100</td>
  </tr>
</table>
Live Example
Related Topics

HTML Page Title · HTML Lists · HTML Favicon · HTML Block & Inline

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Page Title Next Lesson → HTML Table Borders

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.