टेबल बेसिक्स
आज हम data tables देखते हैं — table tag, tr से पंक्तियाँ, th से header cells, और td से data cells।
- 1
Table क्या होती है
पिछले लेसन में lists से items ग्रुप किए। आज ऐसा data दिखाते हैं जिसमें पंक्तियाँ और कॉलम हों — scorecard, price list, timetable। वह आकार table है।
HTML में बाहरी बॉक्स
<table>है। हर पंक्ति<tr>। Header labels के लिए<th>। Data values के लिए<td>। - 2
समस्या: जब डेटा में पंक्तियाँ और कॉलम हों और पैराग्राफ काम न करें
Lists items की लाइन के लिए ठीक हैं। वे यह नहीं कह सकतीं कि “यह नंबर Score के नीचे है, और वह नाम Team के नीचे”। लोगों को ऐसा ग्रिड चाहिए था जहाँ हर सेल साफ़ पंक्ति और कॉलम पर बैठे।
इसलिए HTML ग्रिड के लिए
<table>, हर पंक्ति के लिए<tr>, कॉलम टाइटल के लिए<th>, और values के लिए<td>देता है। Table tabular data के लिए है, पूरे page layout के लिए नहीं। - 3
Browser टेबल के आकार और अलाइनमेंट की गणना कैसे करता है
Browser
<table>खोलता है, फिर हर<tr>को एक पंक्ति की तरह खींचता है। पंक्ति के अंदर<th>headers माने जाते हैं, और<td>data। हर पंक्ति में सेल्स की संख्या एक जैसी रखो ताकि कॉलम सीध में रहें।नीचे उदाहरण में पहली पंक्ति Team और Score लेबल करती है। अगली दो पंक्तियों में मैच के scores हैं।
- 4
आज की प्रैक्टिस: एक साफ़ मैच स्कोरकार्ड ग्रिड बनाना
नीचे छोटी score table पढ़ो, फिर browser pane देखो। colspan से सेल जोड़ना अगले लेसन में आएगा।
- 5
अहम नियम: टेबल सिर्फ़ डेटा के लिए है, पेज लेआउट के लिए कभी नहीं
Table में असली पंक्तियाँ और कॉलम वाला related data रखो। सिर्फ़ sidebar को content के पास रखने के लिए
<table>मत लगाओ। वह काम बाद में CSS का है।
कॉलम या पंक्ति का शीर्षक तय करता है। यह डिफ़ॉल्ट रूप से बोल्ड और सेंटर में दिखता है। स्क्रीन रीडर डेटा पढ़ने से पहले हेडर का नाम बोलते हैं।
वास्तविक मान और डेटा रखता है। यह डिफ़ॉल्ट रूप से सामान्य फॉन्ट और बाईं ओर (Left) अलाइन होता है।
आप क्या सीखेंगे
- 1Tables rows और columns वाला data दिखाती हैं
- 2table पूरा ग्रिड लपेटती है
- 3tr एक पंक्ति है
- 4th कॉलम का लेबल है
- 5td में data value रहता है
लाइन-बाय-लाइन
<table> ... </table>बाहरी ग्रिड। हर पंक्ति इसी टैग के अंदर nest होती है।
<tr> ... </tr>एक table row। यहाँ पहली पंक्ति headers रखती है। अगली पंक्तियाँ data।
<th>Team</th>Header cell। कॉलम को लेबल करती है ताकि लोग समझें नंबर का मतलब क्या है।
<td>287</td>Data cell। असली value यहीं — नाम, score, कीमत।
खुद ट्राई करो
तीन पसंदीदा खानों की दो-कॉलम table बनाओ: Dish और Rating। Header पंक्ति में <th>, हर value में <td>। हर पंक्ति समान चौड़ाई — दो-दो सेल।
हिंट: <table>, फिर <tr> की पंक्तियाँ, हर में मिलते-जुलते सेल।
गलती कहाँ होती है
- 1.सिर्फ़ sidebar को content के पास रखने के लिए table। Tables data के लिए हैं। Layout CSS का काम है।
- 2.सिर्फ़
<td>, बिना<th>। Headers न हों तो ग्रिड रहस्यमय नंबरों का ढेर लगती है।
इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)
Q: पेज लेआउट बनाने के लिए टेबल का उपयोग क्यों नहीं करना चाहिए?↓
लेआउट के लिए टेबल का उपयोग करने से वेब सुलभता (Accessibility) नष्ट हो जाती है क्योंकि स्क्रीन रीडर्स बेवजह पंक्तियों और स्तंभों की घोषणा करते हैं। इसके अलावा मोबाइल स्क्रीन पर रिस्पॉन्सिव बनाना CSS Flexbox या Grid की तुलना में बहुत कठिन होता है।
Q: <th> और <td> में क्या तकनीकी और अर्थपूर्ण अंतर है?↓
<th> हेडर सेल है जो किसी कॉलम या रो का नाम तय करता है (इसके साथ scope="col" या scope="row" जोड़ा जाता है)। <td> साधारण डेटा सेल है जो हेडर के अंतर्गत आने वाले वास्तविक मान को रखता है।
Q: <thead>, <tbody>, और <tfoot> का क्या लाभ है?↓
ये टैग टेबल को तीन अर्थपूर्ण हिस्सों (हेडर, मुख्य बॉडी, और फुटर) में बाँटते हैं। बड़ी टेबल्स में हेडर को ऊपर स्थिर रखकर बॉडी को स्वतंत्र रूप से स्क्रॉल करने और प्रिंट करते समय हर पन्ने पर हेडर दोहराने में ये बेहद उपयोगी होते हैं।