Tables

Tables should be used for displaying tabular data when possible. It is recommended that you also include the standard summary="[description of table contents]" for accessibility .attribute in the table tag, as well has <th> tags for column and/or row headings. When applicable, the table <caption> should also be used. Examples of each of these items are available in the source code of the table illustrations on their page, for reference.

In some cases, Data Definitions can provide efficient alternatives to a table. Check out some examples

Standard Table

All tables should be formatted with the "table" applied:

<table class="table">
   ...
 </table>

<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
</tr>

Table With Borders

To add borders to all of your table cells, add the "table-bordered" class:

<table class="table table-bordered">
   ...
 </table>

Table Without Borders

Alternatively, you can remove all borders from your table and table cells by adding the the "table-no-border" class:

<table class="table table-no-border">
   ...
 </table>

Striped Table

For tables with 5 or more rows, it may help to add alternating row background colors. add the "table-striped" class:

<table class="table table-striped">
   ...
 </table>

Table With Hover State

When your table content features rows of options or links, you might also use a "table-hover" class:

<table class="table table-hover">
   ...
 </table>

Condensed Table

Tables with several rows can become cumbersome and take up a lot of vertical space on the page. The "table-condensed" class will lessen the overall cell padding (top and bottom) to reduce the overall table height. The example also illustrates using multiple table classes in a single table.

<table class="table table-condensed table-bordered table-striped">
   ...
 </table>

Responsive Table

While all tables shown on this page will expand/collapse to 100% of their container width by default, it may be desirable to make your table "responsive." To do this, simply add the table in a div container with a class of "table-responsive". This will add a horizontal scroll to the table when viewed on a mobile screen, but otherwise will not alter the appearance of table as set by other table-[class] attributes.

<div class="table-responsive" >

<table class="table">
   ...
 </table>

</div>