तालिका पंक्ति में बॉर्डर-बॉटम कैसे जोड़ें?

• टेबल रो में बॉर्डर-बॉटम कैसे जोड़ें?
• Border-bottom को Table Row Element पर सेट करें
• शैली तालिका तत्व
• शैली 'टीडी' तत्व
• शैली 'टीआर' तत्व

टेबल रो में बॉर्डर-बॉटम कैसे जोड़ें?

तालिका पंक्ति में बॉर्डर-बॉटम जोड़ने से बेहतर दृश्य अनुभव बनाने और उपयोगकर्ता का ध्यान आकर्षित करने के लिए बॉर्डर पूरी पंक्ति में जुड़ जाएगा।

टेबल रो में बॉर्डर-बॉटम जोड़ने का एक विस्तृत उदाहरण नीचे दिखाया गया है:

टेबल रो के लिए बॉर्डर-बॉटम सेट करें

, और तत्वों का उपयोग करके बनाई गई हमारी HTML फ़ाइल में 3 पंक्तियों और 3 कॉलम वाली एक साधारण तालिका बनाएँ:

उपरोक्त कोड स्निपेट में, हमने तालिका पंक्तियों को 'पंक्ति' का एक वर्ग निर्दिष्ट किया है, ताकि इसे बाद में CSS में एक्सेस किया जा सके।

वेबपेज इस तरह दिखेगा:

शैली तालिका तत्व

सीएसएस भाग में तालिका तत्व का चयन करें और पाठ को केंद्र में संरेखित करें। उसके बाद, 'का प्रयोग करें सीमा-पतन 'संपत्ति का मूल्य संक्षिप्त करने के लिए सेट करने के लिए:

शैली 'टीडी' तत्व

एक बेहतर दृश्य प्रतिनिधित्व के लिए, हम टेबल डेटा '' और टेबल हेडर '' एलिमेंट्स को 20px की पैडिंग देते हैं:

आउटपुट इस तरह दिखता है:

उपरोक्त आउटपुट ने 20px की पैडिंग दिखाई है और टेक्स्ट को केंद्र में संरेखित किया है।

शैली 'टीआर' तत्व

CSS फ़ाइल में, 'tr' चयनकर्ता के अंतर्गत बॉर्डर-बॉटम गुण जोड़ें। यह हेडिंग रो सहित टेबल की हर रो को असाइन करता है। उदाहरण के लिए, इसके मान को 2px सॉलिड डार्कसियान पर सेट करें:

उपरोक्त कोड स्निपेट को क्रियान्वित करने के बाद, वेबपेज इस तरह दिखता है:

यह सब इस बारे में है कि प्रत्येक तालिका पंक्ति के नीचे बॉर्डर कैसे जोड़ा जाए'

निष्कर्ष

एलिमेंट के नीचे बॉर्डर जोड़ने के लिए, CSS प्रॉपर्टी बॉर्डर-पतन को संक्षिप्त करने के लिए सेट करें और “” एलिमेंट पर बॉर्डर-बॉटम प्रॉपर्टी का उपयोग करें। यह CSS गुण को टेबल पर बॉर्डर लगाने की अनुमति देता है। इस तरह आप हर “