Zolemba ndi zitsanzo zamakongoletsedwe a matebulo (kutengera momwe amagwiritsidwira ntchito mu JavaScript mapulagini) ndi Bootstrap.
Zitsanzo
Chifukwa cha kuchuluka kwa matebulo pama widget a gulu lachitatu monga makalendala ndi osankha masiku, tapanga matebulo athu kuti asalowemo . Ingowonjezerani kalasi yoyambira .table
ku iliyonse <table>
, kenako onjezerani masitayelo anu kapena makalasi athu osiyanasiyana ophatikizidwa.
Pogwiritsa ntchito zolembera zoyambira kwambiri patebulo, nayi momwe .table
-matebulo amawonekera mu Bootstrap. Mitundu yonse ya matebulo imatengera ku Bootstrap 4 , kutanthauza kuti matebulo aliwonse omwe ali ndi zisa adzalembedwa mofanana ndi kholo.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
Mbalame
@twitter
Koperani
<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>
Mutha kutembenuzanso mitunduyo ndi mawu opepuka pamasamba akuda ndi .table-dark
.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
Mbalame
@twitter
Koperani
<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>
Zosankha zamutu wa tebulo
Mofanana ndi matebulo ndi matebulo akuda, gwiritsani ntchito makalasi osintha .thead-light
kapena .thead-dark
kupanga <thead>
s kuwoneka yopepuka kapena imvi.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
Mbalame
@twitter
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
Mbalame
@twitter
Koperani
<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>
Mizere yamizeremizere
Gwiritsani .table-striped
ntchito kuwonjezera mbidzi-mizere pamzere uliwonse wa tebulo mkati mwa <tbody>
.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
Mbalame
@twitter
Koperani
<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>
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
Mbalame
@twitter
Koperani
<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>
Gome lokhala ndi malire
Onjezani .table-bordered
malire kumbali zonse za tebulo ndi ma cell.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
Koperani
<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>
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
Koperani
<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>
Gome lopanda malire
Onjezani .table-borderless
pa tebulo lopanda malire.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
Koperani
<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
itha kugwiritsidwanso ntchito pamatebulo akuda.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
Koperani
<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>
Mizere yosunthika
Onjezani .table-hover
kuti mutsegule chiwongolero pamizere ya tebulo mkati mwa <tbody>
.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
Koperani
<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>
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
Koperani
<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>
Tebulo laling'ono
Onjezani .table-sm
kuti ma tebulo azikhala ophatikizika podula ma cell padding pakati.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
Koperani
<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>
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
Koperani
<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>
Maphunziro a Contextual
Gwiritsani ntchito makalasi okhazikika kuti musankhe mizere yamatebulo kapena ma cell amodzi.
Kalasi
Mutu
Mutu
Yogwira
Selo
Selo
Zosasintha
Selo
Selo
Pulayimale
Selo
Selo
Sekondale
Selo
Selo
Kupambana
Selo
Selo
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
Copy
<!-- 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>
Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.
#
Heading
Heading
1
Cell
Cell
2
Cell
Cell
3
Cell
Cell
4
Cell
Cell
5
Cell
Cell
6
Cell
Cell
7
Cell
Cell
8
Cell
Cell
9
Cell
Cell
Copy
<!-- 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>
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only
class.
Create responsive tables by wrapping any .table
with .table-responsive{-sm|-md|-lg|-xl}
, making the table scroll horizontally at each max-width
breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
Note that since browsers do not currently support range context queries , we work around the limitations of min-
and max-
prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
Captions
A <caption>
functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
List of users
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Copy
<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>
Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table
with .table-responsive
. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}
.
Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden
, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
Always responsive
Across every breakpoint, use .table-responsive
for horizontally scrolling tables.
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Copy
<div class= "table-responsive" >
<table class= "table" >
...
</table>
</div>
Breakpoint specific
Use .table-responsive{-sm|-md|-lg|-xl}
as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
Matebulowa atha kuwoneka osweka mpaka masitayilo awo amayankhidwa atagwiritsidwa ntchito pamawonekedwe enaake.
#
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
1
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
2
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
3
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Koperani
<div class= "table-responsive-sm" >
<table class= "table" >
...
</table>
</div>
#
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
1
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
2
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
3
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Koperani
<div class= "table-responsive-md" >
<table class= "table" >
...
</table>
</div>
#
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
1
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
2
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
3
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Koperani
<div class= "table-responsive-lg" >
<table class= "table" >
...
</table>
</div>
#
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
1
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
2
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
3
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Koperani
<div class= "table-responsive-xl" >
<table class= "table" >
...
</table>
</div>