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

HTML टेबल आकार

बिना किसी explicit sizing rules वाली table अपने content के हिसाब से बिल्कुल fit होने के लिए shrink और grow करती है, जो एक two-column table को wide page के बगल में cramped और lopsided दिखा सकता है। Table sizing properties आपको overall table width, individual column widths, और row heights को control करने देती हैं, ताकि आपका data पूरी तरह browser के automatic content-fitting behavior पर छोड़ने के बजाय predictably layout हो।

In this page:

  1. पूरी Table की Width सेट करना
  2. Individual Columns को Size करना
  3. Row Height सेट करना
  4. table-layout Property
  5. Responsive Table Sizing
Syntax
markup 
<table style="width: 100%;">
  <tr>
    <th style="width: 50%;">Header</th>
  </tr>
</table>

पूरी Table की Width सेट करना

By default, कोई table सिर्फ उतनी ही चौड़ी सिकुड़ती है जितना उसके content को चाहिए।

table element पर width: 100% सेट करने से यह इसके बजाय अपने containing element की पूरी width में फैल जाता है, जो modern responsive pages पर सबसे आम table width setting है।

Note: table के container पर max-width के साथ width: 100% combine करना tables को बहुत बड़ी screens पर ज़्यादा चौड़ा होने से रोकने का एक reliable तरीका है।
Warning: बहुत सारे columns वाली width: 100% पर set की गई table फिर भी individual cells को cramped महसूस करा सकती है अगर page खुद narrow हो।

उदाहरण: Setting Overall Table Width

markup 
<table style="width: 100%;">
  <tr><td>Full width table</td></tr>
</table>

Individual Columns को Size करना

table की पहली row में किसी cell पर width value सेट करना पूरे column को size करने की standard technique है, क्योंकि column की width पूरे column की property है, सिर्फ एक cell की नहीं -- बाद की rows में उसी column के लिए values को आमतौर पर ignore कर दिया जाता है।

Note: header row में हर column पर एक साथ explicit widths सेट करें ताकि column proportions का पूरा सेट एक नज़र में स्पष्ट हो।
Warning: एक ही column होने के लिए अलग-अलग rows में अलग-अलग width values set करना अलग-अलग browsers में अप्रत्याशित results देता है।

उदाहरण: Sizing Individual Columns

markup 
<table>
  <tr>
    <th style="width: 70%;">Name</th>
    <th style="width: 30%;">Age</th>
  </tr>
</table>

Row Height सेट करना

किसी <tr> या उसके अंदर किसी cell पर height एक minimum row height सेट करता है -- अगर content को ज़्यादा जगह चाहिए तो row specified value से लंबी हो जाएगी, लेकिन यह दी गई height से कभी छोटी नहीं होगी, जो table की rows को visually consistent रखने के लिए उपयोगी है भले ही कुछ cells में ज़्यादा content हो।

Note: table की rows में एक consistent minimum row height का उपयोग करें ताकि grid uniform दिखे भले ही cell content की length अलग-अलग हो।
Warning: table row पर height को एक minimum माना जाता है, fixed cap नहीं, इसलिए बहुत सारे text वाली एक cell फिर भी row को लंबा expand करेगी चाहे कुछ भी हो।

उदाहरण: Setting Row Height

markup 
<table>
  <tr style="height: 50px;">
    <td>Tall row</td>
  </tr>
</table>

table-layout Property

table-layout: auto (default) ब्राउज़र से column widths finalize करने से पहले पूरी table में हर cell के content को measure कराता है, जो बहुत बड़ी tables पर धीमा हो सकता है। table-layout: fixed इसके बजाय सिर्फ पहली row की widths (या अगर कोई सेट न हो तो equal division) तुरंत उपयोग करता है, जिससे rendering तेज़ होती है और बाद के content की परवाह किए बिना column widths सख्ती से locked रहती हैं।

Note: बहुत बड़ी या dynamically-loaded tables पर rendering performance सुधारने और predictable column widths lock करने के लिए table-layout: fixed का उपयोग करें।
Warning: table-layout: fixed के साथ, overflow होने वाला cell content column को wider नहीं करेगा -- लंबे text को gracefully handle करने के लिए इसे overflow और text-overflow rules के साथ जोड़ें।

उदाहरण: The table-layout Property

markup 
<table style="table-layout: fixed; width: 100%;">
  <tr>
    <td>Fixed width column</td>
  </tr>
</table>

Responsive Table Sizing

पूरी तरह fixed pixel widths वाली एक table narrow mobile screen पर overflow कर सकती है, जिससे पूरे page layout में अजीब horizontal scrolling होने लगती है।

Table को overflow-x: auto वाले container में लपेटने से वह horizontal scroll सिर्फ table तक सीमित रह जाता है, जिससे बाकी page layout intact रहता है।

Note: wide data tables को overflow-x: auto वाले एक div में लपेटें ताकि छोटी screens पर सिर्फ table horizontally scroll करे, पूरा page नहीं।
Warning: एक scrollable wrapper के बिना, viewport से चौड़ी table पूरे page को sideways scroll करने पर मजबूर कर सकती है, जो mobile पर broken महसूस होता है।

उदाहरण: Responsive Table Sizing

markup 
<div style="overflow-x: auto;">
  <table style="width: 800px;">
    <tr><td>Wide content</td></tr>
  </table>
</div>
Live Example
Related Topics

HTML टेबल बॉर्डर्स · HTML टेबल हेडर · HTML टेबल पैडिंग और स्पेसिंग · HTML टेबल स्टाइलिंग

{# 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. #}
आम गलतियां
  1. किसी column के हर td पर width set करना और confused होना जब values conflict करें, जबकि ज़्यादातर browsers में column size करने के लिए सिर्फ पहली row की width values ही इस्तेमाल होती हैं।
  2. table-layout: fixed के बिना table पर width: 100% इस्तेमाल करना, जिससे browser column widths finalize करने से पहले भी हर cell का content measure करता रहता है।
  3. किसी column के content को असल में जितनी width चाहिए उससे कम fixed width set करना, जिससे awkward text wrapping या overflow होता है।
चैप्टर सारांश
  • table पर width: 100% उसे अपने content के हिसाब से shrink होने के बजाय अपने container को भरने के लिए stretch करता है।
  • individual column widths control करने का standard तरीका है first row के cells पर width set करना।
  • table-layout: fixed rendering को तेज़ करता है और column widths को strictly enforce करता है, बाद के cell content sizes को नजरअंदाज करते हुए।
ब्राउज़र सपोर्ट

Table width, column sizing, और table-layout सबसे शुरुआती CSS implementations से ही हर browser में supported हैं।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Table Borders Next Lesson → HTML Table Headers

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.