Table Styles

Posted by Lori N. Benson at Sep 27, 2011 03:20 PM |

Medical Center department websites can apply several types of styles to their tables resulting in a slightly different look. This post was written with the assumption content editors have a basic understanding of how to format content using one of the editors - TinyMCE or Kupu.

Insert Table Dialog BoxWhen editing a page in Plone and inserting a table, the editors - TinyMCE and Kupu - will display a dialog box with an option to choose the table style.

By default, tables will have a width of 100%.  Tables can have a constrained width and height by adding - style="width: 450px; height: 117px;" - for example in the HTML code.  However, it is not recommended to constrain the table width as the overall page layout is responsive in that it scales smaller/larger depending upon the user's screen resolution. Having a constrained width on tables may result in breaking/hiding some of its content.

Subdued Grid

Default style. Shows a light gray table grid.

Table Heading
Table Heading
 Line 1
 Line 1
 Line 2
 Line 2
 Line 3
 Line 3

Invisible Grid

Grid disappears when viewed.

Horizontal Line

Adds a light gray line on the bottom of each row.

Table Heading
Table Heading
 Line 1
 Line 1
 Line 2
 Line 2
 Line 3
 Line 3

Silver Heading w/ Grid

Adds a gray background to the table heading.  Light gray table grid.

Table Heading
Table Heading
 Line 1
 Line 1
 Line 2
 Line 2
 Line 3
 Line 3

Silver Heading & Border

Adds a gray background to the table heading. Gray border around the table.

Table Heading
Table Heading
 Line 1
 Line 1
 Line 2
 Line 2
 Line 3
 Line 3

Blue Heading w/ Grid

Adds a blue background to the table heading.  Light gray table grid.

Table Heading
Table Heading
 Line 1
 Line 1
 Line 2
 Line 2
 Line 3
 Line 3

Blue Heading & Border

Adds a blue background to the table heading. Gray border around the table.

Table Heading
Table Heading
 Line 1
 Line 1
 Line 2
 Line 2
 Line 3
 Line 3

Editor's Style Drop Down - showing table row classesAlternating Rows & Table Headings

Assign a background color to even/odd rows or changed a table row into a table heading using the editors primary styles. Click your mouse inside the table's row and apply one of the following:

  • Plain Cell: default
  • Odd Row: default white background.  This may be used to "clear" a previously applied Even Row/yellow background.
  • Even Row: applies a yellow background
  • Heading Cell: Creates bold text or is altered by applying anyone of the above-mentioned table styles.  It is also best practice to use for accessibility.
Table Heading
Table Heading
 Line 1
 Line 1
 Line 2
 Line 2
 Line 3
 Line 3