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

HTML तालिकाएँ

जब डेटा की स्पष्ट पंक्तियाँ और स्तंभ हों — समयसारिणी, स्कोर शीट, कीमत तुलना, सीटिंग चार्ट — HTML table का उपयोग करें, न कि स्पेस का ढेर या सूचियों से बना नकली ग्रिड। सूचियों ने एक मुख्य अक्ष पर सेट और क्रम सिखाए। तालिकाएँ द्वि-आयामी डेटा सिखाती हैं: हर कक्ष पंक्ति–स्तंभ चौराहे पर एक लेबल के साथ बैठता है जिसे आप नाम दे सकते हैं। अगर कोई पूछे «पंक्ति दो, स्तंभ Score में क्या है?», तालिका ईमानदार उत्तर है।

तालिका किस लिए है

तालिका एक ग्रिड पर संबंध व्यक्त करती है। पाठक किसी स्तंभ नीचे या किसी पंक्ति पार देखकर मान जल्दी तुलना करते हैं। सहायक तकनीकें हेडर को डेटा कक्षों के साथ घोषित कर सकती हैं जब आप हेडर को th से चिह्नित करते हैं, न कि साधारण td टेक्स्ट को बोल्ड स्टाइल करके। इसलिए तालिकाएँ सारणीबद्ध जानकारी की हैं — पूरे साइट के बैनर, साइडबार और फ़ुटर को नेस्टेड table टैग से बनाने की नहीं, जैसा पुराने लेआउट ट्यूटोरियल करते थे। जब सामग्री सच में तुलनीय तथ्यों का ग्रिड हो, तालिका मार्कअप अपनी जटिलता के लायक होती है।

सीधा उत्तर

table — पूरी तालिका
tr — एक तालिका पंक्ति
th — हेडर कक्ष (स्तंभ या पंक्ति लेबल)
td — डेटा कक्ष
हेडर लेबल th में रखें ताकि अर्थ लोगों और सहायक उपकरणों के लिए स्पष्ट हो। पंक्तियों में कक्ष संख्या समान रखें जब तक बाद में colspan जैसे उन्नत span गुण न सीखें। डेटा ग्रिड के लिए तालिकाएँ; पेज लेआउट के लिए CSS और semantic खंड। छोटा caption (दूसरे डेमो में) ग्रिड पर आने वालों के लिए डेटासेट का नाम बताता है।

सरल डेटा तालिका

th कक्षों की एक हेडर पंक्ति से शुरू करें, फिर td कक्षों की डेटा पंक्तियाँ। यह आकार कई शुरुआती स्कोरबोर्ड और तुलना शीट को कवर करता है।

Simple data table

html

<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ada</td>
<td>98</td>
</tr>
<tr>
<td>Lin</td>
<td>91</td>
</tr>
</table>

सरल नमूने को पढ़ना

table पूरे ग्रिड को लपेटता है
प्रत्येक tr एक क्षैतिज पंक्ति है
पहली पंक्ति स्तंभ लेबल («Name», «Score») के लिए th उपयोग करती है
अगली पंक्तियाँ सामान्य मानों के लिए td उपयोग करती हैं
ब्राउज़र डिफ़ॉल्ट स्टाइल बॉर्डर हल्के दिखा सकता है या नहीं — बाद के पाठ बॉर्डर कवर करते हैं; पहले संरचना
प्रति पंक्ति कक्ष गिनें: दोनों डेटा पंक्तियों में दो कक्ष हैं, दो हेडर से मेल खाते हुए

Caption और पंक्ति लेबल

एक caption सभी के लिए तालिका का नाम बताता है। पहली स्तंभ में th प्रत्येक पंक्ति को लेबल कर सकता है जब पंक्ति शीर्षक स्तंभ शीर्षक जितने महत्वपूर्ण हों। caption छोटा और स्पष्ट रखें।

Table with caption and row headers

html

<table>
<caption>Practice quiz scores</caption>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<th>Ada</th>
<td>98</td>
</tr>
<tr>
<th>Lin</th>
<td>91</td>
</tr>
</table>

caption नमूने को पढ़ना

सामान्य शुरुआती पैटर्न में caption table के अंदर पहला चाइल्ड होना चाहिए
स्तंभ हेडर ऊपर की पंक्ति में th रहते हैं
पहली स्तंभ में पंक्ति नाम भी th हो सकते हैं ताकि «Ada» लेबल हो, सिर्फ संख्या जैसा कक्ष नहीं
शेष कक्ष वास्तविक स्कोर के लिए td रहते हैं
आप अभी भी पेज लेआउट नहीं बना रहे — एक छोटा डेटासेट वर्णन कर रहे हैं

तालिका बनाम सूची बनाम लेआउट

एक मुख्य अक्ष वाले संबंधित आइटम या चरण → सूचियाँ (पिछले पाठ की ul / ol)
पंक्तियों और स्तंभों में तुलना किए गए मान → तालिकाएँ
पूरे-पेज क्षेत्र (बैनर, स्तंभ, फ़ुटर) → बाद में semantic संरचना + CSS, नहीं विशाल नेस्टेड लेआउट तालिकाएँ
पुरानी «table layout» आदतें छोटे स्क्रीन पर प्रतिक्रियाशीलता तोड़ती हैं और पहुँच कठिन बनाती हैं। अगर आप केवल लोगो को मेनू के पास रखने के लिए तालिकाएँ नेस्ट कर रहे हों, रुकें और लेआउट पाठों की प्रतीक्षा करें। प्रश्न: «क्या मैं ग्रिड में कक्ष तुलना कर रहा हूँ, या केवल पेज पर बॉक्स खींच रहा हूँ?»

ग्रिड के लिए पहुँच आदतें

बोल्ड td टेक्स्ट जो केवल दृश्य रूप से हेडर लगता है, उससे असली th हेडर पसंद करें। स्पष्ट caption (या निकट शीर्षक) ग्रिड में प्रवेश से पहले विषय बताता है। पंक्ति कक्ष संख्या संरेखित रखें ताकि tab या swipe पर स्तंभ ईमानदार रहें। scope जैसे उन्नत गुण जटिल तालिकाओं में हेडर संबंध सुधारते हैं — पहले बुनियादी th/td विभाजन मजबूत सीखें, फिर परिष्कृत करें। केवल रंग पर निर्भर होकर लेबल कक्ष न चिह्नित करें।

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

पहली पंक्ति में दो हेडर कक्ष (th) वाली table बनाएँ।
मिलती td संख्या वाली तीन डेटा पंक्तियाँ जोड़ें।
ब्राउज़र में देखें और पुष्टि करें कि ग्रिड बाएँ-से-दाएँ, ऊपर-से-नीचे अपेक्षित पढ़ा जाता है।
वैकल्पिक: caption जोड़ें और पहली स्तंभ को दूसरे नमूने जैसे पंक्ति-लेबल th बनाएँ।
जानबूझकर एक पंक्ति को गायब कक्ष से तोड़ें, अजीब आकार नोट करें, फिर ठीक करें।
तालिका के ऊपर या caption में एक वाक्य लिखें कि डेटा क्या मापता है।
सहपाठी से केवल अपने हेडर से पूछें कौन सा स्तंभ कौन सा है — गलत अनुमान पर th टेक्स्ट बदलें।

आसान गलतियाँ

पूरी वेबसाइट विशाल नेस्टेड तालिकाओं के रूप में बनाना (पुरानी लेआउट आदत)
जब कक्ष सच में हेडर हों तब केवल td का उपयोग
प्रति पंक्ति असमान कक्ष संख्या
जहाँ सरल ul/ol एकल-अक्ष सूची बेहतर व्यक्त करे वहाँ तालिका का उपयोग
मानव-पठनीय शीर्षक के बिना तालिका छोड़ना (caption या heading)
आधुनिक अभ्यास पृष्ठों में प्राचीन «layout table» स्निपेट कॉपी करना

सूचियों के बाद यह कैसे फिट होता है

सूचियाँ एक-आयामी संग्रह व्यवस्थित करती हैं। तालिकाएँ ग्रिड। जल्द आप बॉर्डर और स्पेसिंग स्टाइल करेंगे; यह पाठ कंकाल लॉक करता है: ईमानदार हेडर के साथ table, tr, th और td। डेटा सारणीबद्ध रखें, लेआउट कहीं और, और बाद का CSS पहले से सार्थक संरचना सजाएगा।

सारांश

तालिकाएँ table + tr + th / td उपयोग करती हैं
सारणीबद्ध डेटा ग्रिड के लिए, आधुनिक पूरे-पेज लेआउट के लिए नहीं
हेडर लेबल के लिए th पसंद करें (स्तंभ और, जब उपयोगी हो, पंक्तियाँ)
caption डेटासेट नाम देने में मदद करता है
पंक्तियों में कक्ष संख्या सुसंगत रखें
बिना दूसरे अक्ष के साधारण सेट और चरणों के लिए सूचियाँ बेहतर रहती हैं

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

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

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

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

❓

प्रश्न

🎯

70%

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

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

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