डिफ़ॉल्ट HTML तालिकाएँ बहुत कम दिखती हैं—उन्हें कुछ अच्छे दिखने वाले CSS प्रभावों से प्रभावित करें।
बड़ी मात्रा में जानकारी को स्पष्ट रूप से प्रस्तुत करने के लिए अपनी वेबसाइट पर तालिका जोड़ना एक उपयोगी तरीका है। तालिकाएँ स्थान का कुशल उपयोग भी प्रदान करती हैं, और आपको जटिल डेटा को अधिक आसानी से पढ़ने और तुलना करने देती हैं।
आप CSS का उपयोग करके तालिकाओं को अधिक आकर्षक बनाने के लिए डिज़ाइन कर सकते हैं। ऐसा करने से आपकी वेबसाइट के समग्र उपयोगकर्ता अनुभव में भी वृद्धि हो सकती है।
आधुनिक एकल पंक्तियाँ और कॉलम डिज़ाइन
आप एकल पंक्तियों और स्तंभों और मर्ज किए गए कक्षों के साथ एक साधारण तालिका डिज़ाइन जोड़ सकते हैं। तालिका को शैलीबद्ध करना यह भी सुनिश्चित करता है कि आपका वेबपृष्ठ उपयोगकर्ता के लिए आकर्षक है। टेबल स्टाइलिंग के अलावा, अन्य भी हैं शांत HTML प्रभाव और सीएसएस प्रदर्शन वेबसाइट लेआउट आप अपनी वेबसाइट में जोड़ सकते हैं।
आप इसमें इस अभ्यास के लिए कोड देख सकते हैं गिटहब रेपो.
- एक नई HTML फ़ाइल में, मूल HTML कोड संरचना जोड़ें:
एचटीएमएल>
<एचटीएमएल>
<सिर>
<शीर्षक>मेरी सरल तालिकाशीर्षक>
सिर>
<शरीर>
शरीर>
एचटीएमएल> - मुख्य भाग के अंदर, तालिका टैग जोड़ें:
<मेज>
मेज> - HTML तालिका तत्व में शामिल होना चाहिए टेबल की पंक्ति तालिका के अंदर प्रत्येक पंक्ति के लिए टैग। शीर्ष पंक्ति का उपयोग आमतौर पर शीर्षकों के लिए किया जाता है। उपयोग टेबल हैडर तालिका में प्रत्येक स्तंभ का प्रतिनिधित्व करने के लिए HTML टैग:
<टी.आर.>
<वां>शीर्षक 1वां>
<वां>शीर्षक 2वां>
<वां>शीर्षक 3वां>
टी.आर.> - हेडर पंक्ति के नीचे और पंक्तियाँ जोड़ें। उपयोग तालिका डेटा तालिका में प्रत्येक सेल में डेटा जोड़ने के लिए HTML टैग:
<टी.आर.>
<टीडी>पंक्ति 1, स्तंभ 1टीडी>
<टीडी>पंक्ति 1, स्तंभ 2टीडी>
<टीडी>पंक्ति 1, स्तंभ 3टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 2, स्तंभ 1टीडी>
<टीडी>पंक्ति 2, स्तंभ 2टीडी>
<टीडी>पंक्ति 2, स्तंभ 3टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 3, स्तंभ 1टीडी>
<टीडी>पंक्ति 3, स्तंभ 2टीडी>
<टीडी>पंक्ति 3, स्तंभ 3टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 4, स्तंभ 1टीडी>
<टीडी>पंक्ति 4, स्तंभ 2टीडी>
<टीडी>पंक्ति 4, स्तंभ 3टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 5, स्तंभ 1टीडी>
<टीडी>पंक्ति 5, स्तंभ 2टीडी>
<टीडी>पंक्ति 5, स्तंभ 3टीडी>
टी.आर.> - हेड टैग के अंदर स्टाइल टैग जोड़ें। तालिका में कुछ सामान्य स्टाइल जोड़ें, जैसे छाया, गोल टेबल कोने, फ़ॉन्ट और मार्जिन:
<शैली>
मेज {
सीमा-पतन: गिर जाना;
चौड़ाई: 100%;
रंग: #333;
फुहारा परिवार: एरियल, सान्स सेरिफ़;
फ़ॉन्ट आकार: 14पिक्सल;
पाठ संरेखित: बाएं;
बॉर्डर-त्रिज्या: 10पिक्सल;
अतिप्रवाह: छिपा हुआ;
डब्बे की छाया: 0 0 20पिक्सलrgba(0, 0, 0, 0.1);
अंतर: ऑटो;
मार्जिन टॉप: 50पिक्सल;
मार्जिन नीचे: 50पिक्सल;
}
शैली> - तालिका शीर्षलेख को पृष्ठभूमि रंग और संरेखित पाठ देने के लिए शैलीबद्ध करें:
मेजवां {
पृष्ठभूमि का रंग: #ff9800;
रंग: #फफ्फ;
फ़ॉन्ट वजन: निडर;
गद्दी: 10पिक्सल;
पाठ बदलना: अपरकेस;
पत्र अंतराल: 1पिक्सल;
बॉर्डर-शीर्ष: 1पिक्सलठोस#फफ्फ;
सीमा-नीचे: 1पिक्सलठोस#सीसीसी;
} - स्लेटी और सफ़ेद रंगों के बीच वैकल्पिक करने के लिए और पंक्ति पर मँडराते समय प्रभाव जोड़ने के लिए तालिका पंक्तियों को शैलीबद्ध करें:
मेजटी.आर.: nth-चाइल्ड (यहां तक कि)टीडी {
पृष्ठभूमि का रंग: #f2f2f2;
}मेजटी.आर.: होवरटीडी {
पृष्ठभूमि का रंग: #ffedcc;
} - तालिका के कक्षों के अंदर डेटा को शैलीबद्ध करें:
मेजटीडी {
पृष्ठभूमि का रंग: #फफ्फ;
गद्दी: 10पिक्सल;
सीमा-नीचे: 1पिक्सलठोस#सीसीसी;
फ़ॉन्ट वजन: निडर;
} - तालिका को वेब ब्राउज़र में देखने के लिए अपनी HTML फ़ाइल खोलें:
मल्टी-लाइन्ड सेल टेबल डिज़ाइन
कुछ तालिकाओं में बहु-पंक्ति वाले सेल बनाने के लिए मर्ज की गई पंक्तियों वाले कॉलम शामिल होते हैं।
- शीर्षकों के साथ केवल शीर्ष को रखते हुए, सभी वर्तमान तालिका पंक्तियों को हटा दें:
<मेज>
<टी.आर.>
<वां>शीर्षक 1वां>
<वां>शीर्षक 2वां>
<वां>शीर्षक 3वां>
टी.आर.>
मेज> - रोस्पैन विशेषता का उपयोग करके एक बहु-पंक्ति वाला सेल बनाएं। यह उस सेल को पंक्तियों की निर्दिष्ट संख्या में विस्तारित करेगा।
खंड 1
<टी.आर.>
<टीडीरोस्पेन="2">मल्टी-लाइन सेलटीडी>
<टीडी>पंक्ति 1, स्तंभ 2टीडी>
<टीडी>पंक्ति 1, स्तंभ 3टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 2, स्तंभ 2टीडी>
<टीडी>पंक्ति 2, स्तंभ 3टीडी>
टी.आर.> - भिन्न रोस्पैन मान के साथ एक और बहु-कक्षीय पंक्ति जोड़ते समय, संबंधित संख्या जोड़ें तालिका पंक्तियाँ एचटीएमएल टैग। यह उस ऊंचाई या पंक्तियों की संख्या से मेल खाने के लिए है जो सेल में फैली हुई है। उदाहरण के लिए, यदि किसी सेल का रोस्पैन 3 है, तो तालिका को ठीक से संरेखित करने के लिए आपको अन्य कॉलम में तीन पंक्तियाँ जोड़नी होंगी।
धारा 2
<टी.आर.>
<टीडीरोस्पेन="3">मल्टी-लाइन सेलटीडी>
<टीडी>पंक्ति 3, स्तंभ 2टीडी>
<टीडी>पंक्ति 3, स्तंभ 3टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 4, स्तंभ 2टीडी>
<टीडी>पंक्ति 4, स्तंभ 3टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 5, स्तंभ 2टीडी>
<टीडी>पंक्ति 5, स्तंभ 3टीडी>
टी.आर.> - तालिका को वेब ब्राउज़र में देखने के लिए अपनी HTML फ़ाइल खोलें:
मर्ज की गई पंक्ति तालिका डिज़ाइन
बहु-पंक्ति वाले कक्षों के समान, तालिकाओं में भी पंक्तियाँ हो सकती हैं जो एकाधिक स्तंभों में विलीन हो जाती हैं।
- शीर्षकों के साथ केवल शीर्ष को रखते हुए, सभी वर्तमान तालिका पंक्तियों को हटा दें:
<मेज>
<टी.आर.>
<वां>शीर्षक 1वां>
<वां>शीर्षक 2वां>
<वां>शीर्षक 3वां>
टी.आर.>
मेज> - तालिका में और तालिका पंक्तियाँ जोड़ें। 3 स्तंभों में से किसी एक पंक्ति को मर्ज करने के लिए कॉलस्पैन विशेषता का उपयोग करें:
खंड 1
<टी.आर.>
<टीडीशैली="पृष्ठभूमि-रंग: #ffedcc"कॉल्सपन="3">Q1टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 2, स्तंभ 1टीडी>
<टीडी>पंक्ति 2, स्तंभ 2टीडी>
<टीडी>पंक्ति 2, स्तंभ 3टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 3, स्तंभ 1टीडी>
<टीडी>पंक्ति 3, स्तंभ 2टीडी>
<टीडी>पंक्ति 3, स्तंभ 3टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 4, स्तंभ 1टीडी>
<टीडी>पंक्ति 4, स्तंभ 2टीडी>
<टीडी>पंक्ति 4, स्तंभ 3टीडी>
टी.आर.> - तालिका के अनुभागों को अलग करने के लिए अन्य मर्ज की गई पंक्ति जोड़ें:
धारा 2
<टी.आर.>
<टीडीशैली="पृष्ठभूमि-रंग: #ffedcc"कॉल्सपन="3">Q2टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 6, स्तंभ 1टीडी>
<टीडी>पंक्ति 6, स्तंभ 2टीडी>
<टीडी>पंक्ति 6, स्तंभ 3टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 7, कॉलम 1टीडी>
<टीडी>पंक्ति 7, कॉलम 2टीडी>
<टीडी>पंक्ति 7, स्तंभ 3टीडी>
टी.आर.>
<टी.आर.>
<टीडी>पंक्ति 8, कॉलम 1टीडी>
<टीडी>पंक्ति 8, कॉलम 2टीडी>
<टीडी>पंक्ति 8, स्तंभ 3टीडी>
टी.आर.> - तालिका को वेब ब्राउज़र में देखने के लिए अपनी HTML फ़ाइल खोलें:
अपने डेटा का सर्वोत्तम उपयोग करने के लिए आकर्षक तालिकाओं का उपयोग करें
HTML तालिकाएँ आपकी वेबसाइट पर संरचित डेटा प्रदर्शित करने का एक शानदार तरीका हैं। आप डिफ़ॉल्ट उपस्थिति को बेहतर बनाने के लिए उन्हें सीएसएस के साथ स्टाइल कर सकते हैं। हालांकि, सुनिश्चित करें कि आप दूर नहीं जाते हैं और अभिगम्यता कारणों से लेआउट के लिए तालिकाओं का उपयोग करते हैं, उन्हें डेटा के लिए सख्ती से रखें।
बड़ी तालिकाएँ बनाने और अद्यतन करने के लिए श्रमसाध्य हो सकती हैं, खासकर यदि आप स्तंभों और पंक्तियों का उपयोग करते हैं। मार्कअप जेनरेट करने के लिए आप अपना खुद का कोड लिख सकते हैं या मार्कडाउन जैसे फ्रेंडली सिंटैक्स का लाभ उठा सकते हैं।
