HTML में टेबल कैसे बनाये। रंग चार्ट

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

एक मेज पर शुरू हो रही है

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

इसलिए, जब HTML में एक तालिका बनाना शुरू करते हैं, तो हम अनुशंसा करते हैं कि आप जितना संभव हो उतना ध्यान केंद्रित करें और विचलित न हों।

सबसे पहले, आपको कागज की एक शीट पर एक भविष्य की मेज खींचनी चाहिए, ध्यान दें कि आपके पास कौन सी और कौन सी सेल होगी, साथ ही साथ अपने आप को एक या किसी अन्य तत्व के मुख्य मापदंडों के लिए भी ध्यान देना चाहिए।

इसके बाद, आपको लाइनों की संख्या को गिनना चाहिएतालिका, साथ ही प्रत्येक पंक्ति में कोशिकाओं की संख्या। हम तालिका में चित्रों की उपस्थिति, पृष्ठभूमि के रंग, सीमाओं, पाठ के रूप में ऐसी वस्तुओं को चिह्नित करने की भी सलाह देते हैं। तब ही आप रिकॉर्ड की गई जानकारी का उपयोग करके HTML में एक तालिका बनाना शुरू कर सकते हैं।

संपादक

तो आपने अपना टेबल लेआउट बनाया है।अब आपको इसे बनाने के लिए एक उपयुक्त संपादक चुनना होगा। आप विशेष वेबसाइट बिल्डरों को चुन सकते हैं और उनमें एक टेबल बना सकते हैं। इस सॉफ्टवेयर का उपयोग करना, एक वर्ड डॉक्यूमेंट बनाने से ज्यादा कठिन नहीं है। आप फ्रंटपेज जैसे प्रोग्राम का चयन कर सकते हैं। इस तथ्य के बावजूद कि कार्यक्रम काफी पुराना है, इसकी मदद से आप अच्छी साइटें बना सकते हैं, इसके अलावा, आप इस पर एक से अधिक स्व-निर्देश मैनुअल पा सकते हैं।

यदि आप HTML का उपयोग करके एक तालिका बनाना चाहते हैंविशेष कोड, आप इन उद्देश्यों के लिए एक नियमित नोटपैड या एक नियमित शब्द दस्तावेज़ का उपयोग कर सकते हैं। सच है, आपको यहां कड़ी मेहनत करनी होगी, क्योंकि कोड लिखने में लंबा समय लगेगा।

आप में निर्मित संपादक का उपयोग कर सकते हैंसाइट इंजन ही। इसलिए, कई इंजनों में रिकॉर्ड बनाते समय, तालिकाओं सहित विभिन्न तत्वों को जोड़ना संभव है। यहां तक ​​कि अगर आप संपादक की बुनियादी विशेषताओं से संतुष्ट नहीं हैं, तो कोड में बदलाव करना खरोंच से इसे लिखना आसान होगा।

टैग

चाहे आप किसी भी संपादक होंHTML में तालिका बनाने से पहले, आपको मुख्य टैग को याद रखना चाहिए। उनमें से तीन हैं - <तालिका>, <tr> और <td>। ध्यान दें कि सभी टैग जोड़े गए हैं। पहला टैग तालिका को संपूर्ण रूप में दर्शाता है, दूसरा पंक्ति को निर्दिष्ट करता है, तीसरा - पंक्ति के भीतर कक्ष।

प्रत्येक टैग के बारे में थोड़ा और विस्तार।एक तालिका हमेशा <तालिका> टैग के साथ शुरू होती है और </ तालिका> के साथ समाप्त होती है। किसी भी ब्राउज़र के लिए, यह एक कन्वेंशन है कि टेबल इसके सामने है। अगला, लाइनें लिखी जाती हैं, जो <tr> के साथ खुलती है और टैग </ tr> को समाप्त करती है। प्रत्येक पंक्ति में <td> और </ td> टैग का उपयोग करके कोशिकाओं की संख्या होती है।

इस प्रकार, 2x2 तालिका के लिए कोड इस तरह दिखेगा:

<Table>

<tr> <td>

</ td> <td> </ td> </ tr>

<tr> <td> </ td> <td> </ td> </ tr>

</ तालिका>

आप चयनित संपादक से कॉपी करके पृष्ठ के HTML कोड में तालिका सम्मिलित कर सकते हैं।

तालिकाओं, पंक्तियों और कोशिकाओं के लिए पैरामीटर

इसलिए, हमने मूल कोड का विश्लेषण किया है।अब बात करते हैं कि टेबल को कैसे बेहतर बनाया जाए, इसे उज्जवल और अधिक आकर्षक बनाया जाए। ऐसा करने के लिए, आपको टैग के बुनियादी मापदंडों को जानना होगा। वे उद्घाटन टैग के अंदर लिखे गए हैं, प्रत्येक पैरामीटर के बाद एक समान चिह्न के साथ, और फिर इसके मूल्य उद्धरण में लिखे गए हैं। उदाहरण के लिए, HTML तालिका में एक पृष्ठभूमि इस प्रकार सेट की गई है: <तालिका bgcolor = "# FFFFFFF">।

यहां कुछ बुनियादी पैरामीटर दिए गए हैं जो आपके लिए सबसे उपयोगी होंगे। चलो तालिका के साथ ही शुरू करते हैं।

तो, सीमा की चौड़ाई निर्धारित करने से सीमा पैरामीटर को मदद मिलेगी, जो किसी भी संख्या के मूल्य को ले सकता है। बॉर्डर का रंग बॉर्डर कलर द्वारा सेट किया गया है। सामान्य पृष्ठभूमि bgcolor द्वारा दी गई है।

यदि आप तालिका की पृष्ठभूमि को चित्र बनाना चाहते हैं, तो पृष्ठभूमि का उपयोग करें, जबकि आपको चित्र का URL पंजीकृत करना चाहिए।

तालिका के चारों ओर पृष्ठ सामग्री को संरेखित करने से संरेखित पैरामीटर को मदद मिलेगी, जो कि बाएं, केंद्र और दाएं मान ले सकता है।

जोड़ी टैग <कैप्शन>, जो खुलने के तुरंत बाद लिखा गया है <table> टैग, शीर्षक सेट करने में मदद करेगा।

स्ट्रिंग मापदंडों के बारे में थोड़ा।एक पंक्ति में कोशिकाओं का रंग bgcolor का उपयोग करके सेट किया गया है। पाठ के संरेखण को क्षैतिज रूप से संरेखित पैरामीटर (बाएं, केंद्र या दाएं) का उपयोग करके किया जा सकता है, लंबवत - वैध (मान ऊपर, मध्य या नीचे लेता है)।

सेल के बारे में, आप नोट कर सकते हैं कि बैकग्राउंड कलर और बैकग्राउंड इमेज इसके लिए सेट की गई है, साथ ही पूरे टेबल के लिए भी इन्हीं मापदंडों का उपयोग कर। आप संरेखित और मान्य मापदंडों का उपयोग करके पाठ संरेखित कर सकते हैं।

विशेष पैरामीटर भी हैं - कोलस्पैन और रोस्पैन।पहले का उपयोग करते हुए, आप उन स्तंभों की संख्या निर्धारित कर सकते हैं जो सेल विस्तारित करेगा। दूसरी पंक्तियों की संख्या है जो किसी दिए गए सेल को फैला सकती है।

ये सभी सबसे उपयोगी पैरामीटर हैं।

रंग चार्ट

आइए कुछ उपयोगी शब्दों के बारे में बताते हैं जैसे किरंग तालिका। इसका उपयोग पृष्ठ की पृष्ठभूमि, पाठ का रंग, लिंक और अन्य तत्वों को सेट करने के लिए किया जा सकता है। कलर टेबल में लगभग 216 रंग और शेड्स होते हैं। उनमें से प्रत्येक का अपना हेक्साडेसिमल कोड है।

कोड ही हैश साइन के साथ शुरू होता है और इसमें शामिल होता हैसंख्याओं या अक्षरों के तीन जोड़े। उदाहरण के लिए, तालिका में हरा रंग # 007F0 है। प्रत्येक जोड़ी तीन प्राथमिक रंगों में से एक की तीव्रता का प्रतिनिधित्व करती है - लाल, हरा और नीला। तालिका का उपयोग करके, आप इच्छित रंग का चयन कर सकते हैं और एक कोड का उपयोग करके इसे सेट कर सकते हैं।

यदि आपके पास तालिका का उपयोग करने का अवसर नहीं है, तो आप अंग्रेजी में इसके नाम का उपयोग करके रंग सेट कर सकते हैं।

सामग्री

सामग्री के बारे में कुछ शब्द।बेशक, अक्सर हम HTML तालिका में पाठ देख सकते हैं, लेकिन इसका मतलब यह नहीं है कि केवल हम इसे वहां रख सकते हैं। सेल और लाइनों में चित्र, ऑडियो और वीडियो फाइलें, लिंक भी हो सकते हैं।

किसी सेल (लाइन) में टेक्स्ट या कोई अन्य जानकारी डालने के लिए, आपको इसे दो टैग्स के बीच लिखना चाहिए। उदाहरण के लिए: <td> नाम </ td>। सेल "नाम" प्रदर्शित करता है।

आप विशेष टैग - <img>, <audio> और <video> का उपयोग करके ग्राफिक जानकारी और मीडिया फ़ाइलों को रख सकते हैं।

टिप्स

अंत में, हम आपको HTML में किसी भी जटिलता की तालिका बनाने में मदद करने के लिए कुछ उपयोगी टिप्स देंगे।

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

हम आपको सलाह देते हैं कि टेबल फ्रेम तैयार होने पर, बहुत अंत में कोशिकाओं और पंक्तियों की सामग्री लिखें।