Tables

Table basics

The default table style can be accessed by adding the .ink-table class to the <table> element. This will enable you to use the default style. You can then add other classes to get any of the variations.

Example

Note To improve table cell formatting you can use Ink's Layout classes such as .large-%, .medium-% and .small-%. Or even .content-left and .content-right if a different alignment is needed for any given cell.

Code

<table class="ink-table">

Alternating colored rows

To better distinguish between consecutive rows, combine the .ink-table class with the .alternating class to get an alternating background color effect.

Example

Code

<table class="ink-table alternating">

Highlight rows on hover

To highlight rows on mouse hover, add the .ink-hover class.

Example

Code

<table class="ink-table hover">

Full borders

To get a more classic table with borders all around, use .ink-bordered.

Example

Code

<table class="ink-table bordered">

Combining several styles

For great flexibility you can combine all of the above styles in the same table, obtaining a fully bordered table with alternating colored rows that light up on hover.

Example

Code

<table class="ink-table bordered alternating hover">

Special colored rows

You can use the Ink utility classes to style rows that need special attention. Use the .ink-label class with the .info, .warning, .error or .success class on any <tr> to paint the row in the corresponding background color.

Example