Skip to main content link. Accesskey S

Grid

The grid view of data is a tabular view. Sort controls are built into the table as header elements.

Sprites: Directionality:

Variation

Classes

  • lotusTable - Class assigned to the table tag
  • lotusFirst - Used on any row where you need to get rid of the top border used between rows for lines.
  • lotusLast - Used on the last row in a table when you want the last row underlined.
  • lotusSort - Used on top row to create sortable headers.
  • lotusFirstCell - Used on the first cell, for proper alignment
  • lotusLastCell - Used on the last cell, for proper alignment
  • lotusAltCell - Used on every other row to allow a different background color
  • lotusSS - Used for superscripted elements
  • lotusComplete - Used for todos, to style the text with strikethrough
  • lotusRowHeader - Used when you want a row header. Goes on a th tag which is the first cell in a row.
  • lotusSubHeader - Used on a th tag that spans all the columns in a table so that you can make a subheader row.

Basic Implementation

Use a table for the grid, assigned the class lotusTable. Use regular rows and cells to create your table. Look at the classes listed above for further implementation details.

Create the sort headers using th tags. Assign the lotusSort and lotusFirst class on the header row (tr tag).

Variations

If you want subheaders in your table, put the lotusSubHeader class on a th tag that spans all rows in the table. The first row following this row should have a lotusFirst class assigned to it to turn off the border. The header text in this row would be wrapped in an h4 tag.

When you want a row header (similar to a vertical table), make the first cell in your row a th and assign the lotusRowHeader class, so we can apply a different style than the default column header style.

If your table doesn't have a paging bar following it, you may want to turn on the bottom row of the table. Apply the lotusLast class to the tr tag in this case.

Examples

Sample HTML

CSS (tables.css)

Theme CSS (tablesTheme.css)

Our tables support a variety of views. This is the typical grid view.

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.