Tables

Headings

Table headings should be white text on a Header Nav Blue (##00507F) background. Table headings use the <th> tag.

Columns

Columns are the vertical aspect of tables. There is no HTML tag for columns, instead there is “table data,” which uses the <td> tag.

Rows

Rows should alternate in color. Start with white and alternate with Lightest Grey (#f2f2f2). This makes it easier to differentiate between rows.

Sorting

Sortable columns will have a call to action, usually a vertical caret inline with the text. Selected sortable tables will change color when clicked to a dark blue (#013248). On a click, the vertical caret will change direction (up or down).

Buttons

Radio buttons may be used in some tables. The buttons should be centered in their cells. See the buttons page for more information.

NAME ^ MEMBERS SOFTWARE TRANSACTION TYPE
Liesure 13 0 Edit >
Business 55 55 Edit >
Cabforce 15 15 Edit >
Interns 44 44 Edit >
<table style="border:0px;">
<tr style="background-color:#00507F">
<td style="text-align:left; color:#ffffff;">NAME ^</td>
<td style="text-align:center; color:#ffffff;">MEMBERS</td>
<td style="text-align:center; color:#ffffff;">SOFTWARE</td>
<td style="text-align:left; color:#ffffff;">TRANSACTION TYPE</td>
</tr>
<tr>
<td style="text-align:left"><a href='#'>Liesure</a></td>
<td style="text-align:center">13</td>
<td style="text-align:center">0</td>
<td style="text-align:left"><a href="#">Edit ></a></td>
</tr>
<tr style="background-color:#f2f2f2">
<td style="text-align:left"><a href='#'>Business</a></td>
<td style="text-align:center">55</td>
<td style="text-align:center">55</td>
<td style="text-align:left"><a href="#">Edit ></a></td>
</tr>
<tr>
<td style="text-align:left"><a href='#'>Cabforce</a></td>
<td style="text-align:center">15</td>
<td style="text-align:center">15</td>
<td style="text-align:left"><a href="#">Edit ></a></td>
</tr>
<tr style="background-color:#f2f2f2">
<td style="text-align:left"><a href='#'>Interns</a></td>
<td style="text-align:center">44</td>
<td style="text-align:center">44</td>
<td style="text-align:left"><a href="#">Edit ></a></td>
</tr>
</table>

Visual Mockup

HCPStyleguide-03