Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS का उपयोग करके टेबल कैप्शन की स्थिति को नियंत्रित करना


सीएसएस कैप्शन-साइड प्रॉपर्टी का उपयोग टेबल कैप्शन बॉक्स को लंबवत स्थिति में करने के लिए किया जाता है। यह मूल्यों के रूप में ऊपर और नीचे ले सकता है। डिफ़ॉल्ट रूप से, टेबल कैप्शन को सबसे ऊपर रखा जाता है।

सिंटैक्स

CSS लिस्ट-स्टाइल प्रॉपर्टी का सिंटैक्स इस प्रकार है-

चयनकर्ता { कैप्शन-साइड:/*value*/}

उदाहरण

निम्नलिखित उदाहरण सीएसएस कैप्शन-साइड प्रॉपर्टी को दर्शाते हैं।

  <सिर> <शैली> टेबल * { बॉर्डर:रिज स्काईब्लू; पैडिंग:0.5rem;}टेबल {मार्जिन:20px; बॉक्स-छाया:0 0 6px 3px भारतीय लाल; खाली-कोशिकाएँ:दिखाएँ;} कैप्शन { सीमा-शीर्ष-शैली:कोई नहीं; कैप्शन-साइड:नीचे; सीमा-रंग:डार्कखाकी; सीमा-त्रिज्या:50%;}
डेमो
तालिका

आउटपुट

यह निम्न आउटपुट देता है -

CSS का उपयोग करके टेबल कैप्शन की स्थिति को नियंत्रित करना

उदाहरण

  <सिर> <शैली> टेबल { मार्जिन:ऑटो; बॉर्डर:डबल ब्लैक 13px; बॉर्डर-त्रिज्या:6px;}td, th { बॉर्डर-लेफ्ट:1px सॉलिड ब्लैक; बॉर्डर-टॉप:1px सॉलिड ब्लैक;}वें { बैकग्राउंड-कलर:लाइटब्लू; सीमा-शीर्ष:कोई नहीं;} टीडी:पहला बच्चा, वें:पहला बच्चा {सीमा-बाएं:कोई नहीं;} कैप्शन {मार्जिन-टॉप:3 पीएक्स; पृष्ठभूमि-रंग:बैंगनी; कैप्शन-साइड:नीचे; रंग सफेद; बॉर्डर-त्रिज्या:20%;}

डेमो टेबल

डेमो
तालिका
एक...दो...तीनचार
पांचछहसातआठ

आउटपुट

यह निम्न आउटपुट देता है -

CSS का उपयोग करके टेबल कैप्शन की स्थिति को नियंत्रित करना


  1. सीएसएस के साथ ज़ेबरा धारीदार तालिका कैसे बनाएं?

    CSS के साथ ज़ेबरा स्ट्रिप्ड टेबल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    table {       border-collapse: collapse; &

  1. सीएसएस के साथ तुलना तालिका कैसे बनाएं?

    CSS के साथ एक रिस्पॉन्सिव टेबल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    table {       border-collapse: collapse; &nb

  1. कैसे सीएसएस के साथ एक उत्तरदायी तालिका बनाने के लिए?

    CSS के साथ एक रिस्पॉन्सिव टेबल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body{       font-family: 'Segoe UI',