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.

Create a Table

• First, log into Ingeniux and create a new page (or check out an existing page)
• 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

• 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