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