Table Styles
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.
When 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.
| Table Heading |
Table Heading |
|---|---|
| Line 1 |
Line 1 |
| Line 2 |
Line 2 |
| Line 3 |
Line 3 |
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 |
Alternating
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 |
