एचटीएमएल टेबल जावास्क्रिप्ट में एसक्यूएल डेटा दिखाएं

| | | | |

वेब विकास के शुरुआती दिनों में, HTML तालिकाएँ बहुत सरल थीं और उनमें व्यापक स्टाइलिंग विकल्पों का अभाव था। आज, हालांकि, अधिकांश तालिकाओं को उपयोगकर्ताओं के लिए अधिक सौंदर्यपूर्ण और कार्यात्मक अनुभव बनाने के लिए स्टाइल किया गया है।

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

HTML तालिकाएँ

HTML कोड तालिकाओं की संरचना को परिभाषित करता है। तालिका को परिभाषित करने के लिए <तालिका> टैग का प्रयोग करें। , , और टैग क्रमशः पंक्तियों, तालिका शीर्षलेखों और सामग्री कक्षों को निर्दिष्ट करते हैं।

आइए HTML तालिका का एक उदाहरण देखें। नीचे दिए गए उदाहरण में, हमारे पास 23 मार्च, 2020 के सप्ताह के लिए न्यूयॉर्क टाइम्स बेस्टसेलर सूची में शीर्ष पांच पुस्तकों को सूचीबद्ध करने वाली एक तालिका है:

स्क्रीन शॉट 2020 03 24 09.50.10 1

हमारी तालिका का कोड इस प्रकार है:

इस तालिका में `चालू` की एक पंक्ति सहित तीन स्तंभ और छह पंक्तियाँ हैं आपका दिमाग।

टेबल सीएसएस

सीएसएस का इस्तेमाल टेबल को स्टाइल करने के लिए किया जाता है। हालांकि ऊपर दी गई तालिका डेटा को व्यवस्थित तरीके से दिखाती है, यह सादे HTML में लिखा गया है (कोई शैलियाँ नहीं हैं)। CSS का उपयोग करके, आप तालिकाओं को बेहतर बना सकते हैं।

हमारे कोड में, हम एक ठोस काली सीमा, 1 पिक्सेल चौड़ी परिभाषित करते हैं। यहां हमारे कोड का परिणाम है:

Screen Shot 2020 03 24 at 09.53.50 <चौड़ाई" <चौड़ाई "520 =" 168 "src =" https://744025.smushcdn.com/1245953/wp-content/uploads/2020/04/Screen-Shot-2020 -03 -24-पर-09.53.50.jpg? हानि = 1 और बैंड = 1 और वेबप = 1 "alt =" स्क्रीन 2020 03 24 पर 09.53.50 "वर्ग =" wp-image-14796 "srcset =" https: // 744025.smushcdn.com/1245953/wp- सामग्री / अपलोड / 2020/04 / स्क्रीन-शॉट-2020-03-24-at-09.53.50-20x6.png?lossy=1&strip=1&webp=1 20w, https://744025.smushcdn.com/1245953/wp -सामग्री / अपलोड / 2020/04 / स्क्रीन-शॉट-2020-03-24-at-09.53.50.jpg? आकार = 234x76 और हानिपूर्ण = 1 और पट्टी = 1 और वेबप = 1234w, https: // 744025. smushcdn.com/1245953/wp -सामग्री / अपलोड / 2020 /04/स्क्रीन-शॉट-2020-03-24-पर- 09.53.50-385x124.png? हानिपूर्ण = 1 और बैंड = 1 और वेबप = 1385w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/04/Screen-Shot-2020-03-24-at-09.53। 50 .jpg? आकार = 468x151 और लॉस sy = 1 और पट्टी = 1 और वेबपी = 1 468w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/04/Screen-Shot-2020-03 -24- at-09.53.50 .jpg? हानिपूर्ण = 1 और पट्टी = 1 और वेबप = 1520w "आकार =" (अधिकतम चौड़ाई: 520px) 100vw, 520px ">

ध्यान दें कि हमारी तालिका में डबल है बॉर्डर ऐसा इसलिए है क्योंकि हमने टेबल (<टेबल>), उसके हेडर () और उसके सेल () पर एक बॉर्डर लागू किया है। सिंगल बॉर्डर के लिए डबल बॉर्डर, हम बॉर्डर-पतन संपत्ति का उपयोग कर सकते हैं।

बॉर्डर-संक्षिप्त गुण किसी तालिका के दोहरे बॉर्डर को एकल बॉर्डर में कनवर्ट करता है। बॉर्डर-पतन गुण का डिफ़ॉल्ट मान संक्षिप्त हो जाता है। यदि गुण बॉर्डर-पतन मान पतन < प्राप्त करता है /code>, किसी सरणी के चारों ओर की सीमाएं ढह जाएंगी।

यहाँ क्रिया में b कमांड-संक्षिप्त गुण का एक उदाहरण दिया गया है:

हमारा कोड रिटर्न:

स्क्रीन शॉट 2020 03 24 से 09.55.49

हमारी तालिका और उसकी सामग्री में अब एक ही बॉर्डर है।

बॉर्डर स्पेस इंजी

आप टेबल में सेल्स के बीच स्पेसिंग को परिभाषित करने के लिए बॉर्डर-स्पेसिंग प्रॉपर्टी का उपयोग कर सकते हैं। बॉर्डर-स्पेसिंग प्रॉपर्टी बीच में हॉरिजॉन्टल और वर्टिकल स्पेसिंग को परिभाषित करती है। सेल - और यह इसे उसी क्रम में करता है।

यहां एक उदाहरण है जो हमारी प्रारंभिक तालिका पर बॉर्डर-स्पेसिंग संपत्ति का उपयोग कर रहा है (बिना ध्वस्त सीमाओं के):

हमारा कोड रिटर्न:

Screen Shot 2020 03 24 at 09.58.18

हमारी प्रत्येक कोशिका में क्षैतिज पर 10px रिक्ति होती है और लंबवत सीमाएँ।

मान लीजिए कि हम चाहते हैं कि ऊपर दी गई हमारी तालिका की चौड़ाई (जिसकी सीमाएँ ढह गई हों) वेब पेज की ही चौड़ाई हो, और मान लें कि हम चाहते हैं कि प्रत्येक टेबल हेडर की ऊँचाई 30 पिक्सेल ऊँची हो। हम ऐसा कर सकते हैं निम्नलिखित सीएसएस कोड का उपयोग करना:

हमारा कोड रिटर्न:

<आंकड़ा वर्ग = "wp-ब्लॉक-छवि"> स्क्रीन शॉट 2020 03 24 10.00.26

जैसा कि आप देख सकते हैं, हमारी तालिका अब की चौड़ाई है वेब पेज। इसके अलावा, हमारी तालिका में कॉलम हेडर 30 पिक्सल ऊंचे हैं। तालिका में कक्ष और उन कक्षों की सामग्री। पैडिंग संपत्ति का उपयोग और टैग पर किया जा सकता है।

मान लीजिए कि हम सेल के चारों ओर 10px पैडिंग जोड़ना चाहते हैं हेडर सेल सहित हमारी टेबल की सामग्री। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

हमारा कोड रिटर्न:

 स्क्रीन शॉट 2020 03 24 से 08/10.03 1  स्क्रीन शॉट 2020 03 24 10.08.03 1

प्रत्येक पंक्ति की सामग्री और अब हमारी शीर्षलेख तालिका सभी किनारों पर 10px पैडिंग है। एक सरणी। डिफ़ॉल्ट रूप से, तत्व केंद्र-संरेखित होते हैं और तत्व बाएं-संरेखित होते हैं।

पाठ संरेखण विशेषता के सबसे अधिक उपयोग किए जाने वाले मान हैं:< br>

  • बाएं, मध्य, दाएं (माइक्रोसॉफ्ट एज और इंटरनेट एक्सप्लोरर को छोड़कर सभी ब्राउज़रों द्वारा समर्थित)
  • प्रारंभ और अंत (माइक्रोसॉफ्ट एज और इंटरनेट एक्सप्लोरर को छोड़कर सभी ब्राउज़रों द्वारा समर्थित) )

मान लीजिए कि हम अपनी सरणी में तत्वों को केंद्र में रखना चाहते हैं और तत्वों को प्रत्येक सेल के बाईं ओर संरेखित करना चाहते हैं। हम इसे इस कोड का उपयोग करके कर सकते हैं:

हमारा कोड रिटर्न:

Screen Shot 2020 03 24 से 10.03.04

इस उदाहरण में, हमने पाठ को सेल के बाहर केंद्रित किया है। सेल d `हेडर और हेडर सेल टेक्स्ट को संरेखित छोड़ दिया गया है।

वर्टिकल टेक्स्ट अलाइनमेंट

CSS या टैग। डिफ़ॉल्ट रूप से, लंबवत संरेखण गुण का मान मध्य पर सेट होता है, जिसका अर्थ है कि सामग्री सेल के केंद्र में लंबवत रूप से संरेखित है।

मान लीजिए कि हम अपने सेल में टेक्स्ट को सेल के निचले हिस्से में संरेखित करना चाहते हैं। हम इसे इस कोड का उपयोग करके करते हैं:

हमारा कोड रिटर्न:

Scre in Shot 2020 03 24 to 10.05.40

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method