Skip to main content
Explore URMC
menu

Tables

Tables should be used for tabular data only, not for layout of content. While sometimes it is easier to create a specific layout using a table, it creates accessibility problems—users who are visually impaired and who use screen readers to browse the web will not see the content of a table in the same order that you do. Nevertheless, there are times when tables are appropriate, and can be used (e.g., for a list of contacts and their phone numbers).

Tables consist of rows and columns. Some tables may use a header row or column with data labels that describe the content below or next to them. In HTML, spacing can be applied to different aspects of the table: The border, cell padding, and cell spacing. In the URMC template, spacing and borders is handled automatically with stylesheets. You should leave these settings blank when creating new tables.

If you do find yourself struggling to place parts of your content on your page in a particular layout, contact us and we can help!

Responsive Tables

Responsive tables are tables that automatically adjust their layout to accommodate a variety of screen sizes. Not all tables are created equal, however, and in general tables that do not follow best practice guidelines will not display well on small screens. The following describes the process that renders tables responsive and describes both well-formed and “non-responsive” tables.

Table Processing

In order to make tables responsive, every table in Kentico is processed each time the page is loaded. If a table is well-formed (see below), a style is applied that makes the table resize automatically to fit a user's screen. In addition, the responsive processor removes all styles and attributes within the table that could prevent it from being responsive, including:

  • height
  • width
  • style
  • border
  • cellpadding
  • cellspacing

Correct Formatting

In general, a well-formed, responsive table:

  • has a designated header row, column or both using the <th> element,
  • has more than one row and column, and
  • does not use the colspan or rowspan attributes.

The following are examples of well-formed tables.

Col1 Col2
Row1-1 Row1-2
Row2-1 Row2-2

Header Column

Col1 Row1-1 Row1-2
Col2 Row2-1 Row2-2
Col2 Row3-1 Row3-2

Header Row and Column

ColRow Col1 Col2
Row1 Data1-1 Data1-2
Row2 Data2-1 Data2-2

Incorrect Formatting

Our responsive solution for tables will only handle tables that follow our best practices, and don't use certain complex table functionality (such as colspan or rowspan). The following examples of tables are not handled by our responsive table solution, and might not be able to handle the transition from desktop to table or phone view.

1 Column

Tables should be reserved for data that must be rendered in rows and columns. A table that has only one column is really just a list, and should be formatted as such. The following table is a one-column table that sets a width of 500 pixels. Because one-column tables are not handled by the responsive algorithm, this table will not resize for smaller screens; rather, it will remain 500 pixels wide.

Col1
Row1-1
Row2-1

Colspan/Rowspan

Though using rowspan and colspan attributes is valid in a table, our responsive table solution is unable to handle their usage.

Col1 Col2
Data1-1
Data2-1 Data2-2
Data3-2

Column Head Mismatch

Tables should have the same number of head columns as columns. In the case that the numbers do no match up, the table will not be made responsive.

Col1 Col2
Row1-1 Row1-2 Row1-3
Row2-1 Row2-2 Row1-3