W3.CSS टेबल्स
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
| बो | नीलसन | 50 |
| माइक | रॉस | 35 |
W3.CSS टेबल क्लासेस
W3.CSS तालिकाओं के लिए निम्नलिखित कक्षाएं प्रदान करता है:
| कक्षा | को परिभाषित करता है |
|---|---|
| w3-तालिका | HTML तालिका के लिए कंटेनर |
| w3-धारीदार | धारीदार टेबल |
| w3-बॉर्डर | बॉर्डर वाली टेबल |
| w3-बॉर्डर | सीमा रेखा |
| w3-केंद्रित | केंद्रित तालिका सामग्री |
| w3-होवर करने योग्य | होवरेबल टेबल |
| w3-तालिका-सभी | सभी गुण सेट |
मूल तालिका
मूल तालिका प्रदर्शित करने के लिए w3-table वर्ग का उपयोग किया जाता है:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
धारीदार टेबल
W3-धारीदार वर्ग का उपयोग तालिका में ज़ेबरा-धारियों को जोड़ने के लिए किया जाता है:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table w3-striped">
बॉर्डर वाली टेबल
w3- सीमावर्ती वर्ग प्रत्येक तालिका पंक्ति में एक निचली सीमा जोड़ता है:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table w3-bordered">
धारीदार बॉर्डर वाली टेबल
स्ट्राइप्ड बॉर्डर वाली टेबल बनाने के लिए w3- स्ट्राइप क्लास और w3-बॉर्डर क्लास को मिलाएं :
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table w3-striped w3-bordered">
एक टेबल के चारों ओर सीमा
W3-सीमा वर्ग का उपयोग किसी तालिका के चारों ओर बॉर्डर प्रदर्शित करने के लिए किया जाता है:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table w3-striped w3-border">
युक्ति: w3- सीमा वर्ग केवल तालिकाओं के लिए नहीं है। इसका उपयोग किसी भी HTML तत्व पर किया जा सकता है!
यह सब प्रदर्शित करना
W3- टेबल-ऑल क्लास उपरोक्त सभी वर्गों को जोड़ती है:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all">
धारियों को फ़्लिप करना
धारियों को फ़्लिप करने के लिए (हल्के-ग्रे रंग से शुरू करें), टेबल हेडर पंक्ति के चारों ओर एक <thead> तत्व जोड़ें। आपको टेबल हेडर पंक्ति के लिए उपयोग किए जाने वाले रंग को भी परिभाषित करना होगा:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
| बो | निल्सन | 35 |
उदाहरण
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
सभी सामग्री को केंद्रित करना
w3-केंद्रित वर्ग तालिका की सामग्री को केंद्र में रखता है:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all w3-centered">
एक कॉलम को केंद्रित करना
W3- केंद्र वर्ग एक स्तंभ की सामग्री को केंद्र में रखता है:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
एक कॉलम को राइट अलाइन करें
W3- राइट-एलाइन क्लास एक कॉलम की सामग्री को राइट अलाइन करता है:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
होवरेबल टेबल
W3- होवर करने योग्य वर्ग माउस-ओवर पर एक धूसर पृष्ठभूमि रंग जोड़ता है:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all
w3-hoverable">
होवर रंग
यदि आप एक विशिष्ट होवर रंग चाहते हैं, तो प्रत्येक <tr> तत्व में कोई भी w3-hover- रंग वर्ग जोड़ें:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<tr class="w3-hover-green">
W3.CSS कक्षाओं का संयोजन
सभी HTML तत्वों पर कई W3.CSS कक्षाओं का उपयोग किया जा सकता है।
उदाहरण के लिए: सीमा वर्ग, रंग वर्ग, फ़ॉन्ट वर्ग, कार्ड वर्ग, और बहुत कुछ।
रंगीन टेबल हैडर
रंगीन पंक्ति प्रदर्शित करने के लिए किसी भी w3- रंग वर्ग का उपयोग करें:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
रंगीन तालिका
रंगीन तालिका प्रदर्शित करने के लिए किसी भी w3- रंग वर्ग का उपयोग करें:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table w3-blue">
उत्तरदायी तालिका
W3- उत्तरदायी वर्ग एक उत्तरदायी तालिका बनाता है। तब तालिका छोटी स्क्रीन पर क्षैतिज रूप से स्क्रॉल करेगी। बड़ी स्क्रीन पर देखने पर कोई फर्क नहीं पड़ता।
नीचे दी गई तालिका पर प्रभाव देखने के लिए स्क्रीन का आकार बदलें:
| पहला नाम | अंतिम नाम | अंक | अंक | अंक | अंक | अंक | अंक | अंक | अंक | अंक | अंक | अंक |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| जील | लोहार | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| पूर्व संध्या | जैक्सन | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| एडम | जॉनसन | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
उदाहरण
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
एक कार्ड के रूप में तालिका
तालिका को कार्ड के रूप में प्रदर्शित करने के लिए w3-कार्ड वर्ग का उपयोग करें :
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all w3-card-4">
छोटी मेज
छोटी तालिका प्रदर्शित करने के लिए w3-छोटे वर्ग का उपयोग करें :
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all w3-tiny">
छोटा मेज
छोटी तालिका प्रदर्शित करने के लिए w3-छोटे वर्ग का उपयोग करें :
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all w3-small">
बड़ी मेज
एक बड़ी तालिका प्रदर्शित करने के लिए w3-बड़े वर्ग का उपयोग करें :
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all w3-large">
एक्स लार्ज टेबल
xlarge तालिका प्रदर्शित करने के लिए w3-xlarge वर्ग का उपयोग करें :
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all w3-xlarge">
XXबड़ी तालिका
xxबड़ा तालिका प्रदर्शित करने के लिए w3-xxlarge वर्ग का उपयोग करें :
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all w3-xxlarge">
XXXबड़ी तालिका
xxxlarge तालिका प्रदर्शित करने के लिए w3-xxxlarge वर्ग का उपयोग करें :
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
उदाहरण
<table class="w3-table-all w3-xxxlarge">
जंबो टेबल
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">