Tables

Tables should be consistently styled across the site. Use of the CSS class listing accomplishes this goal.

Including the tableListing stylesheet

<link rel='stylesheet' type='text/css' href='/styles/css/tableListing.css' />

Removing a row from a table (javascript)

var listTable	= document.getElementById('somethingTable');
var listRow		= document.getElementById('prefix_' + myIdentifier);
var r			= listRow.rowIndex;
listTable.deleteRow(r);

Standard table with <thead>, <tbody> and <tfoot> sections.

Alignment comes from classes tdl, tdc, and tdr.

Vertical alignment comes from classes top, middle, and bottom. Default vertical alignment is middle (determined by browser).

Multiple <tbody> sections.

Notice that the zebra striping resets with each new <tbody> section. This is a function of the browser, and can't be solved with CSS.

Add the class wideGutter to make gutters wider (useful for tight columns with numbers next to each other

By comparison, here is the same table without the wideGutter class.

Vertical padding can be achieved by applying the padded class to any <tr> element.

The padded class is best used in combination with bodyGroupHead and bodyGroupFoot classes described below.

This table has a full grid between cells by applying the grid class to the <table> element.

Standard rowspans, colspans, and notes are also demonstrated.

Apply the notes class to the <tr> element. notes rows must be inside <tbody> (not inside <tfoot>)

Borders can be manually removed as desired.

• Generally, row borders are applied to the top of each <tr>.
• Generally, column borders are applied to the right of each <td>.

Apply the following classes as needed:

• borderLeft
• borderRight
• noBorderLeft
• noBorderRight
• noBorderTop

There is not a borderTop class because it is always present on rows without a specific class. Remove the top border from the row if desired.

Borders can be added manually too. The border above "old" and "new" was not added. It is a foundational CSS setting in tableListing.css applied to all rows.

Zebra stripe classes are:

• default: no class declaration (pale green)
• noRow (pink)
• voidRow (faded grey)
• yesRow (green)
• alertRow (amber)
• observeRow (purple)
• disableHighlight (default pale green, with no highlight)

Apply the desired class to the <tr> element.

On default zebra stripe rows, highlighting can be disabled by applying the class disableHighlight to the <tr> element. Highlighting can not be disabled on colored rows.

See all zebra stripes

This table has faux head and foot rows for each <tbody> group. In this example, there is a <tbody> section for each school.

<tbody>
	<tr class='bodyGroupHead'>
		<td colspan='5'>Mountain School</td>
	</tr>
	...
	<tr class='bodyGroupFoot'>
		<td colspan='5'>Total Due</td>
	</tr>
</tbody>

Additionally, each row has faux head <th> and foot <class='rfoot'> columns. In this example, the date is highlighted as a row heading, and the balance is highlighted as a row footer.

<tr>
	<th>faux heading column</th>
	<td>normal</td>
	<td>normal</td>
	<td class='rfoot'>faux foot column</td>
</tr>

* Highlighting has been disabled on the first row to show that disableHighlight works with faux head and foot columns.

Padding has been applied to bodyGroupHead and bodyGroupFoot rows in this example.

A note about rowspans and row highlighting:

Row highlighting works with rowspans; however, each rowspan group must be separated into a distinct <tbody> section. In this example, notice how the first section works properly, but the last section incorrectly triggers the rowspan highlight when the last row (without any rowspans) is hovered.

Row Highlighting is not printed, and it is only supported within <tbody>.