डेटा टेबल ऑनलाइन कैसे बनाएं

HTML कोड दर्ज करने के लिए एक HTML संपादक या सिर्फ एक साधारण नोटपैड टेक्स्ट दस्तावेज़ खोलें। यदि आप HTML कोडिंग के आदी हैं तो नोटपैड अच्छा काम करता है। HTML संपादक दोहराए जाने वाले कार्यों को तेजी से करते हैं, लेकिन कुछ, जैसे फ्रंटपेज, अतिरिक्त, अनावश्यक कोडिंग जोड़ते हैं जो वेब पेजों को धीमा कर सकते हैं। सबसे अच्छी बात यह है कि पहले HTML संपादक के साथ कोड है, फिर वापस जाएं और कोड को हाथ से संपादित करके इसे साफ करें।

सीमा, चौड़ाई, पृष्ठभूमि रंग और फ़ॉन्ट रंगों के लिए तालिका विशेषताएँ तय करें। तालिका को आसानी से पढ़ने योग्य बनाने के लिए आपको वेब पेज लेआउट, चौड़ाई, रंग और अन्य विशेषताओं को ध्यान में रखना होगा। आपको यह भी तय करना होगा कि डेटा के लिए कितनी पंक्तियों और स्तंभों की आवश्यकता है। तालिका विशेषताओं को परिभाषित करना शुरू करें। (हमारा उदाहरण प्रत्येक कार्यदिवस पर दोपहर के भोजन और रात के खाने में खाए गए कैलोरी की संख्या को दर्शाता है। हमें तीन कॉलम (दिन, दोपहर का भोजन और रात का खाना) और सात पंक्तियों (लेबल के लिए दो और प्रत्येक कार्यदिवस के लिए एक) की आवश्यकता है।

तालिका और डेटा सेल के चारों ओर एक बॉर्डर जोड़ें। बॉर्डर आसानी से देखने के लिए डेटा को कोशिकाओं में अलग करते हैं। इसे पिक्सेल में मापा जाता है और उनका उपयोग न करने के लिए 0 का मान दिया जा सकता है। एक या दो-पिक्सेल की सीमा आम तौर पर ठीक होती है। सीमा के लिए टैग है

bgcolor=border="CHOSEN_BORDER_WIDTH"

टैग के साथ बॉर्डर का रंग बदला जा सकता है

बॉर्डरकलर = "CHOSEN_COLOR"

जो मूल रंग शब्दों का उपयोग करता है, जैसे कि लाल या काला या छह-अंकीय हेक्साडेसिमल रंग कोड। हेक्साडेसिमल अधिक रंग प्रदान करते हैं। हमारा उदाहरण बॉर्डर = "2" और बॉर्डरकलर = "ब्लैक" का उपयोग करता है।

पूरी तालिका की चौड़ाई निर्धारित करें। इसे पिक्सल या स्क्रीन साइज के प्रतिशत में मापा जाता है। पिक्सेल निश्चित होते हैं और प्रतिशत तालिका को विभिन्न स्क्रीन आकारों में समायोजित करने की अनुमति देते हैं। पंक्तियों में डेटा की चौड़ाई के आधार पर चौड़ाई का न्याय करने का प्रयास करें। यदि आपको बाद में पता चलता है कि टेबल बहुत पतली या चौड़ी है, तो इसे बदला जा सकता है। हमारा उदाहरण चौड़ाई = "175" का उपयोग करता है।

डेटा सेल का बैकग्राउंड कलर सेट करें। यह पेज के बैकग्राउंड कलर से अलग है, जो अच्छा कंट्रास्ट ऑफर कर सकता है। टैग है

bgcolor="CHOSEN_COLOR"

बिल्कुल सीमा रंग की तरह। हमारा उदाहरण bgcolor="white" का उपयोग करता है।

सेल में टेक्स्ट का फॉन्ट कलर सेट करें। सुनिश्चित करें कि रंग पृष्ठभूमि के साथ अच्छी तरह से मेल खाता है, इसलिए इसे आसानी से पढ़ा जा सकता है। अंधेरे पर रोशनी या रोशनी पर अंधेरा हमेशा सबसे अच्छा काम करता है। टैग है

फ़ॉन्ट = "CHOSEN_COLOR"

हमारा उदाहरण फ़ॉन्ट = "ब्लैक" है, जो सफेद पृष्ठभूमि के साथ अच्छी तरह से मेल खाता है।

बाएँ और दाएँ तीर के बीच संपूर्ण तालिका टैग को टैग विशेषताओं के बीच रिक्त स्थान के साथ लिखें और सामने तालिका टैग से शुरुआत करें। टैग का क्रम मायने नहीं रखता, जब तक कि "टेबल" सामने है।

कॉलम की चौड़ाई निर्धारित करें। प्रत्येक स्तंभ की चौड़ाई पूरी तालिका की चौड़ाई पर निर्भर करती है। तालिका की चौड़ाई लें और समान आकार के कॉलम प्राप्त करने के लिए इसे कक्षों की संख्या से विभाजित करें। यदि आवश्यक हो, तो कॉलम की चौड़ाई समायोजित करें, लेकिन कुल तालिका की चौड़ाई से अधिक नहीं हो सकती। जब एक सेल की चौड़ाई बदलती है, तो अन्य सेल को टेबल की कुल चौड़ाई में समायोजित करने की आवश्यकता होती है। (हमारे उदाहरण की चौड़ाई 175 है और प्रति पंक्ति तीन कॉलम हैं, इसलिए लगभग 59 का सम-विभाजन। वास्तविक विभाजन 70, 60, 40 है।)

अपना डेटा जोड़ना शुरू करें। सबसे पहले, एक नई लाइन शुरू करें और कोड के साथ एक टेबल रो जोड़ें

सेल के लिए अपना डेटा दर्ज करें; रिक्त कोशिकाओं का प्रतिनिधित्व करने के लिए इस कोड का उपयोग करना:

टैग के साथ सेल बंद करें. यदि वांछित हो, तो सेल बॉर्डर रंग निर्दिष्ट करने के लिए बॉर्डरकलर टैग का उपयोग किया जाता है। यदि इसे छोड़ दिया जाता है, तो डिफ़ॉल्ट तालिका बॉर्डरकलर का उपयोग किया जाता है। हमारे उदाहरण का पहला सेल कोड है:

तालिका डेटा सेल बनाने को दोहराएं, प्रत्येक एक नई लाइन पर, जब तक कि पंक्ति में सभी सेल पूर्ण नहीं हो जाते। फिर टैग के साथ पंक्ति समाप्त करें. अगली पंक्ति को उसी प्रक्रिया से शुरू करें, जो से शुरू होती है

के साथ तालिका कोड बंद करें टैग। हमारा अंतिम तालिका कोड, यदि डेटा की दो पंक्तियों के बाद समाप्त होता है, तो नीचे है।

• HTML संपादक या नोटपैड
• डेटा