Creating rows and columns in W3.CSS table.
मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस टेबल बनाने में, जहा w3-row और w3-col क्लास का उपयोग करके एक कम्पलीट रिस्पॉन्सिव टेबल लेआउट बनाने में उपयोग किया जाता है। जहा डब्लू3.सीएसएस रौ एंड कॉलम क्लास आपके वेबपेज कंटेंट को रौस और कॉलम आर्डर में टेबल स्ट्रक्चर क्रिएट करने में हेल्प करते हैं. जिससे आप अपने जरूरत के टेबल ग्रिड लेआउट बना सकते है.
So let’s use w3-row and w3-col classes in W3.CSS grid-based table layout.
W3.CSS w3-row class.
एचटीएमएल वेबसाइट वेबपेज में w3-row क्लास का उपयोग कई कॉलम बनाने के लिए एक रौ कंटेनर क्रिएट किया जाता है। यह टेबल में एक कॉलम के लिए एक कोर के रूप में प्रीव्यू होता है. जहा आप w3-col क्लास को साथ में उपयोग कर एक कम्पलीट टेबल स्ट्रक्चर क्रिएट कर सकते है।
w3-row class basic use in W3.CSS.
<div class=”w3-row”>
<!—You can write column content from here –>
</div>
W3.CSS w3-col class.
किसी भी एचटीएमएल वेबसाइट वेबपेज में w3-col क्लास का उपयोग टेबल में रौ के अंदर कॉलम को क्रिएट करने में किया जाता है। जहा टेबल कॉलम आपके टेबल लेआउट के इंडिविजुअल ब्लॉक एलिमेंट हैं, और उन्हें आप अपने टेबल जरूरत के अनुसार रौ की कुल विड्थ के आधार पर क्रिएट किया जा सकता है।
w3-col class basic use in W3.CSS.
<div class=”w3-row”>
<div class=”w3-col w3-quarter”>Column 1 element (3/12)</div>
<div class=”w3-col w3-quarter”>Column 2 element (3/12)</div>
<div class=”w3-col w3-quarter”>Column 3 element (3/12)</div>
<div class=”w3-col w3-quarter”>Column 4 element (3/12)</div>
</div>
यहाँ आप 1 से लेकर 12 कॉलम के बीच की संख्या के रूप में प्रत्येक कॉलम की विड्थ को डिफाइन कर सकते हैं। जहा एक रौ में कॉलम की कुल संख्या पूरी चौड़ाई को भरने के लिए 12 होनी चाहिए।
Here in this example.
- w3-quarter, w3-col का एक संक्षिप्त रूप है, जिसकी चौड़ाई 3/12 (या पंक्ति की कुल चौड़ाई का 25%) हिस्सा है।
- जहा प्रत्येक कॉलम पंक्ति का 1/4 भाग लेता है. जिससे यह 4-कॉलम टेबल लेआउट स्ट्रक्चर बन जाता है।
W3.CSS Responsive Columns.
किसी भी एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस डिफ़ॉल्ट रूप से एक रिस्पॉन्सिव टेबल स्ट्रक्चर प्रदान करता है, जिसका अर्थ है कि टेबल लेआउट स्क्रीन के आकार के अनुसार स्वयं अपने आप अनुकूलित हो जाता है। जहा आप रेस्पॉन्सिव टेबल लेआउट में w3-tiny, w3-small, w3-medium, w3-large और w3-xlarge जैसी अतिरिक्त टेबल क्लास का उपयोग करके विभिन्न स्क्रीन साइज के लिए टेबल कॉलम की विड्थ को भी मैन्युअल डिफाइन कर सकते हैं।
So let us now understand an example of creating a responsive table layout with different column widths for different screen sizes.
<div class=”w3-row”>
<div class=”w3-col s12 m6 l4″>
<!—here it will take 100% width on small screens, 50% on medium, and 33% on large column screens –>
Column 1 element
</div>
<div class=”w3-col s12 m6 l4″>
Column 2 element
</div>
<div class=”w3-col s12 m6 l4″>
Column 3 element
</div>
</div>
Here in this example.
- s12 – यहाँ मौजूदा टेबल में कॉलम छोटी स्क्रीन स्क्रीन की चौड़ाई 600px से कम पर रौ का 100% (12/12) हिस्सा ले लेगा।
- m6 – कॉलम मध्यम स्क्रीन (स्क्रीन की चौड़ाई 600px और 900px के बीच) पर रौ का 50% (6/12) हिस्सा ले लेगा।
- l4 – कॉलम बड़ी स्क्रीन (स्क्रीन की चौड़ाई 900px से ज़्यादा) पर पंक्ति का 33.33% (4/12) हिस्सा ले लेगा।
Offsetting W3.CSS columns.
आप अपने डब्लू3.सीएसएस टेबल कॉलम के बीच स्पेस बनाने के लिए उन्हें ऑफसेट आर्डर में प्रीव्यू कर सकते हैं। यहाँ टेबल ऑफसेट विकल्प तब उपयोगी होता है, जब आप किसी टेबल कॉलम को दाईं ओर मूव करना चाहते हो, या उसे उपलब्ध टेबल जगह में बीच में डिस्प्ले करना चाहते हैं।
जहा आप अपने टेबल में ऑफसेट टेबल स्ट्रक्चर बनाने के लिए, उन्हें w3-offset-{n} क्लास का इस्तेमाल करना होगा, जहाँ {n} उन कॉलम की संख्या है. जिन्हें आप मौजूदा टेबल आर्डर में ऑफसेट करना चाहते हैं।
उदाहरण के लिए, यदि आप किसी कॉलम को 4 कॉलम से ऑफसेट करना चाहते हैं, तो क्लास w3-offset-4 का उपयोग करें।
<div class=”w3-row”>
<div class=”w3-col s12 m6 l4 w3-offset-4″>Preview Centered Column</div>
</div>
W3.CSS multi-column layout example.
यहाँ आपको एक रेस्पॉन्सिव टेबल उदाहरण दिया गया है, जो यह दर्शाता है कि रिस्पॉन्सिव लेआउट के साथ मल्टी-कॉलम टेबल स्ट्रक्चर लेआउट बनाने के लिए w3-row और w3-col का उपयोग कैसे करें।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Example of w3.css Responsive Columns </title>
</head>
<body>
<!– example of w3.css Row with 1 column –>
<h2><center>Let Tray Responsive Column Layout Example</center></h2>
<div class=”w3-row”>
<div class=”w3-col s12 m12 l12″>
<div class=”w3-card w3-padding w3-margin”><center>Preview of single column</center></div>
</div>
</div>
<!– example of w3.css Row with 2 columns –>
<div class=”w3-row”>
<div class=”w3-col s12 m6 l6″>
<div class=”w3-card w3-padding w3-margin”><center>Column 1 Element</center></div>
</div>
<div class=”w3-col s12 m6 l6″>
<div class=”w3-card w3-padding w3-margin”><center>Column 2 Element</center></div>
</div>
<div class=”w3-container”>
<!– example of w3.css Row with 4 columns –>
<div class=”w3-row”>
<div class=”w3-col s12 m4 l3″>
<div class=”w3-card w3-padding w3-margin”><center>Column 1 Element</center></div>
</div>
<div class=”w3-col s12 m4 l3″>
<div class=”w3-card w3-padding w3-margin”><center>Column 2 Element</center></div>
</div>
<div class=”w3-col s12 m4 l3″>
<div class=”w3-card w3-padding w3-margin”><center>Column 3 Element</center> </div>
</div>
<div class=”w3-col s12 m4 l3″>
<div class=”w3-card w3-padding w3-margin”><center>Column 4 Element</center> </div>
</div>
</div>
</div>
</div>
</body>
</html>
W3.CSS Key Points.
- w3-row – यहाँ डब्लू3.सीएसएस में कॉलम को होल्ड करने वाली रौ को डिफाइन करता है।
- w3-col – यह डब्लू3.सीएसएस क्लास रौ के अंदर कॉलम को डिफाइन करता है। जहा आप w3-col s12, w3-col m6, w3-col l4, आदि जैसे क्लास का उपयोग करके इंडिविजुअल कॉलम की विड्थ को डिफाइन कर सकते हैं।
- W3.CSS Responsiveness – यह आपके मौजूदा डब्लू3.सीएसएस में डिफ़ॉल्ट रूप से कॉलम स्ट्रक्चर को रिस्पॉन्सिव में प्रीव्यू करता है, जहा आप और आप अलग-अलग डिवाइस स्क्रीन साइज़ के लिए s12, m6, l4, आदि के साथ टेबल स्ट्रक्चर को प्रीव्यू कर सकते हैं।
- W3.CSS Offset – यहाँ आप टेबल कॉलम को ग्रिड यूनिट की एक सर्टेन नंबर से स्थानांतरित करने के लिए w3-offset-{n} क्लास का उपयोग कर सकते हैं।
W3.CSS Table Row Column Additional Layout Features.
डब्लू3.सीएसएस कुछ अतिरिक्त लेआउट क्लास भी प्रदान करता है. जो रौ और कॉलम के साथ काम करते समय उपयोगी हो सकते हैं:
- .w3-center – यह डब्लू3.सीएसएस टेबल कॉलम के अंदर टेबल कंटेंट को सेण्टर पोजीशन में होल्ड करता है।
- .w3-left – यह डब्लू3.सीएसएस टेबल कॉलम के अंदर टेबल कंटेंट को लेफ्ट डायरेक्शन में होल्ड करता है।
- .w3-right – यह डब्लू3.सीएसएस टेबल कॉलम के अंदर टेबल कंटेंट को राइट डायरेक्शन में होल्ड करता है।
- .w3-padding – यह डब्लू3.सीएसएस टेबल कॉलम के अंदर टेबल कंटेंट में पैडिंग को डिस्प्ले करता है।
- .w3-margin – यह डब्लू3.सीएसएस टेबल कॉलम के अंदर टेबल एलिमेंट के सभी तरफ से मार्जिन को डिस्प्ले करता है।
W3.CSS Table Row Column Example.
<div class=”w3-row”>
<div class=”w3-col s12 m4 l3 w3-center”>
<div class=”w3-card w3-padding”>You see Centered Column element </div>
</div>
<div class=”w3-col s12 m4 l3 w3-left”>
<div class=”w3-card w3-padding”> You see Left-Aligned Column element </div>
</div>
<div class=”w3-col s12 m4 l3 w3-right”>
<div class=”w3-card w3-padding”> You see Right-Aligned Column element </div>
</div>
</div>
Here in this example.
- यह एक्टिव टेबल में पहला कॉलम को सेण्टर डायरेक्शन में अलाइन करता है (w3-center)।
- यह एक्टिव टेबल में दूसरा कॉलम लेफ्ट डायरेक्शन में अलाइन करता है (w3-left)।
- यह एक्टिव टेबल में तीसरा कॉलम को राइट डायरेक्शन अलाइन करता है (w3-right)।
