Follow

Tables

This article will show the basics of using a table to display rows and columns of text, insert a table. 

Tables are displayed on your site by adding the table to a Text Editor. In this article, we use the Text/Graphic editor tool to display a table. See the Text/Graphic Editor Tool article for instructions about adding the Text/Graphic Editor tool to a page.

Insert a table

In the Text/Graphic Editor tool, select the Table icon.

TT_1.jpg

Selecting the Table icon will open the Table Properties window.

Table Properties

TT_2.jpg
  1. Rows are horizontal and Columns are vertical. Enter the numbers you wish into the boxes. Don't worry if you need to add or remove some later, we can do that.
  2. Header options include None, First Column, First Row, or Both. Cells in the header are centered and bold. We recommend to always use some type of header for accessibility purposes.
  3. Border size describes the thickness of the surrounding edge of the table.
  4. Alignment describes the alignment of the table on the page. Your choices are left, center, and right. 
  5. Width can be expressed in pixels or percentage. We recommend always using a percentage (preferably 80-100%) when creating a table for responsive reasons.
    Height is simply how high or tall you want the table to be. If you leave this blank (recommended), the table will adjust the height based on the table content.
  6. Cell spacing controls the space between table cells.
  7. Cell padding sets the amount of space between the contents of the cell and the cell wall.

Why Make Tables Responsive & Accessible

  • Tables should only be used to display relational data.
  • Tables need Headers to be accessible.
  • Tables may use captions for accessibility.
  • Tables must have a percentage width for responsiveness.

How to Make Tables Responsive & Accessible

 Within an editor check the Table Properties for the following properties to be set as follows:

  • The width should be a percentage of the page or section (80%-100% is recommended)
  • Headers should be added.
    • Select one of the options then update the table when the properties are saved
  • A caption may be added.

Table Display

TT_3.jpg

The table displayed above contains 3 rows and 2 columns, first row headers, and a width of 100%. It's a good place to start for us. As text is entered into a cell, the width of the cell adjusts to accommodate the size of the text. To move from cell to cell, use your Tab key.

To format text, including hyperlinks, simply highlight it and use the buttons in the toolbox at the top, just like you would for any other text in the Text/Graphic Editor tool.

Table Right-Click Options

TT_4.jpg

  1. Paste: Allows you to paste content into a cell.
  2. Cell: See the Cell Options section below for details about the different options. 
  3. Row: There are options to insert a row before the current row, insert a row after the current row, or delete the current row. 
  4. Column: There are options to insert a column before the current row, insert a column after the current row, or delete the current column
  5. Delete Table: Option to delete the entire table.  
  6. Table Properties: Opens the initial table properties window. You are able to edit all the table properties except the rows and column number. 

Cell Options

 

TT_5.jpg

 

  1. Insert Cell Before: Inserts a cell before the cell selected
  2. Insert Cell After: Inserts a cell after the cell selected
  3. Delete Cells: Deletes the selected cells.
  4. Merge Cells: This option will only be available if multiple cells are selected. Merges the selected cells.
  5. Merge Right: Merges the selected cell with the cell to the right
  6. Merge Down: Merges the selected cell with the cell a row below
  7. Split Cell Horizontally: Splits the current cell into 2 rows of cells 
  8. Split Cell Vertically: Splits the current cell into 2 columns of cells
  9. Cell Properties: Opens the cell properties window the following options:
    TT_6.jpg
    1. Width and Height (in pixels)
    2. Word Wrap can be set to yes or no. Note that text may not be visible if this is set to No.
    3. Horizontal alignment and Vertical alignment of cell text can be set
    4. Cell Type can be set as either header or data.
    5. Rows Span and Columns Span allows a single table cell to span the width or height of more than one cell or column.
    6. Background Color allows you to set a background color for the table. If you do use this make sure that you either have dark text on a light background or light text on a dark background. Using this feature will override an existing code for colors on your site.
    7. Border Color allows you to set a border color for the table.
 

Remove Table Borders

Sometimes a table looks better without the borders. Your text will look like it's set up in columns. Here are the steps to make that happen:
  1. Click anywhere within the table.
  2. Right-click and choose Table Properties from the menu options.
  3. Set the Border Size 0.
  4. Click OK.

TT_7.jpg

You will still be able to see where the borders are in the Text/Graphic Editor, but the borders will not display on the page.
Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.