G15 Generic Tables

This variation is used for larger content chunks that need to be displayed in a table format. Use this as an example, but feel free to add columns and rows to fit your content.

This variation is used for larger content chunks that need to be displayed in a table format. Use this as an example, but feel free to add columns and rows to fit your content.

This variation is used for larger content chunks that need to be displayed in a table format. Use this as an example, but feel free to add columns and rows to fit your content.

This variation is used for larger content chunks that need to be displayed in a table format. Use this as an example, but feel free to add columns and rows to fit your content.

This variation is used to display raw data such as test results, performance data, etc. Use this as an example, but feel free to add columns and rows to fit your data.

This example shows the use of the ascending column header link. This link should illustrate the existing sort order and link to the opposite sort order. The sort icon is inserted via css using the "ascendSort" and "decendSort" class names.

This variation is used to display raw data such as test results, performance data, etc. Use this as an example, but feel free to add columns and rows to fit your data.

This variation is used to show a list of syndication feeds. Column headers are not specified here, but there are some structural rules the table must follow. The table must have at least two columns. The first column must identify the feed's title. The table summary attribute should briefly summarize the column headers, for example, "Contains web feed listings by topic and description." All cells in the table head must be <th scope="col">. The first cell of each row in the table body must be a <th scope="row">, the rest <td>. The standard, 16x16 feed icon must appear as a link in the first cell of each row in the table body, before any other contents in the cell, as shown here. In the HTML source, there must be a space following the end of the feed icon's </a> tag, to prevent following content from sitting up against it. The icon should link to either a feed or to a page displaying the feed's contents. The icon's alt text must read sensibly when it replaces the icon. Text in all cells should be limited to two or less lines of wrapping.

This variation is for showing tabular data in a layout that isn't burdened with heavy background colors and borders. There are several ways to use this table as shown in the various examples.

This example shows the "th-nowrap" class used in the TABLE tag. With this class all TH objects will have their white space set to not wrap. This is useful in table such as the one below where a number is used for each row and you don't want the text to wrap to a second line.

This example shows this table with a vertical layout where only the first TR contains TH elements, and subsequent rows contain only TD elements.

This example shows this table with TH elements on both the top of the table as well as in the first cell of each row.

This table has rows that can be expanded and collapsed. This table has three optional class triggers that affect its appearance and behavior. These are: 1) hilightcol, 2) centerheads, 3) details. The hilightcol trigger causes the first column to be shaded. the centerheads trigger centers the text in the column headings. The details trigger causes the show/hide details link to appear.

This table has rows that can be expanded and collapsed, with no column highlighting.

If you need to use any of the g15v5's with a the regular font size the "regfont" class can be added to the TABLE tag.

The hilighted column is created by adding "hilight" to the class of each <th> or <td> element of that column. The bold font rows are wrapped in a regular <tbody> element. The small font sub-rows are wrapped in a <tbody class="sub"> element. Call to Action buttons can be used on the first row of the table, and dynamic hovers can be used. The note at the bottom was created by adding "note" to the class of the <td> element. The orange text is created using <em class="hilight">. The light grey text next to the orange text is created using <em class="lolight">.

Simpler content in this table, but class="even" and class="odd" are added to each <tr> element, lending a striped appearance. Also class="compact" is added to the <tbody> to minimize width.

This variation shows some options in structuring the table heading cells.

Simpler content in this table showing only status yes/no icons. Also class="compact" is added to the <tbody> to minimize width.

Only for use on ecomm pages. Use in conjunction with a00v0x4 eCommerce HTML page structure.