Using CSS to Format WordPress Tables

Applying style attributes to table rows, columns and cells in HTML can be done by adding style attributes to <tr> (row) and <td> (column) tags.

A WordPress table however does not allow direct editing of these tags without converting a “table” block to an “html” block.

If you do this, the WordPress editor no longer allows entering text directly and easily into table cells.

Templates that have the “CUSTOMIZE / ADDITIONAL CSS” option provide a solution. (this is a common feature on templates)

If you assign a table a CSS Class in the WordPress editor, you can use CSS to assign style attributes to TR and TD tags within that table.

Begin by assigning a CSS Class to the table in the WordPress editor. In this example, I’ve assigned the CSS Class “wp-install-commands”.

Next, On the WordPress Dashboard, choose Appearance / Customize. Then, if the template provides it, you can select the Additional CSS option.

Style attributes can be assigned to the whole table by addressing only the class. For example the following CSS would put a border around the whole table assigned the CSS Class of wp-install-commands.

.wp-install-commands
{border:solid black 1px}

Adding “tr” will put a border around each row.

.wp-install-commamds
tr
{border: solid black 1px}

To put a border around all the cells in the table, you have to assign the border attribute to TD. If you don’t qualify the TD, the style will be applied to all cells of the table. The following example will put a border around all cells:

.wp-install-commands
td
{border: solid black 1px}

To assign styles to specific rows and cells, you can use CSS Selectors.

reference: https://www.w3schools.com/cssref/css_selectors.asp

For example, to assign a style to the first row of the table you can use the “first-of-type” selector. For example:

.wp-install-commnads
tr:first-of-type
{background-color:lightgrey}

There is also a “NOT” selector to exclude specified rows or columns. For example the following CSS assigns attributes columns except the 1st one.

.wp-install-commands
td:not(:first-of-type)
{width:45%}

More complicated cell selection can be done by combinations of TD and TR selectors – which are treated as the formation of a logical intersection of the selectors.

For example the following CSS will assign styles to the 2nd column except for the first row:

.wp-install-commands
tr:not(:first-of-type)
td:nth-child(2)
{font-family:courrier}

Note that some attributes don’t apply to some tags. For example, style “text-align:center” has no effect on TR. If you wish to center text in cells on a row, you have to combine TR and TD as in this example:

.wp-install-commnads
tr:first-of-type
td
{text-align:center}

An example of using these selectors to format a complete table is provided below:

There are additional CSS selectors that allow other ways to address which elements are assigned style attributes.