तालिकाहरू
बुटस्ट्र्यापको साथ (जाभास्क्रिप्ट प्लगइनहरूमा तिनीहरूको प्रचलित प्रयोग दिएर) तालिकाहरूको अप्ट-इन स्टाइलको लागि कागजात र उदाहरणहरू।
उदाहरणहरू
क्यालेन्डरहरू र मिति पिकरहरू जस्ता तेस्रो-पक्ष विजेटहरूमा तालिकाहरूको व्यापक प्रयोगको कारणले, हामीले हाम्रा तालिकाहरूलाई अप्ट-इन गर्न डिजाइन गरेका छौं । केवल आधार वर्गलाई .table
कुनै पनि मा थप्नुहोस् <table>
, त्यसपछि अनुकूलन शैलीहरू वा हाम्रा विभिन्न समावेश परिमार्जनक वर्गहरूसँग विस्तार गर्नुहोस्।
सबैभन्दा आधारभूत तालिका मार्कअप प्रयोग गर्दै, यहाँ .table
बुटस्ट्र्यापमा कसरी आधारित तालिकाहरू देखिन्छन्। सबै तालिका शैलीहरू बुटस्ट्र्याप 4 मा इनहेरिट गरिएका छन् , जसको अर्थ कुनै पनि नेस्टेड तालिकाहरू अभिभावक जस्तै शैलीमा हुनेछन्।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<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
.
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<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
वा s .thead-dark
लाई <thead>
हल्का वा गाढा खैरो देखाउनको लागि।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<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>
।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<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>
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<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
तालिका र कक्षहरूको सबै छेउमा किनाराहरूको लागि थप्नुहोस् ।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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>
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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-borderless
बोर्डर बिनाको तालिकाको लागि थप्नुहोस् ।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<table class="table table-borderless">
<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-borderless
अँध्यारो टेबलहरूमा पनि प्रयोग गर्न सकिन्छ।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<table class="table table-borderless 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>
।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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>
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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
सेल प्याडिङलाई आधामा काटेर तालिकाहरू थप कम्प्याक्ट बनाउन थप्नुहोस् ।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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>
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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
नोट गर्नुहोस् कि ब्राउजरहरूले हाल दायरा सन्दर्भ प्रश्नहरूलाई समर्थन गर्दैन , हामी यी तुलनाहरूका लागि उच्च परिशुद्धताका साथ मानहरू प्रयोग गरेर भिन्नात्मक चौडाइहरू (जुन उच्च-डीपीआई उपकरणहरूमा निश्चित परिस्थितिहरूमा हुन सक्छ) संग उपसर्गहरू min-
रmax-
भ्यूपोर्टहरूको सीमितताहरू वरिपरि काम गर्छौं। ।
क्याप्शनहरू
एउटा <caption>
कार्य तालिकाको लागि हेडिङ जस्तै। यसले स्क्रिन रिडर भएका प्रयोगकर्ताहरूलाई एउटा तालिका फेला पार्न र यो के हो भनेर बुझ्न र उनीहरूले यसलाई पढ्न चाहनुहुन्छ कि भनेर निर्णय गर्न मद्दत गर्छ।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<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
तेर्सो रूपमा स्क्रोल गर्ने तालिकाहरूको लागि प्रयोग गर्नुहोस्।
# | हेडिङ | हेडिङ | हेडिङ | हेडिङ | हेडिङ | हेडिङ | हेडिङ | हेडिङ | हेडिङ |
---|---|---|---|---|---|---|---|---|---|
१ | सेल | सेल | सेल | सेल | सेल | सेल | सेल | सेल | सेल |
२ | सेल | सेल | सेल | सेल | सेल | सेल | सेल | सेल | सेल |
३ | सेल | सेल | सेल | सेल | सेल | सेल | सेल | सेल | सेल |
<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>