लोड हो रहा है...

HTML तालिका आकार

तालिका सामग्री कॉलम में फैल सकती है या मूल्य कार्ड जैसी सघन रह सकती है। बॉर्डर पाठ के बाद जिसने ग्रिड रेखाएँ सिखाईं, यह पाठ बॉक्स का आकार तय करता है: CSS (width, max-width, padding, वैकल्पिक कॉलम चौड़ाई) से तालिका डेटा और स्क्रीन दोनों में फिट हो। प्रस्तुति CSS में रहती है; table / tr / th / td अभी भी अर्थ रखते हैं। अगर बॉर्डर ने ग्रिड दिखायी, आकार उसे आरामदायक बनाता है।

तालिका के लिए «आकार» का मतलब

आकार एक अकेला नंबर नहीं है। पूरी तालिका की चौड़ाई पैरेंट के सापेक्ष होती है। सेल में padding चाहिए ताकि टेक्स्ट साँस ले। कॉलम जगह बराबर बाँट सकते हैं या चौड़े लेबल कॉलम को तरजीह दे सकते हैं। फ़ोन पर 1200px पर अड़े तालिका सिर्फ दो छोटे कॉलम होने पर भी अजीब क्षैतिज स्क्रॉल थोपती है। लचीले नुस्खे — अक्सर width: 100% और समझदार max-width — साधारण ग्रिड पढ़ने योग्य रखते हैं बिना यह दिखावे कि CSS ईमानदार th/td संरचना की जगह ले ले।

सीधा उत्तर

table पर width सेट करें (जैसे 100%) और वैकल्पिक रूप से max-width से सीमित करें (जैसे 480px या 640px)। जब एक कॉलम को अधिक जगह चाहिए हो तो th/td पर चौड़ाई संकेत दें। फ़ोन पर overflow करने वाली विशाल fixed pixel चौड़ाई के बजाय प्रतिशत और max-width चुनें। बॉर्डर पाठ का border-collapse और padding रखें ताकि आकार और रेखाएँ साथ काम करें। नियमों को class से सीमित करें ताकि एक डेमो पेज की हर तालिका न बदले।

कॉलम संकेत के साथ लचीली चौड़ाई

एक आम शुरुआती पैटर्न: तालिका अधिकतम तक पैरेंट भरती है, बॉर्डर collapsed रहते हैं, और पहला कॉलम लेबल के लिए बड़ा हिस्सा लेता है।

Flexible table width

html

HTML Code

<style>
table.prices { width: 100%; max-width: 480px; border-collapse: collapse; }
table.prices th, table.prices td { padding: 8px; border: 1px solid #555; }
table.prices th:first-child, table.prices td:first-child { width: 60%; }
</style>
<table class="prices">
<tr><th>Plan</th><th>Price</th></tr>
<tr><td>Starter</td><td>0</td></tr>
<tr><td>Pro</td><td>9</td></tr>
</table>

लचीले नमूने को पढ़ना

width: 100% तालिका को उपलब्ध सामग्री चौड़ाई उपयोग करने देता है
max-width: 480px चौड़ी स्क्रीन पर विशाल पट्टी बनने से रोकता है
border-collapse: collapse आकार और बॉर्डर को लड़ने से बचाता है
padding: 8px हर सेल को पढ़ने योग्य अंदरूनी जगह देता है
:first-child { width: 60%; } संकेत देता है कि प्लान नाम कॉलम कीमत कॉलम से चौड़ा हो
Class स्कोप (.prices) गलती से हर तालिका का आकार बदलने से बचाता है

कॉम्पैक्ट max-width तालिका

कभी आप छोटी तुलना कार्ड चाहते हैं जो कभी full-bleed न फैले। निचला max-width (और उस सीमा के अंदर अभी भी width: 100%) डेस्कटॉप और मोबाइल दोनों पर ग्रिड साफ़ रखता है।

Compact max-width table

html

HTML Code

<style>
table.compact {
width: 100%;
max-width: 320px;
border-collapse: collapse;
}
table.compact th, table.compact td {
padding: 6px 10px;
border: 1px solid #444;
text-align: left;
}
</style>
<table class="compact">
<tr><th>Item</th><th>Stock</th></tr>
<tr><td>USB cable</td><td>14</td></tr>
<tr><td>Notebook</td><td>3</td></tr>
</table>

कॉम्पैक्ट नमूने को पढ़ना

वही लचीला विचार, कार्ड जैसी छाप के लिए तंग max-width
क्षैतिज padding (6px 10px) आराम के लिए ऊर्ध्वाधर से अलग हो सकता है
text-align: left वैकल्पिक प्रस्तुति है — जब संख्या और शब्द छोटे ग्रिड साझा करें तो उपयोगी
अभी भी कोई layout-तालिका nesting नहीं; आप केवल असली डेटा तालिका का आकार तय कर रहे हैं
ब्राउज़र छोटा करें: तालिका कॉलम के साथ सामग्री सीमा तक सिकुड़े, डिफ़ॉल्ट रूप से विशाल स्क्रॉलबार न थोपे

Fixed पिक्सेल बनाम लचीली आदतें

width: 1200px जैसी fixed चौड़ाई बड़े मॉनिटर पर ठीक और फ़ोन पर दर्दनाक लग सकती है। प्रिंट या घने डैशबोर्ड के लिए न्यूनतम चाहिए तो तरल width प्लस max-width से शुरू करें, या बाद में responsive रणनीति बनाएँ। इस कोर्स की शुरुआती तालिकाओं के लिए लचीला आकार डिफ़ॉल्ट अच्छी आदत है। कॉलम width प्रतिशत संकेत हैं — अत्यंत लंबे या अटूट सामग्री पर ब्राउज़र समायोजित कर सकता है, इसलिए सीखते समय सेल टेक्स्ट छोटा रखें। जब कॉलम सिकुड़ने से इनकार करे, max-width को दोष देने से पहले लंबे URL या बिना स्पेस शब्द जाँचें।

padding, कॉलम और collapse साथ

आकार का काम बॉर्डर पाठ के साथ बैठता है। बिना padding घने सेल सही बाहरी चौड़ाई पर भी तंग लगते हैं। बिना collapse चौड़ाई प्रयोग मोटे या असमान दिख सकते हैं क्योंकि अलग बॉर्डर अतिरिक्त जगह लेते हैं। वैकल्पिक कॉलम संकेत (:first-child सेल या विशिष्ट th पर width) ब्राउज़र का मार्गदर्शन करते हैं जब लेबल को मानों से अधिक जगह चाहिए। आकार CSS को th हेडर छोड़ने या पेज को nested layout तालिकाओं से फिर बनाने का बहाना न बनाएँ — वह संघर्ष Tables सत्र में पहले सुलझ चुका है।

अपने संपादक में अभ्यास

अभ्यास तालिका को width: 100% और max-width दें (कोशिश करें 480px)।
th/td में padding जोड़ें (अगर हों तो बॉर्डर स्टाइल फिर उपयोग करें)।
ब्राउज़र का आकार बदलें — पुष्टि करें कि साधारण दो-कॉलम तालिका अंतहीन क्षैतिज स्क्रॉल न थोपे।
वैकल्पिक रूप से :first-child या class से पहला कॉलम चौड़ा करें।
तंग max-width जैसे 320px के साथ तालिका डुप्लिकेट करें और छाप तुलना करें।
अस्थायी रूप से width: 1200px सेट करें, मोबाइल दर्द नोट करें, फिर हटाएँ।
चौड़ाई सेट रहते border-collapse टॉगल करें और बाहरी आकार का अहसास देखें।
तालिका के नीचे एक वाक्य लिखें: चुना max-width और क्यों।

आसान गलतियाँ

Fixed width: 1200px तालिकाएँ जो छोटी स्क्रीन तोड़ती हैं
बिना padding — घने, पढ़ने में कठिन सेल
बिना border-collapse बॉर्डर और चौड़ाई से लड़ना
ग्लोबल table { width: ... } जो पेज के हर डेमो का आकार बदलता है
उम्मीद कि कॉलम width संकेत अत्यंत लंबे अटूट स्ट्रिंग को ओवरराइड कर दें
तालिका आकार से फिर पूर्ण-पेज layout कॉलम नकली बनाना
max-width भूलना ताकि अकेला width: 100% तीन-सेल की छोटी तालिका को ultrawide पर फैला दे

सारांश

CSS width और max-width से तालिका आकार दें
पढ़ने योग्य सेल के लिए padding उपयोग करें
छोटी स्क्रीन के लिए लचीले लेआउट चुनें
कॉलम चौड़ाई संकेत वैकल्पिक हैं और संभव हो तो class से सीमित
बॉर्डर collapsed रखें ताकि आकार और रेखाएँ सहयोग करें
संरचना HTML में; आयाम CSS में
अगले हेडर-केंद्रित पाठ पहले से viewport में फिट ग्रिड पर बनते हैं

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा