Source

सारणीः

Bootstrap इत्यनेन सह सारणीनां (जावास्क्रिप्ट् प्लगिन्स् मध्ये तेषां प्रचलितं उपयोगं दृष्ट्वा) ऑप्ट-इन-स्टाइलिंग् कृते दस्तावेजीकरणं उदाहरणानि च ।

उदाहरणानि

पञ्चाङ्गानि तिथिनिर्धारकाणि च इत्यादिषु तृतीयपक्षविजेट्-मध्ये सारणीनां व्यापकप्रयोगस्य कारणात् वयं अस्माकं सारणीः opt-in इति डिजाइनं कृतवन्तः Just add the base class .tableto any <table>, ततः custom styles इत्यनेन सह विस्तारं कुर्वन्तु अथवा अस्माकं विविधैः समाविष्टैः modifier classes इत्यनेन सह ।

अत्यन्तं मूलभूतं सारणीचिह्नं उपयुज्य, अत्र .tableBootstrap मध्ये -आधारितसारणीः कथं दृश्यन्ते इति । सर्वाणि सारणीशैल्यानि Bootstrap 4 मध्ये अनुवंशिकानि सन्ति , अर्थात् यत्किमपि नेस्टेड् सारणी मातापितृणां समानरीत्या शैलीकृता भविष्यति ।

# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ ल्यारी the Bird इति @ twitter इति 
<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।

# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ ल्यारी the Bird इति @ twitter इति 
<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-lights इत्येतत् हल्कं वा श्यामधूसरं वा दृश्यते ।.thead-dark<thead>

# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ ल्यारी the Bird इति @ twitter इति
# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ ल्यारी the Bird इति @ twitter इति 
<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>।

# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ ल्यारी the Bird इति @ twitter इति 
<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>
# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ ल्यारी the Bird इति @ twitter इति 
<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सारणीयाः कोष्ठकानां च सर्वेषु पार्श्वेषु सीमानां कृते योजयन्तु ।

# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ लैरी द बर्ड @ twitter इति 
<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>
# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ लैरी द बर्ड @ twitter इति 
<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>।

# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ लैरी द बर्ड @ twitter इति 
<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>
# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ लैरी द बर्ड @ twitter इति 
<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सेल पैडिंग को आधे में काटकर तालिकाओं को अधिक संकुचित बनाने के लिए जोड़ें ।

# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ लैरी द बर्ड @ twitter इति 
<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>
# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ लैरी द बर्ड @ twitter इति 
<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>

नियमितसारणीपृष्ठभूमिरूपान्तराणि कृष्णसारणीया सह उपलब्धानि न सन्ति, तथापि, समानशैल्याः प्राप्तुं पाठस्य अथवा पृष्ठभूमिउपयोगितायाः उपयोगं कर्तुं शक्नुवन्ति ।

# . शीर्षकम् शीर्षकम्
१ कोशिका कोशिका
२ कोशिका कोशिका
३ कोशिका कोशिका
४ कोशिका कोशिका
५ कोशिका कोशिका
६ कोशिका कोशिका
७ कोशिका कोशिका
८ कोशिका कोशिका
९ कोशिका कोशिका 
<!-- 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वर्गेण सह निगूढः अतिरिक्तपाठः इति सुनिश्चितं कुर्वन्तु

576px, 768px, 992px, तथा 1120px पर्यन्तं (किन्तु न समाविष्टं) प्रत्येकं ब्रेकपॉइण्ट् इत्यत्र सारणीम् क्षैतिजरूपेण स्क्रॉलं कृत्वा, .tableइत्यनेन सह किमपि लपेट्य प्रतिक्रियाशीलसारणीः रचयन्तु.table-responsive{-sm|-md|-lg|-xl}max-width

ध्यानं कुर्वन्तु यत् यतः ब्राउजर् वर्तमानं range context queries समर्थयन्ति न , अतः वयं एतेषां तुलनानां कृते अधिकसटीकतायुक्तानां मूल्यानां उपयोगेन भिन्नविस्तारयुक्तानां min-तथा max-उपसर्गाणां दृश्यपोर्टानां च सीमानां परितः कार्यं कुर्मः (यत् उच्च-dpi उपकरणेषु कतिपयेषु परिस्थितिषु भवितुं शक्नोति, उदाहरणार्थं) .

कैप्शन

A <caption>सारणीयाः शीर्षकवत् कार्यं करोति । एतत् स्क्रीन रीडर-युक्तानां उपयोक्तृभ्यः एकं सारणीम् अन्वेष्टुं तथा च तत् किं विषये इति अवगन्तुं साहाय्यं करोति तथा च ते तत् पठितुम् इच्छन्ति वा इति निर्णयं कर्तुं साहाय्यं करोति।

उपयोक्तृणां सूची
# . प्रथमः अन्तिमः वारङ्गः
१ मार्क ओटो @मडो
२ याकूबः थॉर्न्टन इति @स्थूलः
३ ल्यारी the Bird इति @ twitter इति 
<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>

प्रतिक्रियाशील सारणी

प्रतिक्रियाशीलसारणीः सारणीः सहजतया क्षैतिजरूपेण स्क्रॉल कर्तुं शक्नुवन्ति । .tablea with वेष्टयित्वा सर्वेषु viewports मध्ये किमपि सारणी प्रतिक्रियाशीलं कुर्वन्तु .table-responsive। अथवा, अधिकतमं विरामबिन्दुं चिनुत येन सह प्रतिक्रियाशीलसारणी भवितव्यं .table-responsive{-sm|-md|-lg|-xl}.

ऊर्ध्वाधर क्लिपिंग/ट्रंकेशन

प्रतिक्रियाशीलसारणीः , इत्यस्य उपयोगं कुर्वन्ति overflow-y: hidden, यत् सारणीयाः अधः वा उपरितनधारात् परं गच्छन्तीनां सामग्रीं क्लिप् करोति । विशेषतः, एतेन ड्रॉप्-डाउन-मेनू-इत्यादीनि तृतीय-पक्ष-विजेट्-इत्यादीनि च क्लिप्-ऑफ् कर्तुं शक्यते ।

सदैव प्रतिक्रियाशील

प्रत्येकं ब्रेकपॉइण्ट् पारं, .table-responsiveक्षैतिजरूपेण स्क्रॉल करणीयसारणीनां कृते उपयुज्यताम् ।

# . शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम्
१ कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका
२ कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका
३ कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका कोशिका 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

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

# . शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम्
१ कोशिका कोशिका कोशिका कोशिका कोशिका
२ कोशिका कोशिका कोशिका कोशिका कोशिका
३ कोशिका कोशिका कोशिका कोशिका कोशिका
# . शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम्
१ कोशिका कोशिका कोशिका कोशिका कोशिका
२ कोशिका कोशिका कोशिका कोशिका कोशिका
३ कोशिका कोशिका कोशिका कोशिका कोशिका
# . शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम्
१ कोशिका कोशिका कोशिका कोशिका कोशिका
२ कोशिका कोशिका कोशिका कोशिका कोशिका
३ कोशिका कोशिका कोशिका कोशिका कोशिका
# . शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम् शीर्षकम्
१ कोशिका कोशिका कोशिका कोशिका कोशिका
२ कोशिका कोशिका कोशिका कोशिका कोशिका
३ कोशिका कोशिका कोशिका कोशिका कोशिका 
<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>