सीएसएस में सूचियों और तालिकाओं को फ़ॉर्मेट करने के लिए मार्गदर्शिका- गुण और उदाहरण

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

 

फ़ॉर्मेटिंग सूचियाँ

अव्यवस्थित सूची(उल)

मुख्य संपत्ति: सूची-शैली-प्रकार।

मान: none, disc, circle, square.

उदाहरण:

ul {  
  list-style-type: disc;  
}  

आदेशित सूची(ओल)

मुख्य संपत्ति: सूची-शैली-प्रकार।

मान: कोई नहीं(डिफ़ॉल्ट), दशमलव, निचला-अल्फ़ा, ऊपरी-अल्फ़ा, निचला-रोमन, ऊपरी-रोमन।

उदाहरण:

ol {  
  list-style-type: decimal;  
}  

परिभाषा सूची(डीएल)

मुख्य संपत्ति: परिभाषा सूचियों को प्रारूपित करने के लिए कोई विशिष्ट सीएसएस संपत्ति नहीं है। हालाँकि, आप कक्षाओं या अन्य गुणों का उपयोग करके सूची के भीतर तत्वों को स्टाइल कर सकते हैं font-size, font-weight, margin, padding, etc.

उदाहरण:

<dl>  
  <dt>HTML</dt>  
  <dd>A markup language for creating web pages</dd>  
  <dt>CSS</dt>  
  <dd>A styling language for web pages</dd>  
</dl>  

dt {  
  font-weight: bold;  
}  

 

स्वरूपण तालिकाएँ

तालिका संरचना स्वरूपण

मुख्य संपत्ति: border-collapse.

मान: separate(default), collaps ई.

उदाहरण:

table {  
  border-collapse: collapse;  
}  

टेबल बॉर्डर फ़ॉर्मेटिंग

मुख्य संपत्ति: border.

मान: एक सीमा मान, उदाहरण के लिए 1px solid black:।

उदाहरण:

table {  
  border: 1px solid black;  
}  

सेल बॉर्डर फ़ॉर्मेटिंग

मुख्य संपत्ति: border.

मान: एक सीमा मान, उदाहरण के लिए 1px solid black:।

उदाहरण:

td, th {  
  border: 1px solid black;  
}  

तालिका कक्षों का संरेखण और अंतर

मुख्य गुण: text-align, padding.

• पाठ-संरेखण: संरेखण मान, उदाहरण के लिए left, right, center:।
• पैडिंग: कोशिकाओं के भीतर रिक्ति मान, उदाहरण के लिए: 10px।

उदाहरण:

th {  
  text-align: center;  
  padding: 10px;  
}  

तालिकाओं में पृष्ठभूमि और पाठ का रंग

मुख्य गुण: background-color, color

• background-color: पृष्ठभूमि रंग मान, उदाहरण के लिए lightgray:।
• color: पाठ रंग मान, उदाहरण के लिए white:।

उदाहरण:

table {  
  background-color: lightgray;  
  color: white;  
}  

तालिकाओं में स्तंभ और पंक्ति का आकार

मुख्य गुण: width, height.

• width: चौड़ाई मान, उदाहरण के लिए: "100px", "20%"।
• height: ऊंचाई मान, उदाहरण के लिए: "50px", "10%"।

उदाहरण:

th {  
  width: 100px;  
  height: 50px;  
}  

 

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