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

HTML तालिका बॉर्डर

खाली तालिका भी पढ़ी जा सकती है; बॉर्डर ग्रिड को एक नज़र में स्पष्ट बनाते हैं। पिछले पाठ ने table, tr, th और td से संरचना तय की। यह सत्र रूप जोड़ता है: आधुनिक HTML में आप बॉर्डर CSS से खींचते हैं, न कि केवल <table> पर पुराने प्रेजेंटेशनल border एट्रिब्यूट से। संरचना HTML में रहती है; रेखाएँ, स्पेसिंग और रंग स्टाइल नियमों के हैं। बॉर्डर को ग्रिड के चश्मे की तरह सोचें — वे आँखों को सेल ट्रैक करने में मदद करते हैं बिना डेटा का अर्थ बदले।

पुराने एट्रिब्यूट के बजाय CSS क्यों

ब्राउज़र कभी <table border="1"> को तेज़ शिक्षण ट्रिक के रूप में स्वीकार करते थे। गंभीर आधुनिक पृष्ठों के लिए वह एट्रिब्यूट अप्रचलित है और रंग, मोटाई या कौन-सी भुजाएँ दिखें इस पर लगभग कोई नियंत्रण नहीं देता। CSS आपको चौड़ाई, स्टाइल और रंग अलग से सेट करने, कई सेल पर एक नियम साझा करने, और बॉर्डर को padding व border-collapse के साथ जोड़ने देता है। CSS से बॉर्डर सीखना बाद में हेडिंग, सूची और लेआउट स्टाइल करने के तरीके से भी मेल खाता है, इसलिए अभ्यास पृष्ठ वास्तविक प्रोजेक्ट से सुसंगत रहते हैं।

सीधा उत्तर

table, th और td को CSS border प्रॉपर्टी से स्टाइल करें। तालिका पर border-collapse: collapse उपयोग करें ताकि पड़ोसी सेल बॉर्डर मोटे डबल किनारे की जगह एक साफ ग्रिड लाइन में मिल जाएँ। छोटे डेमो के लिए नियमों को style एट्रिब्यूट में रखें, या — पुनः उपयोग के लिए बेहतर — class के साथ <style> ब्लॉक या स्टाइलशीट में। tr/th/td मार्कअप अर्थपूर्ण रखें; केवल रूप CSS में जाता है। यदि कोई ट्यूटोरियल अभी भी केवल border="1" से शुरू होता है, उसे संग्रहालय नोट मानें और विचार को CSS में अनुवाद करें।

CSS बॉर्डर बनाम अप्रचलित मार्कअप

📊 Presenting table lines today

Approach	Beginner verdict	Why
th/td पर CSS `border` (+ collapse)	प्राथमिकता दें	लचीला, पुनः प्रयोज्य, आधुनिक
केवल `<table border="1">`	नए काम के लिए बचें	अप्रचलित प्रेजेंटेशनल HTML
शून्य padding वाले बॉर्डर	padding से ठीक करें	रेखा से चिपका पाठ पढ़ना कठिन
collapse के बिना अलग बॉर्डर	वैकल्पिक प्रयोग	दिखाता है क्यों collapse साफ लगता है

सेल पर बॉर्डर (inline अभ्यास)

एक छोटी तालिका पर प्रयोग करते समय inline स्टाइल ठीक हैं। पहले collapse लगाएँ, फिर हर हेडर और डेटा सेल को पतला solid बॉर्डर और थोड़ा padding दें।

Borders on cells

html

HTML Code

<table style="border-collapse: collapse;">
<tr>
<th style="border: 1px solid #333; padding: 6px;">City</th>
<th style="border: 1px solid #333; padding: 6px;">Code</th>
</tr>
<tr>
<td style="border: 1px solid #333; padding: 6px;">Tehran</td>
<td style="border: 1px solid #333; padding: 6px;">021</td>
</tr>
</table>

inline नमूना पढ़ना

table पर border-collapse: collapse पड़ोसी बॉर्डर को एक ग्रिड में मिलाता है
हर th/td साधारण गहरी रेखा के लिए border: 1px solid #333 सेट करता है
padding: 6px पाठ को बॉर्डर छूने से बचाता है
inline स्टाइल हर सेल पर दोहराए जाते हैं — सीखने के लिए उपयोगी, बड़ी तालिकाओं के लिए शोर
HTML संरचना Tables पाठ जैसी ही है; केवल प्रेजेंटेशन जोड़ा गया

style ब्लॉक से साझा रूप

जब कई सेल समान होने चाहिए, एक class नियम हर जगह वही inline स्ट्रिंग कॉपी करने से बेहतर है। दस्तावेज़ हेड में छोटा <style> ब्लॉक बाहरी स्टाइलशीट की ओर स्पष्ट पुल है।

Shared look with a style block

html

HTML Code

<head>
<style>
table.grid { border-collapse: collapse; }
table.grid th, table.grid td { border: 1px solid #444; padding: 8px; }
</style>
</head>
<body>
<table class="grid">
<tr><th>Item</th><th>Qty</th></tr>
<tr><td>Pens</td><td>12</td></tr>
</table>
</body>

साझा-स्टाइल नमूना पढ़ना

table.grid नियमों को सीमित करता है ताकि पृष्ठ की हर तालिका एक जैसी न दिखनी पड़े
एक नियम .grid के अंदर th और td दोनों स्टाइल करता है
एक जगह padding या रंग बदलने से पूरा ग्रिड अपडेट होता है
आप अभी भी सामान्य tr/th/td पंक्तियाँ लिखते हैं — CSS उन तत्वों को बदलता नहीं
बाद के CSS पाठ्यक्रम सिलेक्टर गहराई से सिखाते हैं; यहाँ लक्ष्य साफ, दोहराने योग्य बॉर्डर रेसिपी है

Collapse, स्पेसिंग और पठनीयता

बिना border-collapse: collapse के कई ब्राउज़र अलग बॉर्डर दिखाते हैं जो डबल लाइन या उभरे ग्रिड जैसे लगते हैं। डेटा तालिकाओं के लिए Collapse शुरुआती की सामान्य पसंद है क्योंकि यह एक सुसंगत स्प्रेडशीट-जैसी सतह की तरह पढ़ा जाता है। सेल के अंदर padding उतना ही महत्वपूर्ण है जितनी रेखा: शून्य padding पाठ को बॉर्डर से चिपका देता है और स्कैन थकाऊ बनाता है। 6px–8px से शुरू करें और अभ्यास पृष्ठ पर आँख से समायोजित करें। रंग वैकल्पिक है — सीखने के लिए तटस्थ ग्रे या गहरा चारकोल पर्याप्त; तेज़ रंग उन संख्याओं से ध्यान हटाते हैं जिनकी आप तुलना करते हैं।

संरचना रहती है; रूप स्थानांतरित होता है

CSS होने के कारण th हेडर न मिटाएँ। केवल रंगीन बॉक्स में बिना वास्तविक तालिका मार्कअप के सारणी संबंध न रखें। बॉर्डर Tables सत्र में बने कंकाल पर सजावट और स्पष्टता हैं। यदि डेटा सारणीबद्ध नहीं है, सूचियों पर लौटें — सुंदर रेखाएँ गलत तत्व चयन नहीं सुधारतीं। इसी तरह, केवल इसलिए नेस्टेड लेआउट तालिकाएँ फिर से न जगाएँ कि बॉर्डर अचानक अच्छे लगते हैं; पृष्ठ क्षेत्र अभी भी संरचना और बाद के CSS लेआउट के हैं।

अपने एडिटर में अभ्यास

Tables सत्र की छोटी अभ्यास तालिका को वास्तविक th/td सेल के साथ फिर उपयोग करें (या फिर बनाएँ)।
CSS से बॉर्डर जोड़ें — पहले हर सेल पर inline स्टाइल ताकि हर प्रॉपर्टी दिखे।
डबल लाइन बनाम एकल ग्रिड तुलना के लिए border-collapse चालू/बंद करें।
हर सेल में पाठ आराम से बैठे, इसके लिए padding जोड़ें; 4px फिर 8px आज़माएँ।
दूसरे नमूने जैसे class प्लस छोटे <style> ब्लॉक में रिफैक्टर करें।
स्टाइल के बाद पुष्टि करें कि हेडर अभी भी th और डेटा सेल अभी भी td हैं।
वैकल्पिक: लेबल पर ज़ोर देने के लिए केवल .grid th को थोड़ा मज़बूत बॉर्डर या बैकग्राउंड दें — HTML अर्थ बदले बिना।

आसान गलतियाँ

गंभीर साइटों के लिए केवल अप्रचलित प्रेजेंटेशनल एट्रिब्यूट जैसे border="1" पर निर्भर रहना
बिना collapse बॉर्डर छोड़ना और सोचना क्यों रेखाएँ मोटी या डबल दिखती हैं
शून्य padding ताकि पाठ बॉर्डर छुए
CSS से स्टाइल करना लेकिन अर्थपूर्ण th लेबल हटाना
वैश्विक td { border: ... } लगाना जो अनजाने में असंबंधित तालिकाएँ बदल दे
बॉर्डर CSS को फिर से नेस्टेड तालिकाओं से पेज लेआउट बनाने का कारण मानना

सारांश

th और td पर CSS border (और table पर collapse) को प्राथमिकता दें
border-collapse: collapse ग्रिड को एकल रेखाओं में साफ करता है
Padding सेल के अंदर पठनीयता सुधारता है
संरचना HTML में रहती है; रूप CSS में
नए काम के लिए अप्रचलित border एट्रिब्यूट पर निर्भर न रहें
तालिका बढ़ने पर दोहराए गए inline बॉर्डर को class में रिफैक्टर करें

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

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

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

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

❓

प्रश्न

🎯

70%

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

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

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

भाषा