Source

टेबल

बूटस्ट्रैप के साथ तालिकाओं की ऑप्ट-इन स्टाइलिंग के लिए दस्तावेज़ीकरण और उदाहरण (जावास्क्रिप्ट प्लगइन्स में उनके प्रचलित उपयोग को देखते हुए)।

उदाहरण

कैलेंडर और दिनांक पिकर जैसे तृतीय-पक्ष विजेट में तालिकाओं के व्यापक उपयोग के कारण, हमने अपनी तालिकाओं को ऑप्ट-इन करने के लिए डिज़ाइन किया है । बस आधार वर्ग .tableको किसी में जोड़ें <table>, फिर कस्टम शैलियों या हमारे विभिन्न शामिल संशोधक वर्गों के साथ विस्तार करें।

सबसे बुनियादी तालिका मार्कअप का उपयोग करते हुए, यहां बताया गया है कि कैसे- .tableआधारित तालिकाएँ बूटस्ट्रैप में दिखती हैं। सभी तालिका शैलियों को बूटस्ट्रैप 4 में विरासत में मिला है , जिसका अर्थ है कि किसी भी नेस्टेड टेबल को माता-पिता की तरह ही स्टाइल किया जाएगा।

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

आप गहरे रंग की पृष्ठभूमि पर हल्के टेक्स्ट के साथ-साथ रंगों को उल्टा भी कर सकते हैं .table-dark।

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

टेबल हेड विकल्प

टेबल और डार्क टेबल की तरह ही, मॉडिफायर क्लासेस का इस्तेमाल करें .thead-lightया हल्का या गहरा ग्रे दिखाने .thead-darkके लिए ।<thead>

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर
# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

धारीदार पंक्तियाँ

.table-stripedके भीतर किसी भी तालिका पंक्ति में ज़ेबरा-स्ट्रिपिंग जोड़ने के लिए उपयोग करें <tbody>।

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

बॉर्डर वाली टेबल

.table-borderedटेबल और सेल के सभी किनारों पर बॉर्डर के लिए जोड़ें ।

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

होवर करने योग्य पंक्तियाँ

.table-hoverतालिका पंक्तियों पर एक होवर स्थिति को सक्षम करने के लिए जोड़ें <tbody>।

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

छोटा मेज

.table-smसेल पैडिंग को आधा में काटकर टेबल को और अधिक कॉम्पैक्ट बनाने के लिए जोड़ें ।

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

प्रासंगिक कक्षाएं

तालिका पंक्तियों या अलग-अलग कक्षों को रंगने के लिए प्रासंगिक कक्षाओं का उपयोग करें।

कक्षा शीर्षक शीर्षक
सक्रिय कक्ष कक्ष
चूक कक्ष कक्ष
मुख्य कक्ष कक्ष
माध्यमिक कक्ष कक्ष
सफलता कक्ष कक्ष
खतरा कक्ष कक्ष
चेतावनी कक्ष कक्ष
जानकारी कक्ष कक्ष
रोशनी कक्ष कक्ष
अँधेरा कक्ष कक्ष 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

डार्क टेबल के साथ नियमित टेबल बैकग्राउंड वेरिएंट उपलब्ध नहीं हैं, हालांकि, आप समान शैलियों को प्राप्त करने के लिए टेक्स्ट या बैकग्राउंड यूटिलिटीज का उपयोग कर सकते हैं।

# शीर्षक शीर्षक
1 कक्ष कक्ष
2 कक्ष कक्ष
3 कक्ष कक्ष
4 कक्ष कक्ष
5 कक्ष कक्ष
6 कक्ष कक्ष
7 कक्ष कक्ष
8 कक्ष कक्ष
9 कक्ष कक्ष 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
सहायक तकनीकों को अर्थ देना

अर्थ जोड़ने के लिए रंग का उपयोग केवल एक दृश्य संकेत प्रदान करता है, जो सहायक तकनीकों के उपयोगकर्ताओं को नहीं बताया जाएगा - जैसे स्क्रीन रीडर। सुनिश्चित करें कि रंग द्वारा दर्शाई गई जानकारी या तो सामग्री से स्पष्ट है (उदाहरण के लिए दृश्यमान पाठ), या वैकल्पिक माध्यमों से शामिल है, जैसे कि .sr-onlyकक्षा के साथ छिपा हुआ अतिरिक्त पाठ।

576पीएक्स, 768पीएक्स, 992पीएक्स, और 1120पीएक्स तक के प्रत्येक ब्रेकप्वाइंट पर तालिका को क्षैतिज रूप से स्क्रॉल करते हुए किसी भी .tableको के साथ लपेटकर प्रतिक्रियाशील तालिकाएं बनाएं ।.table-responsive{-sm|-md|-lg|-xl}max-width

ध्यान दें कि चूंकि ब्राउज़र वर्तमान में श्रेणी संदर्भ प्रश्नों का समर्थन नहीं करते हैं, इसलिए हम इन तुलनाओं के लिए उच्च परिशुद्धता वाले मानों का उपयोग करके आंशिक चौड़ाई (जो उच्च-डीपीआई उपकरणों पर कुछ शर्तों के तहत हो सकते हैं) के साथ उपसर्ग min-औरmax- व्यूपोर्ट की सीमाओं के आसपास काम करते हैं। .

कैप्शन

एक <caption>तालिका के लिए शीर्षक की तरह कार्य करता है। यह स्क्रीन रीडर वाले उपयोगकर्ताओं को एक तालिका खोजने और यह समझने में मदद करता है कि यह किस बारे में है और यह तय करता है कि क्या वे इसे पढ़ना चाहते हैं।

उपयोगकर्ताओं की सूची
# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

उत्तरदायी टेबल

उत्तरदायी तालिकाएँ तालिकाओं को क्षैतिज रूप से आसानी से स्क्रॉल करने की अनुमति देती हैं। .tableके साथ लपेटकर किसी भी तालिका को सभी व्यूपोर्ट में प्रतिक्रियाशील बनाएं .table-responsive। या, एक अधिकतम ब्रेकपॉइंट चुनें जिसके साथ एक उत्तरदायी तालिका का उपयोग करके .table-responsive{-sm|-md|-lg|-xl}.

लंबवत कतरन/छंटनी

उत्तरदायी तालिकाएँ इसका उपयोग करती हैं overflow-y: hidden, जो तालिका के निचले या ऊपरी किनारों से आगे जाने वाली किसी भी सामग्री को क्लिप कर देती हैं। विशेष रूप से, यह ड्रॉपडाउन मेनू और अन्य तृतीय-पक्ष विजेट को बंद कर सकता है।

हमेशा उत्तरदायी

प्रत्येक ब्रेकपॉइंट पर, .table-responsiveक्षैतिज स्क्रॉलिंग टेबल के लिए उपयोग करें।

# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ब्रेकपॉइंट विशिष्ट

.table-responsive{-sm|-md|-lg|-xl}किसी विशेष विराम बिंदु तक उत्तरदायी तालिकाएँ बनाने के लिए आवश्यकतानुसार उपयोग करें । उस ब्रेकपॉइंट और ऊपर से, तालिका सामान्य रूप से व्यवहार करेगी और क्षैतिज रूप से स्क्रॉल नहीं करेगी।

# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष
# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष
# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष
# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>