Example of a Data Table

Tables can be used to align data for easy reading. However, we must keep accessibility in mind. Here's how to show data on a web page in an accessible way.

Name
Address
City State
Zip
Phone
Janis Jones
142 Main Street
Empire MI
34556
345-678-9990
Harvey Wallis
34 East First Street
Oswego NY
13126
315-000-1111

Create a Table

  • First, log into Ingeniux and create a new page (or check out an existing page)Table Properties
  • In the Body copy area, click where you would like the table to appear.
  • Click on the table icon (upper left, 2nd row)
  • Set the general properties (see Insert/Modify table on right).
    • Cell padding and spacing recommendation:  2-3 px
    • Width is best set as a percentage  
    • Border-Enter 1 if you want borders to show. If you want a thicker border, enter a higher number. Also see 'Showing Table Borders' below.
  • Click on Insert


Header Rows

These are used for data tables. Do not use them for a layout table. To create a header row:

  • Right click on the top row
  • Choose Row > Table row properties
  • In the General Tab choose "Table Head' from the first drop down.
  • Click on Update


Width of Column

  • Right click in the top cell
  • Choose cell > Table cell properties
  • Enter a width as a percentage, I.e., 20%
  • Click update
  • Repeat for each cell in the top row of the table. Remember that the total should add up to 100% or, don't set the width of the last cell.
  • You may need to adjust cell widths until your table looks the way you want.

To show borders in a table:

  • In the body copy area, click on the HTML button
  • Paste the following code the HTML source editor.

  • Click update

Editing Tables

To edit the table properties:
Right click on the table and choose properties (This does not work using Firefox on a MacIntosh)

Add or Delete a Row

Insert or edit a row in a table

  • Right click on the row
  • Choose Row >
  • Choose the action you would like to take (see image on left)

Add or Delete a Column

  • Right click on the column
  • Choose Column >
  • Choose the action you would like to take
  • There are also editing buttons for all these actions which will show when you select a table. 




Styling a Wide Table