Comparing table functions in Shopify and WordPress

If you are a web content manager but aren’t comfortable with inserting or formatting tables in HTML, then you need to use your CMS’s WYSIWYG editor to enter your data tables. Let’s see if you can do this in Shopify and WordPress.

Adding a Table in Shopify

Shopify is an ecommerce platform and it does have blogging capability as well. It is an extremely simple WYSIWYG: for instance, it doesn’t have a special characters button, but there is an insert table button. You will need to hand build the rows and columns one at a time. It will do all right if you have a small table to insert. However, I didn’t see a way to designate a header row. To do this, switch to the code view, then identify the cells that are to be headers and change

<td> and </td>

to

<th> and </th>.

The <td> means table data, and the <th> means table header.

For example, here is a header row from a table I built in Shopify.

<tr>
<td>Item</td>
<td>Description</td>
<td>Price</td>
</tr>

Change it to look as below, and then the browser will display this text as bold, like a header row is supposed to look. And, assistive technologies will be able to announce to vision-impaired users that Item, Description, and Price are the column headings.

<tr>
<th>Item</th>
<th>Description</th>
<th>Price</th>
</tr>

Adding a Table in WordPress

You can’t add tables to your WordPress blogs using the WYSIWYG. Well, not with a basic installation anyway. There are plugins you can install to help you extend WordPress’s basic WYSIWYG editor.

You could also code your tables in an editor such as Brackets and paste them in the code view of WordPress. Another solution is to use HTML Cleaner’s WYSIWYG table button. This is a slick tool that creates very clean code (unlike the sloppy, bloated, code that MS Word generates) that you can paste into your CMS code view.