Skip navigation

Tables

Tables should be used for displaying tabular when possible. It is recommended that you also include the standard summary="[description of table contents]" for accessibilty .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 thie 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:

This is a standard table
Header 1 Header 2 Header 3 Header 4
Column 1, row 1 Column 2, row 1 Column 3, row 1 Column 4, row 1
Column 1, row 2 Column 2, row 2 Column 3, row 2 Column 4, row 2
Column 1, row 3 Column 2, row 3 Column 3, row 3 Column 4, row 3
<table class="table">
  ...
</table>

Column headings should be formatted as <th> rather than bolded <td> content.

Ex.

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

 

Note: The common table attributes border, cellspacing and cellpadding can be deleted, but in the least should be set to a value of "0" so they do not conflict with other css attributes included in the "table" class. Width will automatically be set to 100 percent of its containing element, unless otherwise defined in the table tag.

Table With Borders

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

This is a standard table with borders
Header 1 Header 2 Header 3 Header 4
Column 1, row 1 Column 2, row 1 Column 3, row 1 Column 4, row 1
Column 1, row 2 Column 2, row 2 Column 3, row 2 Column 4, row 2
Column 1, row 3 Column 2, row 3 Column 3, row 3 Column 4, row 3
<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:

This is a standard table with no borders
Header 1 Header 2 Header 3 Header 4
Column 1, row 1 Column 2, row 1 Column 3, row 1 Column 4, row 1
Column 1, row 2 Column 2, row 2 Column 3, row 2 Column 4, row 2
Column 1, row 3 Column 2, row 3 Column 3, row 3 Column 4, row 3
<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:

This is a standard table with alternating row colors
Header 1 Header 2 Header 3 Header 4
Column 1, row 1 Column 2, row 1 Column 3, row 1 Column 4, row 1
Column 1, row 2 Column 2, row 2 Column 3, row 2 Column 4, row 2
Column 1, row 3 Column 2, row 3 Column 3, row 3 Column 4, row 3
Column 1, row 4 Column 2, row 4 Column 3, row 4 Column 4, row 4
Column 1, row 5 Column 2, row 5 Column 3, row 5 Column 4, row 5
Column 1, row 6 Column 2, row 6 Column 3, row 6 Column 4, row 6
<table class="table table-striped">
  ...
</table>
Note: Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

Table With Hover State

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

This is a standard table with hover state on rows
Header 1 Header 2 Header 3 Header 4
Column 1, row 1 Column 2, row 1 Column 3, row 1 Column 4, row 1
Column 1, row 2 Column 2, row 2 Column 3, row 2 Column 4, row 2
Column 1, row 3 Column 2, row 3 Column 3, row 3 Column 4, row 3
Column 1, row 4 Column 2, row 4 Column 3, row 4 Column 4, row 4
Column 1, row 5 Column 2, row 5 Column 3, row 5 Column 4, row 5
Column 1, row 6 Column 2, row 6 Column 3, row 6 Column 4, row 6
<table class="table table-hover">
  ...
</table>
Note: Hover effects do not typically work on mobile devices.

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.

This is a condensed table with borders and alternating row colors
Header 1 Header 2 Header 3 Header 4
Column 1, row 1 Column 2, row 1 Column 3, row 1 Column 4, row 1
Column 1, row 2 Column 2, row 2 Column 3, row 2 Column 4, row 2
Column 1, row 3 Column 2, row 3 Column 3, row 3 Column 4, row 3
Column 1, row 4 Column 2, row 4 Column 3, row 4 Column 4, row 4
Column 1, row 5 Column 2, row 5 Column 3, row 5 Column 4, row 5
Column 1, row 6 Column 2, row 6 Column 3, row 6 Column 4, row 6
Column 1, row 7 Column 2, row 7 Column 3, row 7 Column 4, row 7
Column 1, row 8 Column 2, row 8 Column 3, row 8 Column 4, row 8
Column 1, row 9 Column 2, row 9 Column 3, row 9 Column 4, row 9
Column 1, ... Column 2, ... Column 3, ... Column 4, ...
Column 1, row 50 Column 2, row 50 Column 3, row 50 Column 4, row 50
<table class="table table-condensed table-bordered table-striped">
  ...
</table>
Note: The order in which the class names appear will have no impact on how they perform, however, for consistency, it is recommended that you always place the "table" tag first.

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.

This is a responsive bordered table
Header 1 Header 2 Header 3 Header 4
Column 1, row 1 Column 2, row 1 Column 3, row 1 Column 4, row 1
Column 1, row 2 Column 2, row 2 Column 3, row 2 Column 4, row 2
Column 1, row 3 Column 2, row 3 Column 3, row 3 Column 4, row 3
<div class="table-responsive" >

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

</div>
Note: Bootstrap states there may be some unexpected behavior with Firefox browsers when you use the "table-responsive" class. We will continue to investigate this and update this section when the problem is resolved.