Table

 
Example 1: Form Table with One Column Headers and Two Column Cells

Note:The Accordion Table and Tabbed Table patterns Date Picker example on this page requires an external javascript library to work. A variety of open source date picker libraries are available, and any can be used depending on the development needs of your project. The examples in the Fireman's Fund Pattern Library require Nick Baicoianu's Epoch javascript library to function.

What It Is

Tables are used in HTML documents to arrange data (text, images, links, etc.) into rows of columns and cells. HTML tables are essentially analogous to (and should be used for equivalent purposes) spreadsheets.

When to Use

Tables should be used whenever organized collections of data need to be presented on your pages.

Best Practices

Because of the wide variation in effectively organizing tabular data, it is difficult to adopt a one-size-fits-all solution to table design. The Allianz standard recognizes this (find attribution from standard), and provides for a great deal of flexibility in how tabular data is arranged and presented to users. For a number of table examples compliant with the Allianz design guidelines, refer to the Additional Examples section on this page.

For the purposes of the Pattern Library and building out your application pages, tables fall into one of the following two general types:

  • Form tables: Form tables appear within user input forms for data collection. Rather than displaying tabular data in a series of long horizontal rows, form tables are collections of labels and an associated user input or text element. Refer to example 1, example 2, and example 3 on this page.
  • Data display tables: Data display tables present collections of data in collections of horizontal rows. While they may appear within a form and include user input elements, the main distinction versus form tables is that rather than collections of name/value pairs, they present multiple rows corresponding to a given table heading. The remaining examples on this page are of the data display table type.

The following general guidelines should be followed when working with tables:

  • Determine the appropriate number of columns you'll require per row to lay out your data for optimal readability.
  • Review the additional examples on this page to determine the appropriate CSS classes required for your page layout.
  • Amounts and percentages must be right-aligned in their parent cells (apply a class of tableRight).
  • If you experience strange formatting issues in your rendered HTML pages, make sure that you've applied the appropriate classes for your design. If the total width of your applied classes (including HTML padding, margins, and borders) exceeds the available width of the page, or if you include input elements that exceed their parent cell width, your table may resize in unpredictable ways.