Zaposphere HTML Tables for WordPress

Creating beautiful tables for your WordPress website

“How do I create beautiful looking tables for my WordPress website?” is a question often asked but rarely solved. We’ve found than many website owners just want a simple way of displaying their data – beautifully. If you’ve little or no interest in web code then you may have just stumbled across the solution you’ve been looking for.

The problem

Tables in their raw html form are ugly and uninviting. It usually takes clever software or  coding knowledge to style and tame them. And yet often it just takes just a light sprinkling of encouragement by a designer to turn them into a wonder of beauty, elegance and proportion.

And so with the challenge laid before us we hit the problem square on. The results are below – enjoy!

Getting the right tools in place – TinyMCE Advanced

As you may already be aware there are no tools, by default, in your WordPress that allow you to create and edit tables. “Surely this feature should be available on my site straight out the box?” – well no, apparently not. :(

But stay calm, for there is a great free plugin for WordPress called…… TinyMCE Advanced by Mr. Ozz. This handy plugin will give you those missing tools for table creation and editing.

TinyMCE Advanced Table Tools

The TinyMCE Advanced plugin also gives you access to many more features than just table editing, including: Advanced HR, Advanced Image, Advanced Link, Advanced List, Context Menu, Smilies, Date and Time, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Visual Characters and XHTML Extras. Phew!

A neat feature of the plugin is that you get to pick and choose which tools you want, so you’re toolbar doesn’t get bloated with buttons you’ll never use.

And so… the solution I’m about to explain requires this plugin to be installed first.

Installing the plugin

Log into your site. Go to Plugins > Add New and search for “TinyMCE Advanced”. (Read more about this plugin here).

Once installed go to Settings > TinyMCE Advanced to drag ‘n’ drop the table tools into your toolbar. You might also like to add/remove other buttons for the perfect mix.

Below is an example of what’s in my toolbar.

TinyMCE Advanced Table Tools

Custom table styles – taking your tables to the next level

With this new plugin installed you will now be able to add and edit tables to your heart’s content. Add a row, delete a column, merge cells and split cells – you’ll soon be creating elaborate layouts without needing to know any HTML code. Excellent… BUT

…the initial raw excitement of your new toy will fade. You’ll start to realise you want more. You want to create beautiful tables for your WordPress website. You’ll crave tables that can really show your data in the best possible light.

The next steps will add the form to your newly installed function. It requires a bit of copying and pasting, but if a job’s worth doing…

Step 1

Scrolling further down this post you’ll see a range of table designs specifically created by the Zaposphere design team (me). Browse the various styles and if you find one you like, make a note of the table ID and copy the associated table styles.

Step 2

Paste the styles into your stylesheet.

For WordPress websites, the stylesheet usually lives in ‘Appearance > Editor’ and titled ‘Style.css’. Or they may be found in ‘Appearance > Edit CSS’ or in your theme options under ‘Custon Styles’. Simply paste the copied code beneath all your other styles and hit ‘Save/Update’.

WordPress theme editor

Step 3

Insert a table in your page/post using your new table tools. Specify the row and column count, add a space for a table title/caption if you like and leave everything else blank for now.

Before you hit insert, go to the ‘Advanced’ tab and type in the table ID you made a note of earlier.

TinyMCE Insert Table SettingsTinyMCE Insert Table Advanced Settings

Step 4

Start adding content into each table cell.

Step 5

To add a table/column header row, select a top row table cell, click on the Table Row Properties tool in your toolbar and set the ‘Row Type’ to ‘Header’.

TinyMCE Table Row Properties

Table editing tips

Selecting cells

Selecting the next available table cell with your mouse can be a bit cumbersome so the trick is to use the arrow keys on your keyboard.

TinyMCE Selecting Table Cells

Changing the original table settings

If you made a mistake or want to change the original settings for your table, select the table and click on the same ‘Insert table’ button again.

Have any table editing tips of your own? Then add your comment at the end of the post.

The Zaposphere Table Designs

Clarity

Show styles
/* COPY & PASTE the following into your stylesheet */
 
#zaposphere-table-clarity { background: transparent; font:300 14px/1.5em Arial, sans-serif; color:#666;  border-collapse:separate; border-spacing:0; margin:20px 0;}
#zaposphere-table-clarity caption { padding:0 0 14px; text-align:left; margin:0 0 15px; font-weight:bold; }
#zaposphere-table-clarity thead td { font:600 14px/1.5em Arial, sans-serif; color:#666; vertical-align:top; letter-spacing:0; padding:7px 15px 15px 0; border-bottom:1px solid #bbb; }
#zaposphere-table-clarity td { font:300 14px/1.5em Arial, sans-serif; vertical-align:top; padding:20px 15px 0 0; color:#666; }
#zaposphere-table-clarity thead td p { font:600 1em/1.5em Arial, sans-serif; color:#666; }
#zaposphere-table-clarity td p { font:300 1em/1.5em Arial, sans-serif; color:#666; } }

Table ID: zaposphere-table-clarity

Table Title
Column header Column header Column header Column header Column header
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell

Fusion

Show styles
/* COPY & PASTE the following into your stylesheet */
 
#zaposphere-table-fusion { background: transparent; font:300 14px/1.5em Arial, sans-serif; color:#666; border-collapse:separate; border-spacing:0; margin:20px 0; }
#zaposphere-table-fusion caption { font:600 14px/1.5em Arial, sans-serif; text-transform:none; text-align:center; padding:5px 7px 14px; }
#zaposphere-table-fusion tr:nth-child(odd) { background:transparent; }
#zaposphere-table-fusion tr:nth-child(even) { background:#eee; }
#zaposphere-table-fusion thead td { font:600 14px/1.5em Arial, sans-serif; color:#666; text-transform:none; letter-spacing:0; padding:5px 7px; border-bottom:1px solid #bbb; text-align:center; vertical-align:top; }
#zaposphere-table-fusion td { font:300 14px/1.5em Arial, sans-serif; text-align:center; vertical-align:top; padding:5px 7px; color:#666; }
#zaposphere-table-fusion td:first-child { font-weight:bold; border-right:1px solid #bbb; }
#zaposphere-table-fusion thead td p { font:600 1em/1.5em Arial, sans-serif; color:#666; }
#zaposphere-table-fusion td p { font:600 1em/1.5em Arial, sans-serif; color:#666; }
#zaposphere-table-fusion td:first-child p { font-weight:bold; }

Table ID: zaposphere-table-fusion

Table Title
Column header Column header Column header Column header
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell

Dark Moon

Show styles
/* COPY & PASTE the following into your stylesheet */
 
#zaposphere-table-darkmoon { background: transparent; font:300 13px/1.5em Arial, sans-serif; color:#ccc; border-collapse:separate; border-spacing:0; margin:20px 0; }
#zaposphere-table-darkmoon caption { font:300 15px/1.5em Arial, sans-serif; letter-spacing:0.03em; text-transform:uppercase; text-align:left; padding:5px 7px 14px; color: #666; }
#zaposphere-table-darkmoon tr:nth-child(odd) { background:#545454; }
#zaposphere-table-darkmoon tr:nth-child(even) { background:#666; }
#zaposphere-table-darkmoon thead td { background: #666; font:600 13px/1.5em Arial, sans-serif; color:#eee; text-transform:none; letter-spacing:0; padding:9px 7px; border-bottom:1px solid #888; text-align:center; vertical-align:top; }
#zaposphere-table-darkmoon td { font:300 13px/1.5em Arial, sans-serif; text-align:center; vertical-align:top; padding:11px 13px; color: #ccc; }
#zaposphere-table-darkmoon td:first-child { font-weight:bold; border-right:1px solid #888; color: #eee; }
#zaposphere-table-darkmoon thead td p { font:600 1em/1.5em Arial, sans-serif; color:#eee;}
#zaposphere-table-darkmoon td p { font:300 1em/1.5em Arial, sans-serif; color: #ccc; }
#zaposphere-table-darkmoon td:first-child p { font-weight:bold; }

Table ID: zaposphere-table-darkmoon

Table Title
Column header Column header Column header Column header
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell

Broadway

Show styles
/* COPY & PASTE the following into your stylesheet */
 
#zaposphere-table-broadway { background: transparent; font:300 14px/1.5em Arial, sans-serif; color:#666; border-collapse:separate; border-spacing:0; margin:20px 0; }
#zaposphere-table-broadway caption { font:600 14px/1.5em Arial, sans-serif; text-transform:none; text-align:center; padding:5px 7px 14px; }
#zaposphere-table-broadway td:nth-child(odd) { background:#eee; }
#zaposphere-table-broadway td:nth-child(even) { background:transparent; }
#zaposphere-table-broadway thead td:nth-child(odd) { background:#4d4d4d !important; }
#zaposphere-table-broadway thead td { background:#555 !important; font:600 14px/1.5em Arial, sans-serif; color:#eee; text-transform:none; letter-spacing:0; padding:9px 7px; text-align:center; vertical-align:top; }
#zaposphere-table-broadway td { font:300 14px/1.5em Arial, sans-serif; text-align:center; vertical-align:top; padding:9px 7px; }
#zaposphere-table-broadway thead td p { font:600 1em/1.5em Arial, sans-serif; color:#666; }
#zaposphere-table-broadway td p { font:300 1em/1.5em Arial, sans-serif; color:#666; }

Table ID: zaposphere-table-broadway

Table Title
Column header Column header Column header Column header Column header
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell

Courtyard

Show styles
/* COPY & PASTE the following into your stylesheet */

#zaposphere-table-courtyard { background: transparent; font:300 14px/1.5em Arial, sans-serif; color:#666; border-collapse:separate; border-spacing:0; margin:20px 0; border-color:#bbb; border-width:1px 1px 0; border-style:solid; }
#zaposphere-table-courtyard caption { font:600 14px/1.5em Arial, sans-serif; letter-spacing:0.03em; text-transform:uppercase; text-align:left; padding:8px 12px 14px; }
#zaposphere-table-courtyard thead td { font:600 14px/1.5em Arial, sans-serif; color:#666; text-transform:none; letter-spacing:0; padding:8px 12px; border-bottom:1px solid #bbb; text-align:center; vertical-align:top; background: #eee;}
#zaposphere-table-courtyard td { font:300 14px/1.5em Arial, sans-serif; text-align:center; vertical-align:top; padding:8px 12px; border-bottom:1px solid #bbb; border-left:1px solid #bbb; }
#zaposphere-table-courtyard td:first-child { font-weight:bold; border-left:0 none; }
#zaposphere-table-courtyard thead td p { font:600 1em/1.5em Arial, sans-serif; color:#666; }
#zaposphere-table-courtyard td p { font:300 1em/1.5em Arial, sans-serif; color:#666; }
#zaposphere-table-courtyard td:first-child p { font-weight:bold; }

Table ID: zaposphere-table-courtyard

Table Title
Primary Column header Primary Column header
Column header Column header Column header Column header
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell

Serenity

Show styles
/* COPY & PASTE the following into your stylesheet */

#zaposphere-table-serenity { background: transparent; font:300 14px/1.5em "Lucida Sans Unicode","Lucida Grande", sans-serif; color:#666; border-collapse:separate; border-spacing:0; margin:20px 0; }
#zaposphere-table-serenity caption { font:300 14px/1.5em "Lucida Sans Unicode","Lucida Grande", sans-serif; text-transform:none; text-align:left; padding:14px; }
#zaposphere-table-serenity td { font:300 12px/1.5em "Lucida Sans Unicode","Lucida Grande", sans-serif; text-align:left; vertical-align:middle; padding:14px; border-top: 1px solid #ddd; }
#zaposphere-table-serenity thead td { border-top:0; font:300 13px/1.5em "Lucida Sans Unicode","Lucida Grande", sans-serif; color:#444; }
#zaposphere-table-serenity thead td p { font:300 1em/1.5em "Lucida Sans Unicode","Lucida Grande", sans-serif; color:#666; }
#zaposphere-table-serenity td p { font:300 1em/1.5em "Lucida Sans Unicode","Lucida Grande", sans-serif; color:#666; }

Table ID: zaposphere-table-serenity

Table Title
Column header Column header Column header Column header Column header
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell

Anatomy of an HTML table – with sample code

To help make this post a useful resource for those keen to learn more, I’ve written the following section to help you understand the underlying structure of tables. This section is entirely optional reading. Skip it?

Below is a typical example of an HTML table in code form. You’ll notice that the visible content is always sandwiched between opening and closing HTML tags. Opening tags are written using <…> and closing tags in this format < /…>.

<table id="zaposphere-table-fusion"><caption>Table Title</caption>
<thead>
<tr>
<td> </td>
<td>Column header</td>
<td>Column header</td>
<td>Column header</td>
<td>Column header</td>
</tr>
</thead>
<tbody>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>

There a literally hundreds of HTML tags/elements, but here is the list of useful ones used for creating tables:

table defines the table
caption for table titles
thead defines the table header row/s
tbody defines the main content area of your table
tfoot defines a table footer row/s
tr defines a table row
td defines a table cell
th defines a table header cell

You’ll notice from the example above that the table element also has an additional ID attribute. HTML attributes can be applied within tags/elements and can help to define the visual appearance or extend the behaviour of each element. Some common table attributes include:

style
Allows you to define the style or “visual look” of the element. When used in this way it’s called an ‘inline style’. Common alternatives include the ID and class attributes which reference external stylesheets.

ID
Defines the element with a unique identifier, helping to style it with a unique set of styles.

class
Similar to ID, except attributes the element to a non-unique style. This allows for attributing the same set of styles to different elements across your entire site.

colspan and rowspan
Used to merge/combine cells. ie. colspan=”2″

cellpadding
(used with the table element only – not recommended as support for this attribute is fading)
Adds an even space around the content within each table cell, within the defined edges of the cell.

cellspacing
(used with the table element only – not recommended as support for this attribute is fading)
Add an even space between each table cell.

border
Adds a generic border around the table or table cells. Defining table borders within CSS styles is a far more flexible option allowing border style/position/colour and width to be defined.

align and valign
Allows you to align the table cell content as left, center or right and vertically align (valign) the content as top, middle or bottom. ie. align=”center” valign=”top”

A quick summary of the process

So to summarize the process I’ve suggested in this post for creating beautiful tables in WordPress start by…

1. Installing the TinyMCE Advanced plugin.
2. Drag ‘n’ drop the table buttons into your toolbar.
3. Browse the table designs in this post making a note of the Table ID.
4. Copy the relevant table styles and paste them into your primary stylesheet.
5. Insert a table into your content specifying the Table ID in the advanced tab.
7. Define a header row.
8. Add your table data.

That’s all for now. I hope you enjoyed this post and find it a useful resource. Consider bookmarking this page and adding a comment below. I’m open to suggestions, tips and improvements on the process. If you have any questions or would like to suggest alternative table styles then please add them in a comment as well.

Seen a table on another site you’d like to re-create for yourself? Tell us and we may be able to help you out.

Ciao.

UPDATE – Watch our step-by-step training video

Our short step-by-step video tutorials on creating styled tables in WordPress are now online. Watch the first tutorial now →

Video Thumbnail - Create tables for your WordPress website

Comments 14

  1. Thanks for a great tutorial

    I have:
    1)installed the TinyMCE Advanced
    2) Created a table with the
    3) Copied the darkmoom css to my stylesheet.css
    4) –> no design results: only the typical neutral design

    Do you have any bug suggestions.

    All the best,
    Thomas

    1. Hi Thomas, thanks for taking the time to make a comment.

      It sounds like you may have not applied the table ID (step 3). Try selecting the table, click the ‘insert table’ icon, go to the Advanced tab and type into the ID field zaposphere-table-darkmoon.

      I hope this helps. :)

  2. Hi

    Sorry for the poor description early on. I already did assign the id=”zaposphere-table-darkmoon” to the table.

    I have made 3 screengrabs and combined in this png file, so you can see whether I have done something wrong.

    The top picture is the css, I have copied to style.css.

    The bottom left picture is page editor in html view and the bottom right is the editor in the visuel view. No darkmoon design so far.

    Thanks for the reply.

    // Thomas

    1. Hi Thomas,
      From looking at the screengrabs it seems you have done everything correctly. However, there are several things I suggest you check:
      1. Have you previewed what the page will actually look like? (Click the ‘Preview’ button). The table won’t look like a darkmoon design in the page editor visual view.
      2. You may have inserted the CSS incorrectly. Check that you haven’t accidentally removed existing code above or below where you pasted the new code in.
      3. If you have a caching plugin installed try deleting the cache or temporarily disabling it.
      4. I’ve now uploaded a training video on this very subject. You may find this useful: http://www.youtube.com/watch?v=XgyRmUcaNb4
      Don’t forget to subscribe :)

  3. I have been having problems ever since the new 3.9.1 upgrade with my tables. It has been running really slow or freezing completely. I can’t do a lot of things I used to, for instance, I can’t copy and paste by right clicking on highlighted content. Also, there is no longer an Advanced button when I click on “Insert Table”, so I can’t make changes to things that way. In the Text view I can see the code: , but the table is not that once I publish it and look at it live online. Any suggestions on how to fix these problems? I have already deactivated plugins many times and switched to Twenty Fourteen with no luck.

    1. Hi Shannon,
      I feel your pain. Yes, unfortunately since the latest WordPress update the instructions above regarding the ‘Advanced’ section have now become redundant. :( I may have to write a new post about ways to overcome the obstacles that are now in place.

      Firstly I’d suggest you only hit ‘publish’ or ‘update’ when the content is in ‘Visual’ mode. Secondly, you’ll need to manually add a table ID. Switch to ‘HTML’ mode, find the code beginning with…

      <table>

      and change it using this annotation…

      <table id=”zaposphere-table-clarity”>

      Then switch to ‘Visual’ mode before hitting ‘Publish/Update’.

      I hope this helps.
      Best,
      Luke
      The Zaposphere Team

  4. Hello,
    I liked your tutorial.
    I wanted to try this out. But i realized that the plugin has been upgraded.
    New interface is totally different and i think there is no advanced option part with the new one.

    So did you find solution for this. Is there any way to create table with the new one.

    1. Hi Muhammed. Yes you’re right, the plugin has been upgraded and there’s is now no advanced option. I will certainly be updating this guide soon. In the meantime you should still be able to insert tables using the tools at your disposal. In order to add the table ID you need to…

      Switch to ‘HTML’ mode, find the code beginning with…

      <table>

      and change it to…

      <table id=”zaposphere-table-clarity”>

      …or similar. Then switch to ‘Visual’ mode before hitting ‘Publish/Update’.

  5. Hey i followed your guid. I have wordpress 4.3 and TinyMCE Advanced 4.2.3.1

    Here is a screenshot where i pasted the CSS: http://imgur.com/CjXTyx2

    And this is a screenshot of the page where i made the table: http://imgur.com/ozPcw8f

    As you can see in the customize preview the style is not applied. Same thing happens when i open a preview of the page in another browser tab.

    I also switched to the editor visual tab before updating but it doesn’t matter. Any ideas?

    1. Hi, thanks for your sending over your questions. It’s possible that in Preview mode it won’t show custom theme CSS styles. I’d suggest you save a draft of the page and go to “View Page” instead.

  6. Hi, could you give us some code of how to add colors? Something we could copy and paste our hex codes into–say, an example of how you would make a three-color table. Thanks.

    1. Excellent suggestion! Ok here’s some options…

      #TABLE-ID td { background:#HEX; }
      #TABLE-ID thead td { background:#HEX; }

      replace TABLE-ID with your chosen table identifier (eg. zaposphere-table-clarity)
      replace HEX with your 6 character hex value.

      You could do three colours vertically with…

      #TABLE-ID td:nth-child(3n+1) { background:#HEX1; }
      #TABLE-ID td:nth-child(3n+2) { background:#HEX2; }
      #TABLE-ID td:nth-child(3n+3) { background:#HEX3; }

      or horizontally with…

      #TABLE-ID tr:nth-child(3n+1) { background:#HEX1; }
      #TABLE-ID tr:nth-child(3n+2) { background:#HEX2; }
      #TABLE-ID tr:nth-child(3n+3) { background:#HEX3; }

      with the tri-colour methods you may also like to try…
      #TABLE-ID thead tr:nth-child(3n+1) { background:transparent; }
      to remove colour from the header row.

      I hope this helps. ^_^

Leave a Reply to ZaposphereCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.