टेबल पर छवि पृष्ठभूमि जोड़ने के लिए सीएसएस पृष्ठभूमि संपत्ति का उपयोग करें
अपनी पृष्ठभूमि से अलग-अलग तालिकाओं को वेबपृष्ठ पर अन्य सभी चीज़ों के सापेक्ष तालिका की सामग्री पर जोर देने में मदद मिलती है। एक टेबल पृष्ठभूमि जोड़ने के लिए, आपको अपने वेबपृष्ठ का समर्थन करने वाली कैस्केडिंग स्टाइल शीट (सीएसएस) को ट्विक करना होगा।
शुरू करना
तालिका में पृष्ठभूमि छवि जोड़ने का सबसे अच्छा तरीका सीएसएस पृष्ठभूमि संपत्ति का उपयोग करना है। सीएसएस को प्रभावी ढंग से लिखने और अप्रत्याशित डिस्प्ले ग्लिच से बचने के लिए खुद को तैयार करने के लिए, अपनी पृष्ठभूमि छवि खोलें और ऊंचाई और चौड़ाई का नोट बनाएं।
फिर अपनी होस्टिंग प्रदाता को अपनी छवि अपलोड करें। छवि के लिए यूआरएल का परीक्षण करें; छवियों को प्रदर्शित नहीं करने के सबसे आम कारणों में से एक है क्योंकि यूआरएल में एक टाइपो है।
उस चरण को समाप्त करने के बाद, अपने दस्तावेज़ के शीर्ष में एक सीएसएस स्टाइल ब्लॉक डालें:
<शैली प्रकार = "पाठ / सीएसएस">
- अपनी मेज पर पृष्ठभूमि के लिए अपना सीएसएस लिखें और इसे स्टाइल ब्लॉक के अंदर रखें:
तालिका {पृष्ठभूमि: यूआरएल (" छवि के लिए यूआरएल ") दोहराना नहीं; }
- अपनी तालिका को HTML में रखें:
सेल 1
सेल 2
सेल 1
सेल 2
- छवि चौड़ाई और ऊंचाई से मेल खाने के लिए तालिका की चौड़ाई और ऊंचाई सेट करें।
<टेबल शैली = " चौड़ाई: 400 पीएक्स; ऊंचाई: 500 पीएक्स; "> ...
यदि आपकी तालिका सामग्री छवि ऊंचाई और चौड़ाई से बड़ी है, तो पृष्ठभूमि छवि केवल एक बार प्रदर्शित होगी।
बस एक टेबल पर एक पृष्ठभूमि रखो
उपरोक्त निर्देश पृष्ठ पर प्रत्येक तालिका पर एक ही पृष्ठभूमि छवि सेट करेंगे।
यदि आप पृष्ठभूमि को केवल विशिष्ट तालिकाओं पर रखना चाहते हैं, तो आपको कक्षा विशेषता का उपयोग करने की आवश्यकता है।
- पढ़ने के लिए अपने सीएसएस बदलें:
table.background {पृष्ठभूमि: यूआरएल (" छवि के लिए यूआरएल ") दोहराना नहीं; }
- उस पृष्ठभूमि तालिका को उस पृष्ठभूमि में जोड़ें जिसे आप पृष्ठभूमि छवि चाहते हैं। उन तालिकाओं के लिए चौड़ाई और ऊंचाई सेट करें।
<टेबल क्लास = "पृष्ठभूमि" शैली = "चौड़ाई: 400 पीएक्स; ऊंचाई: 500 पीएक्स;> ...
टेबल पृष्ठभूमि छवि दोहराएं
बड़ी सारणी, या अधिक सामग्री वाले टेबल, पृष्ठभूमि को दोहराने की आवश्यकता हो सकती है ताकि पूरी तालिका भर दी जा सके। अपने सीएसएस में मान बदलें ताकि छवि वाई-अक्ष, एक्स-अक्ष पर दोहराई जा सके, या दोनों पर टाइल हो।
पृष्ठभूमि: यूआरएल (" छवि के लिए यूआरएल ") दोहराना ;
डिफ़ॉल्ट रूप से दोहराना मूल्य टाइल किया जाएगा, लेकिन आप क्रमशः क्षैतिज या लंबवत टाइल करने के लिए दोहराए गए मान को दोहराना-x या दोहराने के लिए सेट कर सकते हैं।
सेल पृष्ठभूमि रंग तालिका पृष्ठभूमि छवि ब्लॉक
तालिका कक्षों पर सेट कोई भी पृष्ठभूमि रंग तालिका पर पृष्ठभूमि छवि को ओवरराइड करेगा। तो तालिका पृष्ठभूमि छवियों के संयोजन में अपने कोशिकाओं पर पृष्ठभूमि रंगों का उपयोग करते समय सावधान रहें।
विचार
टेबल पृष्ठभूमि आपके टेबल को अंतर्निहित पृष्ठ से अलग रखेगी। हालांकि, इस तकनीक का उपयोग करने से पहले दो बार सोचें। एक तटस्थ छवि डालने से विचलित नहीं हो सकता है, लेकिन जटिल चित्रों को प्यारा होने का इरादा है (उदाहरण के लिए, पालतू गोद लेने का संकेत देने वाली तालिका के पीछे बिल्ली के बच्चे की तस्वीर डालना) गैर-व्यावसायिक दिखाई दे सकता है और टैब्यूलर डेटा की पठनीयता को प्रभावित कर सकता है।
आपके द्वारा उपयोग की जाने वाली कोई भी छवि उचित रूप से लाइसेंस प्राप्त होनी चाहिए; सिर्फ इसलिए कि आप वेब पर एक फोटो पा सकते हैं इसका मतलब यह नहीं है कि आप इसे अपने स्वयं के उपयोग के लिए उपयुक्त बना सकते हैं।
कॉपीराइट का सम्मान करें!
- छवि चौड़ाई और ऊंचाई से मेल खाने के लिए तालिका की चौड़ाई और ऊंचाई सेट करें।