<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
مرستندویه ټیکنالوژیو ته د معنی رسول
د معنی اضافه کولو لپاره د رنګ کارول یوازې یو بصری نښې وړاندې کوي، کوم چې به د مرستندویه ټیکنالوژیو کاروونکو ته نه لیږل کیږي - لکه د سکرین لوستونکي. ډاډ ترلاسه کړئ چې د رنګ لخوا څرګند شوي معلومات یا پخپله د مینځپانګې څخه څرګند دي (د بیلګې په توګه څرګند متن) ، یا د بدیل وسیلو له لارې شامل شوي ، لکه د .visually-hiddenټولګي سره پټ اضافي متن.
د جدول حجرې <thead>تل په عمودی توګه لاندې سره سمون لري. د جدول حجرې په <tbody>میراث کې د دوی ترتیب له هغې څخه ترلاسه کوي <table>او د ډیفالټ له مخې سر ته تنظیم شوي. د اړتیا په صورت کې د بیا تنظیم کولو لپاره د عمودی ترتیب ټولګیو څخه کار واخلئ .
سرلیک 1
سرلیک 2
سرلیک 3
سرلیک 4
دا حجره vertical-align: middle;د میز څخه په میراث کې راځي
دا حجره vertical-align: middle;د میز څخه په میراث کې راځي
دا حجره vertical-align: middle;د میز څخه په میراث کې راځي
دا دلته د ځای لرونکی متن دی، چې موخه یې یو څه عمودی ځای نیول دی، ترڅو وښیې چې عمودی ترتیب څنګه په مخکینیو حجرو کې کار کوي.
دا حجره vertical-align: bottom;د میز قطار څخه په میراث کې ده
دا حجره vertical-align: bottom;د میز قطار څخه په میراث کې ده
دا حجره vertical-align: bottom;د میز قطار څخه په میراث کې ده
دا دلته د ځای لرونکی متن دی، چې موخه یې یو څه عمودی ځای نیول دی، ترڅو وښیې چې عمودی ترتیب څنګه په مخکینیو حجرو کې کار کوي.
دا حجره vertical-align: middle;د میز څخه په میراث کې راځي
دا حجره vertical-align: middle;د میز څخه په میراث کې راځي
دا حجره د پورتنۍ برخې سره سمون لري.
دا دلته د ځای لرونکی متن دی، چې موخه یې یو څه عمودی ځای نیول دی، ترڅو وښیې چې عمودی ترتیب څنګه په مخکینیو حجرو کې کار کوي.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
ځړول
د سرحد سټایلونه، فعال سټایلونه، او د میز ډولونه د نیست شوي میزونو لخوا په میراث نه دي.
د <caption>میز لپاره د سرلیک په څیر کار کوي. دا د سکرین لوستونکو سره د کاروونکو سره مرسته کوي چې یو میز ومومي او پوه شي چې دا څه دي او پریکړه کوي چې ایا دوی غواړي لوستل شي.
د کاروونکو لیست
#
لومړی
تېر
سمبالول
1
مارک
اوټو
@mdo
2
یعقوب
تورټن
@ غوړ
3
لاري مرغۍ
@ټویټر
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
تاسو کولی شئ <caption>د میز په سر کې هم واچوئ .caption-top.
د کاروونکو لیست
#
لومړی
تېر
سمبالول
1
مارک
اوټو
@mdo
2
یعقوب
تورټن
@ غوړ
3
لاري
مرغۍ
@ټویټر
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>