Skip to main content Skip to navigation

Tables

Suggestion: Put the table in is own text/html item.
This is a precautionary measure. If things mess up, you’ve only affected the table.

Step 1: Paste in table

Copy and paste the table in from your source, Word or Excel.
Note: The width of cells in the table will not appear on the website but will appear in the Text/HTML item.
Let the websites formatting rules handle the width of the table. This is especially important with small screens.

Step 2: Removing Bold Text

Bold text tends to be used in documents to designate headings. On a webpage this does not indicate a heading. It indicates meaning (strong emphasized voice) rather than the purpose of a heading.

Remove bold table headings by removing the bold text.
Select all the table. Alt + A will select all of the text and table within the Text/HTML item. (Another reason to put the table within its own Text/HTML item.)
Click on the bold (B) icon. Everything will be bold. That’s OK.
Click on the bold (B) icon again. This will remove bold from everything.
This is much easier than selecting each individual heading to remove the bold. Plus, it removes any extra bold spaces you can’t see.

Step 3: Create Headings

Designate headings with cell properties.
Headings can be column or row headings, or both.
Place the cursor in the cell you’d like to designate as a heading. Click on the table drop-down list. Select Cell. Then Table cell properties. Depending if it is a column or row change the following settings.

For Column Headings:
Cell Type: Header Cell
Scope: Column

For Row Headings:
Cell Type: Header Cell
Scope: Row

Important: Empty cells are not get designated as a heading

How do you know if you need column and row headings?

If you need both the column heading and the row heading to make sense of the information than you need both column and row headings. Small tables tend to not need row headings. Large multi-column tables tend to need both column and row headings.

Merging cells (Spanning)

Do this when the information in a cell relates to multiple cells.
Place the cursor in the first cell you’d like to merge. Click on the table drop-down list. Select Cell. Select Merge table cell.

For spanning rows:
Cols: 1
Rows (total number of cells you want grouped together for that column)

For spanning columns:
Cols: (total number of cells you want grouped together for that row)
Rows: 1

 Styling the table

adding different tables styles is on the text side of the text/html item

Border around everything

add class=”borderall” within the <table>

 

 

 

Boder around the Headers

Add class=”header” within the <table>

Adding stripes to the table

Add class=”stripe” to the table

Border to the bottom of the first row

Add class=”topborder” within the <table>

Border to the bottom of the last row

Add class=”bottomborder” within the <table>

Add a line to the data cells

Add class=”line” within the <table>

How to add multipe styles to a table

add class=”” within the <table>
separate different classes with a space
class=”topborder bottomborder”
class=”stripe line”