Changing the Default SCC Table Format

This tutorial deals with changing the default format of tables in the SCC implementation of WordPress. For the sake of this tutorial it is going to be presumed that you have already inserted a table into a WordPress Editor using the “insert a new table” button Insert New Table Button.

The default settings for tables in the SCC implementation of WordPress is to have alternating colors for each row of the table. The first row of the body of the table is always white and it alternates with a light grey color every other row. And the  table width is set to auto so the cells of the table table grow or shrink to match the size of the content inside the table.

Table - Default Format

You can see in the image above how having the width set to auto may leave your table looking small. An easy fix for this is to change width of the table so it uses 100% of the space available.

Change table width to 100%

  1. To change the table width click some where in your table in the editor and then click the same button you used to insert the table in the first place, the “inserts a new talbe” buttonInsert New Table Button . This will bring up the insert/edit table window.
  2. You will see the “Width” option in the Insert/Edit Table window. Change it to “100%” and then click the “Update” button. It is generally a good idea to either leave the width blank or set it at a percentage rather than using pixels so the table can change depending on what size screen your viewer is using.
    insert edit table window

Your table should now look like this and will fill the entire screen:

table - width 100%

Adding Headers to your Table

Next you may want to add headers to your table. Headers are part of the table but not considered part of the table body so their formatting is different. You would usually use headers to define what type of content/data you would put in each column of the table.To add Headers to your table:

  1. Click somewhere in the row of your table that you want to be the header, generally this is the first row of the table, then click the “Table row properties” button Table Row Properties button.
  2. The Table Row Properties window should now be open. Change the “Row type” from “Body” to “Header” and then click the “Update” button
    Table Row Properties Window
  3. Next if you don’t already have your cursor inserted into a cell of the row you just changed, click in a cell of the Row you just changed and then click on the “Table cell properties” button Table cell properties button
  4. The “Table cell properties” window should open up. Change the “Cell Type” from “Data” to “Header” and click the “Update” button.
    Table Cell Properties Window
  5. Make sure to “Publish” or “Update” your page to save your changes

Your table should now look like this with a yellow header row with bold text:

Table with header

Changing Table Background color

Generally having alternating background colors helps with readability, but there may be some situations where it is better to have only one color or a different color for the background.To change the background color of a table row:

  1. Click inside the table row you want to change the background color of and click the “Table row properties” button Table Row Properties button
  2. The “Table row properties” window should now be open. Click on the “Advanced” tab to get to this window:
    Table Row Properties Advanced Window
  3. You will see the “Background Color” option in the “Advanced” tab of the “Table Row Properties” window. Either type in the hex code for the color you want (“#ffffff”=white, “#000000″=black) or click on the “Browse”(Color Picker) button Browse (Color Picker) Button and select the color you want to be the background color of the table row and click the “Apply” button.
    Color Picker Window
  4. In the “Table Row Properties” window right above the “Cancel” button there is a drop down menu that has “Update current row” selected. If you wanted to change the background color for all of the rows in the table select  “Update all rows in table” and click the “Update” button.
  5. Now “Publish” or “Update” your page and your done

If you chose to only “Update the current row”, had row 3 selected, and chose white as the background color then your table should now look like this:

Table Row 3 White