Follow

Table Tips

Have you ever wanted to line up information in columns on your webpage? To display rows and columns of text insert a table. This article will show the basics of using a table and how to display a table without lines.

Tables are displayed on your site by adding the table to a Text/Graphic Editor tool. The Text/Graphic editor tool can be added to both the Main Body or Right Side of a page, but we don't recommend displaying tables in the right side of a page due to spacing restrictions. 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 100%) when creating a table for responsive reasons. Be careful if you choose pixels that you don't exceed the width of the area.
    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. Again, your choices are pixels or percentages. Pixels are a specific measurement while percentages will vary depending on other items on the page. 
  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.

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 Tabe: 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?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.