केवळ पाच मिनिटांत सीएसएस सारणी कशी तयार करावी ते जाणून घ्या
आपण असे ऐकले असेल की CSS आणि HTML सारण्या एकत्रित करत नाहीत. हे केवळ सत्य नाही. होय, लेआऊटसाठी HTML सारण्या वापरणे यापुढे वेब डिझाइन सर्वोत्तम सराव नाही, जी सीएसएस लेआउट शैली बदललेली आहे, परंतु सारणी अजूनही एखाद्या वेबपृष्ठावर टॅब्युलर डेटा जोडण्यासाठी वापरण्यासाठी योग्य मार्कअप आहेत.
दुर्दैवाने, बर्याच वेब व्यावसायिकांनी ते विष आहे असे विचार करून सारण्यांपेक्षा दुरावले कारण त्यापैकी बर्याच व्यावसायिकांनी या सामान्य HTML घटकासह काम करण्याचा थोडा अनुभव घेतला आहे आणि एका वेबपृष्ठावर त्यांना हाताळण्यासाठी त्यांना संघर्ष करावा लागतो. उदाहरणार्थ, जर आपल्याकडे पृष्ठावर एक टेबल असेल आणि आपण टेबलच्या सेलमध्ये अंतर्गत ओळी जोडू इच्छित असल्यास
CSS सारणी सीमा
जेव्हा आपण टेबलमध्ये बॉर्डर जोडण्यासाठी सीएसएस वापरता, तेव्हा ते केवळ टेबलच्या बाहेरील सभोवताल जोडते जर आपण त्या सारणीच्या स्वतंत्र सेल्समध्ये आंतरिक ओळी जोडू इच्छित असल्यास, आपल्याला आंतरिक सीएसएस घटकांना सीमा जोडणे आवश्यक आहे. आपण वैयक्तिक सेल्समध्ये ओळी जोडण्यासाठी एचआर टॅग देखील वापरू शकता
या लेखातील शैलींना लागू करण्यासाठी, आपण जाहीरपणे आपल्या वेब पृष्ठावर एक टेबल असणे आवश्यक आहे. नंतर आपण आपल्या कागदपत्राच्या शीर्षस्थानी एक शैली पत्रक म्हणून एक आंतरिक शैली पत्रक तयार करावी (आपण आपल्या साइटवर एकच पृष्ठ असेल तरच हे करू शकता) किंवा बाह्य शैली पत्रकाप्रमाणे दस्तऐवज संलग्न केले पाहिजे (हे आपणच आहात जर आपल्या साइटवर एकापेक्षा जास्त पृष्ठे असतील तर आपल्याला एका बाह्य पत्रकातील सर्व पृष्ठांची शैली करण्याची अनुमती मिळेल). आपण त्या शैली शीटमध्ये आतील रेखा जोडण्यासाठी शैली लावली.
आपण प्रारंभ करण्यापूर्वी
प्रथम आपण हे ठरवण्याची आवश्यकता आहे की आपण आपल्या टेबलवर कुठे रेषा ठेवू इच्छिता. आपल्याकडे अनेक पर्याय आहेत, यासह:
- एक ग्रीड तयार करण्यासाठी सर्व पेशी आसपासच्या;
- फक्त स्तंभ दरम्यान ओळी पोजिशनिंग;
- फक्त ओळींमध्ये; किंवा
- विशिष्ट स्तंभ किंवा पंक्तिंमध्ये
आपण वैयक्तिक सेल किंवा वैयक्तिक पेशींभोवती रेषा ठेवू शकता.
एका टेबलमध्ये सर्व सेलभोवती लाइन्स कसे जोडावेत
आपल्या टेबलमधील सर्व सेलांभोवती रेषा जोडण्यासाठी, त्या ग्रिड सारखी प्रभाव तयार करण्याकरिता, आपल्या शैली पत्रकास खालील जोडा:
टीडी, व्या {
सीमा: घन 1 पीएक्स काळा;
}
एका टेबलमध्ये फक्त स्तंभांमधे रेष कसे जोडावेत
स्तंभांमधील ओळी समाविष्ट करण्यासाठी (हे अनुलंब ओळी तयार करते जे टेबलच्या स्तंभांवर वरपासून खालपर्यंत चालते), आपल्या शैली पत्रकमध्ये खालील जोडा:
टीडी, व्या {
सीमा-डावा: घनता 1px काळा;
}
नंतर, जर आपण त्यांना पहिल्या स्तंभावर दिसू नये, तर आपल्याला त्या व टीडी पेशींना एक क्लास जोडणे आवश्यक आहे. या उदाहरणात, आम्ही असे गृहीत धरतो की आपल्याकडे त्या कक्षांवर एकही सरहद्गा नाही आणि आम्ही या विशिष्ट विशिष्ट सीएसएस शासनात सीमा काढतो. तर येथे आपण वापरत असलेले HTML वर्ग आहे:
वर्ग = "नो-सीमा">
आणि मग आपण पुढील स्टाईल आपल्या स्टाईल शीटमध्ये समाविष्ट करू शकू.
.no-border {
सीमा-डावीकडून: काहीही नाही;
}
एका टेबलमध्ये फक्त ओळींमध्ये कशी जोडावी
स्तंभांमधील ओळी जोडण्याप्रमाणेच, आपण हे आपल्या स्टाईल शीटवर जोडलेल्या फक्त एका सोप्या शैलीसह करू शकता. खालील सीएसएस आमच्या टेबलच्या प्रत्येक ओळी दरम्यान वर्टिकल लाइन्स जोडेल:
tr {
सीमा-तळ: घन 1 पीएक्स काळा;
}
आणि सारणीच्या खालच्या बाजूस सीमा काढण्यासाठी आपण त्या टॅगला एक क्लास जोडतो.
वर्ग = "नो-सीमा">
आपली शैली पत्रक मध्ये पुढील शैली जोडा:
.no-border {
सीमा-तळाशी: काहीही नाही;
}
एका टेबलमध्ये विशिष्ट कॉलम किंवा पंक्ति दरम्यान रेष कसे जोडावेत
जर आपल्याला केवळ विशिष्ट पंक्ति किंवा स्तंभांमधील ओळी असायला हवीत, तर आपण त्या सेल किंवा पंक्तिंवर एक क्लास वापरणे आवश्यक आहे. स्तंभांदरम्यान ओळीच्या ओळींमधे रेषेपेक्षा काही अधिक कठीण असते कारण त्या कॉलममधील प्रत्येक सेलमध्ये वर्ग जोडणे आवश्यक असते. जर तुमचा टेबल आपोआप एखाद्या प्रकारची सीएमएस मधून आपोआप तयार झाला असेल, तर हे शक्य होणार नाही, परंतु जर तुम्ही पृष्ठ हाताळत असाल, तर हे परिणाम साध्य करण्यासाठी आवश्यक असलेल्या योग्य वर्गांचा समावेश करू शकता.
वर्ग = "बाजू-सीमा">
ओळींमधील ओळी जोडणे खूप सोपी आहे, कारण ज्या ओळीत आपल्याला ओळीची गरज आहे अशा ओळीत क्लास समाविष्ट करू शकता.
वर्ग = "सीमा-तळ">
नंतर आपल्या शैली पत्रकास CSS जोडा:
.border-side {
सीमा-डावा: घनता 1px काळा;
}
.border-bottom {
सीमा-तळ: घन 1 पीएक्स काळा;
}
एका टेबलमध्ये वैयक्तिक सेल्सचा भेद कसा जोडावा
वैयक्तिक पेशींभोवती रेषा जोडण्यासाठी, आपण आसपासची सीमा इच्छित असलेल्या सेल्समध्ये एक क्लास जोडा.
वर्ग = "सीमा">
आणि नंतर आपल्या शैली पत्रकमध्ये खालील CSS जोडा:
.border {
सीमा: घन 1 पीएक्स काळा;
}
एका टेबलमध्ये वैयक्तिक सेल्समध्ये कसे जोडावे
आपण सेलच्या सामुग्रीमध्ये ओळी जोडू इच्छित असल्यास, हे करण्याचा सर्वात सोपा मार्ग क्षैतिज नियम टॅग (
) आहे.
उपयुक्त टिपा
आपण आपल्या सीमेत अंतर आढळल्यास, आपणास खात्री करून घ्या की सीमा-कोसळणे शैली आपल्या टेबलवर सेट आहे आपल्या शैली पत्रकास निम्न जोडा:
सारणी {
सीमा संकुचित: कोसळून;
}
आपण वरील सर्व सीएसएस टाळा आणि आपल्या टेबल टॅगमध्ये सीमा विशेषता वापरू शकता. लक्षात घ्या की, त्याचे गुणधर्म, नापसंत केले जात नाहीत तर, सीएसएसच्या तुलनेत लक्षणीयरीत्या कमी लवचिक आहे, कारण आपण केवळ सीमा रुंदी परिभाषित करू शकता आणि ते फक्त टेबलच्या सर्व पेशी किंवा फक्त काहीही करू शकता.