Tables

Tables are used on web pages to display data, much like a spreadsheet.

The tables consist of rows and columns of interrelated data. If well formatted, they make complex information easily accessible to all users.

Accessibility | Insert a Table | Change Table Width | Add Headers | Background Color

Table Accessibility

  • 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.

Inserting a Table

Click within your page text area where you wish to place a table of data.

Click the Table button WordPress insert table icon 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.

WordPress table insertion

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.

SCC WordPress default table style

Change the table width to 100% (optional)

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.

  1. To change the table width click somewhere in your table in the editor and then click the Table buttonWordPress insert table icon again. This will bring up the Table menu.
  2. Click Table properties.
    WordPress table properties button
  3. 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.
    WordPress table properties width

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

WordPress table width at 100 percent

Adding Headers to a Table

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:

  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 button and navigate to Row > Table row properties.
    WordPress table row properties
  2. Change the Row type to Header, and then click the OK button.
    WordPress table row properties - header
  3. Click and drag through the table cells that you want to change to headers.
    selecting multiple table cells
  4. Then click the Table button and navigate to Cell > Table cell properties.
    WordPress table cell properties
  5. Change the Cell type to Header cell, and then click the OK button.
    WordPress table cell properties - header cell
  6. 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:

WordPress table with header cells

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.

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:

  1. Click inside the table row you want to change the background color for.
  2. Click the Table button and navigate to Row > Table row properties.
    WordPress table row properties
  3. Click on the Advanced tab to get to this window:
    WordPress table row properties advanced tab
  4. 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.
    WordPress table background color picker
  5. Click OK.
    WordPress table row properties advanced tab - background color
  6. Now Publish or Update your page and you’re done.

SCC table with changed background color