Html шаблон таблицы bootstrap

Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

Examples

Using the most basic table markup, here’s how .table -based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

 class="table">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

You can also invert the colors—with light text on dark backgrounds—with .table-dark .

 class="table table-dark">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

Table head options

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make s appear light or dark gray.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

 class="table">  class="thead-dark">  scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter     class="table">  class="thead-light">  scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

Striped rows

Use .table-striped to add zebra-striping to any table row within the .

 class="table table-striped">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

 class="table table-striped table-dark">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

 class="table table-bordered">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

 class="table table-bordered table-dark">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

Borderless table

Add .table-borderless for a table without borders.

 class="table table-borderless">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

.table-borderless can also be used on dark tables.

 class="table table-borderless table-dark">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

Hoverable rows

Add .table-hover to enable a hover state on table rows within a .

 class="table table-hover">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

 class="table table-hover table-dark">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

 class="table table-sm">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

 class="table table-sm table-dark">   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3  colspan="2">Larry the Bird @twitter   

Contextual classes

Use contextual classes to color table rows or individual cells.

Class	Heading	Heading
Active	Cell	Cell
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

  class="table-active">.  class="table-primary">.  class="table-secondary">.  class="table-success">.  class="table-danger">.  class="table-warning">.  class="table-info">.  class="table-light">.  class="table-dark">.   class="table-active">.  class="table-primary">.  class="table-secondary">.  class="table-success">.  class="table-danger">.  class="table-warning">.  class="table-info">.  class="table-light">.  class="table-dark">. 

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

  class="bg-primary">.  class="bg-success">.  class="bg-warning">.  class="bg-danger">.  class="bg-info">.   class="bg-primary">.  class="bg-success">.  class="bg-warning">.  class="bg-danger">.  class="bg-info">. 

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 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

 class="table"> List of users   scope="col">#  scope="col">First  scope="col">Last  scope="col">Handle     scope="row">1 Mark Otto @mdo   scope="row">2 Jacob Thornton @fat   scope="row">3 Larry the Bird @twitter   

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

 class="table-responsive">  class="table"> . 

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.

These tables may appear broken until their responsive styles apply at specific viewport widths.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

 class="table-responsive-sm">  class="table"> . 

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

 class="table-responsive-md">  class="table"> . 

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

 class="table-responsive-lg">  class="table"> . 

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

 class="table-responsive-xl">  class="table"> . 

Источник

42 Bootstrap Tables

Collection of free Bootstrap table code examples: responsive, with pagination, with search, with filter, scrollable, sortable, striped. Upgrade of April 2020 collection. 17 new items.

Related Articles

1. CSS Tables

Author

Links

Made with

About a code

Table V19

A free sales table template with avatars that works on mobile and desktop devices without a hitch. You can select or deselect rows or pick them individually. The free snippet also features hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js, popper.js

Author

Links

Made with

About a code

Table V18

A convenient and all-around free responsive dark table template that works for an assortment of different projects. It also has a hover effect function to highlight the row and a checkmark with an option select/deselect all.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js, popper.js

Author

Links

Made with

About a code

Table V16

If black is your favorite color, then this free dark table template will help you save time and effort since you can embed it quickly. The layout is 100% responsive and features a hover effect that highlights the entire row.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js, popper.js

Author

Links

Made with

About a code

Bootstrap 5 Table with Search and Checkboxes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Table V6

This neat and free shopping cart table template is perfect for all eCommerce websites, regardless of the products. The tool uses Bootstrap Framework as a base, promising complete responsiveness.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js, popper.js

Author

Links

Made with

About a code

Table V5

For your professional application, this free profile table template can come in extremely handy. It features checkboxes, an option to erase a profile and other neat goodies that will do you well.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js, popper.js

Author

Links

Made with

About a code

Table V4

Create a user-friendly and practical timetable with this easy to use and convenient free class schedule table template. The tool sports a very clean design to present all the necessary content in a distraction-free way. It also includes a hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js, popper.js

Author

Источник