Skip over navigation

Managing Tables in the Editor

Table, RXML, or Text & Picture

The HTML table element is a useful set of tags for structuring tabular data. During the pre-CSS era of the Browser Wars, tables were the primary method of positioning non-tabular content on a page. Tables are still sometimes used for layout merely because Internet Explorer does not support CSS3 columns and CSS floats can sometimes be confusing to work with.

The editor for the Roxen Content Management has three main options for tables:

  1. A deprecated, legacy Table component (Insert --> Table);
  2. The "Insert/Edit Table" button in the toolbar of the Text & Picture component;
  3. Entering raw HTML code into the RXML component.

Using the RXML component makes sure that your code is unaltered; however, making changes to to the table code might be cumbersome and could be an obstacle for colleagues who have to update the content.

Some issues with the Table component are listed below.

This leaves the table button inside the Text & Picture component.

Inserting a Table

FCKeditor toolbar with Insert Table highlighted

Insert the cursor in the Text box and click the Insert/Edit Table button. A Table Properties dialog pops up.

FCKeditor toolbar with Insert Table highlighted

Choose how many Rows and Columns for your table, and set a table Caption and/or Summary, if desired. If you are using CSS to style the table, ignore the rest. Blank out the values if you would like. The CSS rules will override the HTML attributes.

The table below uses the default settings from the Table Properties dialog above. Notice how the table takes on some visual properties that are pre-defined in the site theme (in this case, the OIT theme). In the OIT theme, for example, the CSS rules override the HTML border attribute with the CSS rule border: 1px solid #bbb; and table cells are set to automatically adjust according to the content width.

The "Alignment" option uses the deprecated align attribute, so you should avoid that and use the CSS margin property (ex. margin: 0 auto;) for horizontal alignment instead. Read the next few sections for instructions on how to target a table with custom CSS rules.

Batman Robin
Captain America Bucky
Green Arrow Speedy

Inside the FCKeditor window, the table might look completely different, like the screenshot below:

Table inserted into the editor window

Or with the border property set to zero, on the site and then in the editor:

Batman Robin
Captain America Bucky
Green Arrow Speedy

The Table HTML Code

When the editor doesn't generate the exact code that you want, sometimes you have to click the Source button and manually change the code. You start with the parent table element with border, cellspacing, and width attributes. Inside that is the optional tbody element (most web browsers, unfortunately, do not take advantage of the table head, table body, and table foot elements). Inside that is a tr element for each table row, and then a td element (table data) for each table cell.

<table border="1" cellspacing="1" width="200">
    <tbody>
        <tr>
            <td>Batman</td>
            <td>Robin</td>
        </tr>
        <tr>
            <td>Captain America</td>
            <td>Bucky</td>
        </tr>
        <tr>
            <td>Green Arrow</td>
            <td>Speedy</td>
        </tr>
    </tbody>
</table>

In the next code example, I decided to increase the accessibility of my table and add additional hooks for CSS by adding th (table header cell) tags. th tags and td tags must be inside tr tags. Notice that I chose to keep the th tags inside the tbody tags, rather than add thead tags. Yes, using thead tags would be the optimal way to structure this particular table, but I chose to leave them out because most browsers ignore the thead tag anyway.

<table border="1" cellspacing="1" width="200">
    <tbody>
        <tr>
            <th>Hero</th>
            <th>Sidekick</th>
        </tr>
        <tr>
            <td>Batman</td>
            <td>Robin</td>
        </tr>
        <tr>
            <td>Captain America</td>
            <td>Bucky</td>
        </tr>
        <tr>
            <td>Green Arrow</td>
            <td>Speedy</td>
        </tr>
    </tbody>
</table>

Hero Sidekick
Batman Robin
Captain America Bucky
Green Arrow Speedy

It is possible to use a th tag to indicate a header for a row, instead of a column. Just change the appropriate td to a th tag, then use the scope attribute. Accepted values for the scope attribute are col, colgroup, row, or rowgroup.
Example: <th scope="row">Gotham City</th>

For more information, check out the tutorial on “HTML Tables” at W3Schools.com.

Targeting Specific Tables

Every page in a Roxen CMS site that uses the WDS “department” default setup adds an id attribute and a class attribute to the body tag. The values of these attributes come from the directory names in the file path. For example if a page is at /department/example/foobar/, the body has the id value “example” and the class value “foobar.” The id stays the same for subfolders of the top-level subfolders, so the code for a page at /department/example/barfoo/ would be
<body id="example" class="barfoo">.

To target all tables on the site, your CSS rule in your custom.css file might look like:
table { border-collapse:collapse; }

To target all tables on the “example” page and all of its subpages, your CSS rule might look like:
#example table { border-collapse:collapse; }

To target all tables on any any “foobar” page in the site, your CSS rule might look like:
.foobar table { border-collapse:collapse; }

To target all tables on only the “foobar” under the “example” directory, your CSS rule might look like:
#example.foobar table { border-collapse:collapse; }

You could also add a custom class to an individual table via the Source button, and then you could add a rule with that class selector to your custom.css file.
.heroesandsidekicks { border-collapse:collapse; }

To target any table with an HTML border attribute equal to 1, use a CSS attribute selector:
table[border="1"] { border:none; }

Styling Tables with CSS

Once you have a way to target your table, you can start adding style rules to your custom.css file. When I initially mention a CSS property, I will put their optional values in parentheses; the default values for standards-compliant browsers are in italics.

There are a few styles that I like to add to all of my table, td, and th tags. I override them later, as needed.

  • border-collapse (separate, collapse, or inherit)
    By default, browsers render tables with double borders. This property collapses the borders into single-line borders. In HTML, the distance between the double borders is determinied by the cellspacing HTML attribute; I use the border-collapse property to override cellspacing and set it to zero (In IE 5-7, if a cellspacing value is set, it will incorrectly override border-collapse).
  • empty-cells (show, hide, inherit)
    Sets whether to display borders and background on empty cells. The old-school hack to replicate the empty-cells:show; behavior and overcome IE's non-standard behavior was to place a non-breaking space (&nbsp;) in every empty table cell.
  • vertical-align (middle, baseline, top, bottom)
    The vertical-align properly behaves differently with table cell content than it does with inline content. The default “middle” value rarely looks good with tabular data, so I set the content to align to the top inside the cell.

table {
    border-collapse: collapse;
    empty-cells: show;
}

td, th {
    vertical-align: top;
}

For the next few examples, I will be targeting the tables on the page “foobar.”

Table head cells, by default, are bold and centered. If they have been added to the markup, you may want to override that.

  • text-align (left, right, center, justify, inherit)
    Sets the horizontal alignment of inline objects, like text.
  • font-weight (normal, bold, bolder, lighter, 100, 200, 300,…, 900)
    Normal is the default for table data cells, bold is the default for the table head cells. The other values have limited browser support.
  • font-style (normal, italic, oblique, inherit)
    You may want to add an italic style to whatever font-weight you choose.

.foobar th {
    text-align: left;
    font-weight: normal;
    font-style: italic;
}

It is possible that font sizes inside table cells may be different than the rest of the body text or even inside other table cells. When this happens, often the culprit is a font-size value defined for paragraph tags in a certain area, but not for unstructured content or content inside other elements like table data or table head cells. You could use comma-separated selectors to make sure all elements are covered.

  • font-size
    This property accepts font-size keywords (small, medium, large, etc.), relative values like em, ex, and % (1em is equivalent to 100%); fixed size values like pixels (px), print values like in, cm, mm, pt; and smaller, larger, inherit.

#content p,
#content td,
#content th,
#content td p,
#content th p {
    font-size: 1.1em;
}

The spacing inside table cells may be thrown off by theme margins and padding or by the cellpadding HTML attribute. Sometimes content typed or pasted into table cells may or may not be inside a paragraph tag. In the FCKeditor, when a cursor is placed inside of a block of content that is inside a paragraph tag, the Format dropdown displays "Normal." Otherwise, it displays "Normal (DIV)" or one of the other formats. For consistent vertical spacing inside table cells, you may want to set paragraph margins to 0 and rely on extra <br/> tags (shift-return line breaks) for double spacing.

  • padding
    Overrides the cellpadding HTML attribute, and allows you to specify a single value for all four sides or independent values for top, right, bottom, and left padding on the inside of table cells.
  • margin
    Does not work on the table cells, themselves, but content within the table cells. Again, it allows independent values for top, right, bottom, and left margins.

td p,
th p {
    margin: 0;
}

.foobar td,
.foobar th {
    padding: .25em .5em .25em .5em;
}

Styling Tables with Advanced CSS

Table widths and column widths are a frequent concern with content tables. Tables in the Table Component have a system-level style that gives them a width of 100%. In the Text & Picture component, content width determines table width. The width CSS property is best for overriding these defaults and/or setting custom values.

In the Text & Picture component, it is possible to give individual table cells an HTML width value; however using adjacent selectors is a far more elegant solution. In this example, first you target a th tag; then you target any th tag that immediately follows a th tag; then you target a th tag that comes after a th that comes after a th; and so forth. The plus symbol indicates an adjacent selector.

.foobar td {
    width: 100px;
}

.foobar td+td {
    width: 150px;
}

.foobar td+td+td {
    width: 250px;
}

10 Things I Hate About the Table Component

  1. The "Table align center" variant creates a table within a table.
  2. It strips out any table class you add so that it can add its own class.
    example: class="tbl_comp_00004cc8dede_000000905c_70d9"
  3. It is more difficult to reuse table styles across multiple tables.
  4. It uses the !important declaration on the border-style CSS rule. 
  5. It ignores the width attribute if added to the td tags.
  6. It does not let you use table header (th) tags, also ignoring them.
  7. It invalidly adds the style tag inside the body tag for its embedded styles. The style tag should go inside the head section of the HTML document.
  8. You are limited to one table per component.
  9. It ignores the table summary attribute and the caption tag.
  10. The "Insert Table" button in the Text & Picture component provides better functionality.