While it is quite easy to create a table in the HTML WYSIWYG widget by using the Table Tool. Since your site can be viewed on different devices we recommend that all tables be contained in their own separate HTML WYSIWYG widget so that the responsiveness of the different elements on the page is kept as high as possible on the different devices

Table structure


The 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 is 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 on 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