While it is quite easy to create a table in the HTML WYSIWYG widget by using the Table Tool. We recommend that you should take the following into consideration and that they be contained in their own HTML WYSIWYG widget.

Table structure


Structure is not only important for inheriting styles later, but also for maintaining ADA compliance. A table should:
  • Have the border, cell padding and cell spacing attributes zeroed out
  • Should have the width set to 100%
  • Have a clear distinction of the head row using both the <thead> and <th> tags as shown below
  • If possible have a caption or a summary for the table. Both are described below;
    • A caption (a brief description of the table) is not necessary for every table but it is generally very helpful for  ADA compliance. It informs a viewer what a table is about and makes it easier to find on a page. If a caption is entered for a table, it will appear above the table (example shown below) and can be styled. 
    • A summary on the other hand is a description on how the table is set up, making it easier for visitors to navigate it. Especially if the table is set up in an unique way. While it is not visible on the page, it is to those that use text readers and is usually only needed for complex tables. 
  • The following shows how a table should be structured by the time you are done, using a caption and summary.

The finished table (color determined in the global CSS)


The code used to render the table

 

<table border="0" cellpadding="0" cellspacing="0" summary="Column one has the location and the teacher name, other columns show the class name and room number. " width="100%">
  <caption>
  <h3>Teacher and Classroom List</h3>
  </caption>
  <thead>
    <tr>
      <th>&amp;amp;nbsp;</th>
      <th style="text-align: left;">Class Name</th>
      <th style="text-align: left;">Room Number</th>
    </tr>
    <tr>
      <th colspan="3" style="text-align: left;">Sunnydale South Junior High School</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mrs. Trisha Lancaster</td>
      <td>Science</td>
      <td>310</td>
    </tr>
    <tr>
      <td>Mrs. Eleanor Maynard</td>
      <td>Art</td>
      <td>212</td>
    </tr>
    <tr>
      <td>Mr. Lange</td>
      <td>Physical Education</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

 


 Creating a table in the WYSIWYG editor

Unless  you are familiar enough with HTML source code to modify it for a copied  table from an outside source, we recommend creating a one using the  editor and manually move the contents cell-by-cell. The following shows  how you can attempt to copy the table from an outside source, then paste  into the editor in Campus Suite, strip the styles and begin formatting  it.
  1. Create a designated container for the table SEPARATE from the other text content. In other words, drop in a new WYSIWYG widget just for housing the table.  This allows us to apply a class to that table and override it  individually later. So, to have some content on a page, and then a  table, and then more content, you would have three WYSIWYG widgets to  accommodate things. See Figure 1 below.
  2. Copy and paste the table over into the WYSIWYG editor.
  3. Highlight the table and it's contents.
  4. Click on "Tx" in the editor's toolbar to clear foreign styles migrated over.
  5. Right click on the table and from the shortcut menu select "table properties."   
    • In the Table properties dialog box:
    • Zero out any height, padding and spacing values that are there.
    • Enter "100%" in the width field
    • From the header pull-down menu select one of the following: none, first row, first column, or both
    • Enter either the subject or a summary of the table. 

Figure 1




  • How do I apply a style to a table?
    To apply a style to a table, select the table and go to the Styles menu (located in the first row of the toolbar), there you will be able  to select one of the predetermined styles that was created for your  site?

  • How do I edit a table that has already been created?
    To edit a Table, position the cursor over the table, hold down the Ctrl and click (Mac) or Alt and Right click (PC). This will bring up a menu that allows you  to edit  cells, rows and columns. Giving you additional options for each. It also  allows you to quickly delete the table or view its properties.

    finishedtableopt.jpg

  • How do I insert a row or column?
    To insert a row or column  into a table, position the cursor over the table and click on a cell  where you would like to insert the row or column, press and hold down  the Ctrl and click (Mac) or Alt and Right click (PC). To add a Row (shown below) position the cursor over Row in the menu. An additional menu will appear to the right, select either Insert Row Before or Insert Row After. If you need to delete a row you would select Delete Rows. To add a Column position the cursor over Column, a menu will appear to the right with options, select either Insert Column Before or Insert Column After. If you need to delete a column you would select Delete Columns.

    tablerow.jpg

  • How do I merge or split cells?
    If you need to merge cells select the cells you would like to merge, press and hold down the CTRL button and click. Position the cursor over Cell in the menu, options will appear to the right, select Merge Cells. If you want to merge a cell either right or down, select the cell and press Ctrl and click (Mac) or Alt and Right click (PC) . Position the cursor over Cell in the menu and options will appear to the right, select either Merge Right or Merge Down.

    To split a cell select the cell you would like to split, press and hold down the Ctrl and click (Mac) or Alt and Right click (PC) on the table. Position the cursor over Cell in the menu, a menu with options will appear to the right, select either Split Cell Horizontally or Split Cell Vertically.

    tablescells.jpg