Working with Tables

table image

Tables are a key element for working effectively with the Pattern Library. As the Allianz standard is at heart a grid based system, a number of classes are available for laying out your table columns so that they align to the grid. The following primary table classes are available for aligning columns to the underlying page grid:

  • .oneColumn
  • .twoColumn
  • .threeColumn
  • .fourColumn

An additional special case class (oneAndHalfColumn) is available for special circumstances when you need the flexibility to have a column fall in between the major grid lines.

Wherever possible, table columns should align with the underlying grid structure. This is not always practical in the case of data-rich tables with multiple columns. In such cases, make a best effort to align as many columns as possible to the grid, and make sure the left-most and right-most column align to the grid.

To align your table cells to the grid, follow these general guidelines:

  1. Determine how many total columns your table will require.
  2. Assign one of the column classes (.oneColumn, .twoColumn, etc.) to each of the header (th) and cell (td) elements in the first row of your table.
  3. For table cells that must align with the left edge or right edge of your page, you must use one of the following specialty classes to ensure elements align properly with the grid*:
    • .oneColumnLeft or .oneColumnRight
    • .oneAndHalfColumnLeft or .oneAndHalfColumnRight
    • .twoColumnLeft or .twoColumnRight
    • .threeColumnLeft or .threeColumnRight
    • .fourColumnLeft or .fourColumnRight

* These additional specialty classes adjust the overall width and padding of the left-most and right-most columns to ensure that table cells align with the grid. Note that if a side navigation element is included on the page, you will not need to apply a special class to the left-most column. Similarly, if your right-most column does not terminate at the right border of the page, it is not neccessary to apply one of the specialty right classes. For clarifying examples of when to use the specialty left and right classes, refer to the HTML code in the five column and six column samples.

Troubleshooting Table Layout Issues

It is generally a good idea to verify that your tables are aligning to the grid by following the steps detailed in the Verify Layout topic. If your table is not aligning as expected to the grid, it is usually for one of the following reasons:

  • The total width of all your table columns exceeds the available width of the page. This is particularly likely to occur when editing the width of your page to a smaller size. Try changing one or more td or th elements in the first row of your table to a smaller column class to see if it resolves the issue.
  • You have forgotten to apply the specialty left and right table classes the left-most and right-most columns. As described above, columns terminating at the edge of your page need to have a specialty class assigned to adjust their overall width and padding. Double-check that you have the appropriate class applied to the left and right most columns.
  • You've accidentally applied a specialty left or right class to a table column that doesn't require it. If you have a side navigation element on your page, table content will not align with the left most edge of the page (the left edge of the page is already allocated to the side navigation element).