- Use tables solely for data, rather than as a layout technique.
- Table cells which contain color distinctions that indicate different meanings should also contain text distinctions.
- Table cells which contain only images must have alternative text describing the images (see Images).
- Identify your row or column headings. See below for Adding Headers to a Table.
Click within your page text area where you wish to place a table of data.
Click the Table button located on the formatting bar.
Select Insert table, then roll over the number of rows and columns you think you’ll need. Click to insert.
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 gray color every other row. And the table width is set to auto, so the cells of the table grow or shrink to match the size of the content inside the table.
You can see in the image above that 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.
- To change the table width click somewhere in your table in the editor and then click the Table button again. This will bring up the Table menu.
- Click Table properties.
- You will see the Width option in the Table properties window. Enter “100%” and then click the OK 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:
Table headers are vital to accessibility. Headers are part of the table, but their visual styling is different. Use headers to define what type of content is within each column (or row) of the table.
To add a Header Row 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 button and navigate to Row > Table row properties.
- Change the Row type to Header, and then click the OK button.
- Click and drag through the table cells that you want to change to headers.
- Then click the Table button and navigate to Cell > Table cell properties.
- Change the Cell type to Header cell, and then click the OK button.
- Make sure to “Publish” or “Update” your page to save your changes
Your table should now look like this in the browser, having a yellow header row with bold text:
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.
Be sure to choose a very light background color so that the dark text is legible, even to people with color vision deficiency.
To change the background color of a table row:
- Click inside the table row you want to change the background color for.
- Click the Table button and navigate to Row > Table row properties.
- Click on the Advanced tab to get to this window:
- You will see the Background color option. Either type in the hex code for the color you want (“#ffffff”=white, “#000000″=black), or click on the Color Picker button (circled in red above), and select the color you want to be the background color of the table row, and click OK.
- Click OK.
- Now Publish or Update your page and you’re done.