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 .
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.
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%
- 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” button . This will bring up the insert/edit table window.
- 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.
Your table should now look like this and will fill the entire screen:
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:
- 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 .
- The Table Row Properties window should now be open. Change the “Row type” from “Body” to “Header” and then click the “Update” button
- 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
- The “Table cell properties” window should open up. Change the “Cell Type” from “Data” to “Header” and click the “Update” button.
- 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:
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:
- Click inside the table row you want to change the background color of and click the “Table row properties” button
- The “Table row properties” window should now be open. Click on the “Advanced” tab to get to this window:
- 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 and select the color you want to be the background color of the table row and click the “Apply” button.
- 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.
- 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: