Table: Two-Column


Live Site Example: Emergency or Urgent Care?


Desktop

Mobile

Usage Guidelines: Two-Column Table

  • This is the best table to use for mobile because all columns can be seen on the screen at once.
  • Links can be added to any column.
  • Keep needed information confined to the table. Try not to use symbols or asterisks (*) in place of information located outside of the table. The more you make someone rely on memory, the harder your content is to use.

Data Table: Full-Width


Live Site Example: Heart Center: Statistics and Outcomes


Desktop

Mobile

Usage Guidelines

  • Using this table on seattlechildrens.org requires planning outside of regular web update requests. If you are considering using this table, contact Margo Schneider or Vanessa Casavant.
  • Use this table for presenting one point of data. If you need to display more than one point of data, use the flex-width table below.
  • All tables require the following information:
    • Table Header: Describes what the content is about (e.g. Total number of heart surgeries)
    • Data Point Label: Context of when or where the data was taken (i.e. a year or range of years)
    • Data Point: A numeric value

Data Table: Flex-Width


Live Site Example: Heart Center: Statistics and Outcomes


Desktop

Mobile

Usage Guidelines

  • Using this table on seattlechildrens.org requires planning outside of regular web update requests. If you are considering using this table, contact Margo Schneider or Vanessa Casavant.
  • Use this table for presenting a series of related data points. If you need to display more only one data point, use the full-width table above.
  • All tables require the following information:
    • Table Header: Describes what the content is about (e.g. Total number of heart surgeries)
    • Label: Context of when or where the data was taken (i.e. a year or range of years)
    • Data Point: A numeric value

Data Table: Expandable Accordion


Live Site Example: Heart Center: Statistics and Outcomes


Desktop

Mobile

Usage Guidelines

  • Using this table on seattlechildrens.org requires planning outside of regular web update requests. If you are considering using this table, contact Margo Schneider or Vanessa Casavant.
  • Use the expandable accordion tables when you need to display a range of data for various things, such as statistics and outcomes for specific procedures related to the same program. You can use either the full-width or flex-width styles of tables.
  • All tables require the following information:
    • Table Title: Describes what the content is about (i.e. that name of a procedure)
    • Table Header: Context of when or where the data was taken (i.e a year or range of years)
    • Label or Data Point Label: What the specific data represents (e.g. survival rate)
    • Data Point: A numeric value

Grid: Three-Column


Live Site Example: Contact the Guild Association and Contact Us


Desktop

Mobile

Usage Guidelines

  • This layout is a great choice for displaying contact information. It works well in desktop and mobile, with the second row of information moving below the first row in mobile view and stacked as column 1, 2 and then 3.
  • You can use between one and three columns of information and as many rows as needed.

Questions?

Contact ehealth@seattlechildrens.org.