Өченче як виджетлары буенча календарьлар һәм дата сайлау кебек таблицаларның киң кулланылуы аркасында, без таблицаларыбызны сайлау өчен эшләдек . Бары тик төп классны .tableөстәгез <table>, аннары махсус стильләр яки безнең кертелгән модификатор классларыбыз белән киңәйтегез.
<tableclass="table table-bordered"><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>
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
<tableclass="table table-bordered table-dark"><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>
<tableclass="table table-hover"><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>
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
<tableclass="table table-hover table-dark"><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>
Кечкенә өстәл
Өстәлләрне .table-smяртыга кисеп, таблицаларны тагын да тыгызрак ясарга.
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
<tableclass="table table-sm"><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>
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
<tableclass="table table-sm table-dark"><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>
Контекст дәресләре
Өстәл рәтләренә яки аерым күзәнәкләргә төсле класслар кулланыгыз.
<caption>Таблицага баш кебек функцияләр . Бу экран укучылары булган кулланучыларга таблицаны табарга һәм аның нәрсә икәнен аңларга һәм аны укырга теләгәннәрен хәл итәргә булыша.
Кулланучылар исемлеге
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри
Кош
@twitter
<tableclass="table"><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>