एक वेबपेज पर एक टेबल के लिए एक छवि को पृष्ठभूमि के रूप में सेट करना

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

शुरू करना

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

अपने दस्तावेज़ के शीर्ष में CSS स्टाइल ब्लॉक डालें:

अपनी मेज पर पृष्ठभूमि के लिए अपना सीएसएस लिखें और इसे स्टाइल ब्लॉक के अंदर रखें:

अपनी तालिका को HTML में रखें:

सेल 1सेल 2
सेल 1सेल 2
छवि की चौड़ाई और ऊंचाई से मेल खाने के लिए तालिका की चौड़ाई और ऊंचाई निर्धारित करें।

छवि की चौड़ाई और ऊंचाई से मेल खाने के लिए तालिका की चौड़ाई और ऊंचाई निर्धारित करें।

यदि आपकी तालिका सामग्री छवि की ऊंचाई और चौड़ाई से बड़ी है, तो पृष्ठभूमि छवि केवल एक बार प्रदर्शित होगी।

सिर्फ एक टेबल पर पृष्ठभूमि रखें

उपरोक्त निर्देश पृष्ठ पर प्रत्येक तालिका पर समान पृष्ठभूमि छवि सेट करेंगे। केवल विशिष्ट तालिकाओं पर पृष्ठभूमि रखने के लिए, a. का उपयोग करें कक्षा विशेषता। जोड़ें कक्षापृष्ठभूमि किसी भी तालिका में आप उस पृष्ठभूमि छवि को रखना चाहते हैं। उन तालिकाओं के लिए चौड़ाई और ऊंचाई निर्धारित करें।

तालिका पृष्ठभूमि छवि को दोहराने दें

बड़ी तालिकाएँ, या अधिक सामग्री वाली तालिकाएँ, पृष्ठभूमि को दोहराने की आवश्यकता हो सकती हैं ताकि पूरी तालिका भर जाए। अपने CSS में मान बदलें ताकि छवि y-अक्ष, x-अक्ष पर दोहराई जाए, या दोनों पर टाइल की गई हो।

पृष्ठभूमि: url ("छवि का URL") दोहराना; 

डिफ़ॉल्ट रूप से, रिपीट वैल्यू को टाइल किया जाएगा, लेकिन आप रिपीट वैल्यू को भी इस पर सेट कर सकते हैं।

दोहराने-x

या।

दोहराने-y

क्रमशः क्षैतिज या लंबवत टाइल करने के लिए।

सेल पृष्ठभूमि रंग तालिका को अवरुद्ध करते हैं पृष्ठभूमि छवि

कोई भी पृष्ठभूमि रंग तालिका कक्षों पर सेट तालिका पर पृष्ठभूमि छवि को ओवरराइड करता है। इसलिए तालिका पृष्ठभूमि छवियों के संयोजन में अपने कक्षों पर पृष्ठभूमि रंगों का उपयोग करते समय सावधान रहें।

विचार

तालिका पृष्ठभूमि आपकी तालिकाओं को अंतर्निहित पृष्ठ से अलग करती है। हालाँकि, इस तकनीक का उपयोग करने से पहले दो बार सोचें। एक तटस्थ छवि सम्मिलित करना ध्यान भंग करने वाला नहीं हो सकता है, लेकिन सुंदर होने के लिए जटिल चित्र (उदाहरण के लिए, एक सम्मिलित करना) एक मेज के पीछे एक बिल्ली के बच्चे की तस्वीर जो पालतू गोद लेने का संकेत देती है) अव्यवसायिक लग सकती है और read की पठनीयता को प्रभावित कर सकती है सारणीबद्ध आंकड़े.