Setting a WordPress Table – A beginners guide to making great looking tables in WordPress Blog Posts

As a new blogger, WordPress tables have given me a lot of grief. There is definitely a lot of room for improvement in making it easier to use tables! Here’s a little tutorial for creating great looking tables in your WordPress blog posts.

If you are new to tables, then continue reading and I’ll show you how to set them up in 3 easy steps. For our more experienced friends, I’ll cut to the chase:

WordPress tables have to be styled with CSS, you cannot style them properly using HTML code within the table itself.

On with the tutorial…

Why use tables? Tables are used for more than listing information in a tabular format. They are a simple way to perform more advanced layouts of information on the screen. They make your posts look good without too much effort.

Tables can be used to layout text and images on the screen because you can hide the border and set the background color of the table to the same as your page background – this makes your table disappear and leaves the text or image where you want it. As an example, the following images are placed with a table….

Excel Logo Excel Logo

The three quick steps to set up a table are:

  1. Set the formatting of the table
  2. Add the table to your post
  3. Enter text or image into the table

1. Set the formatting of the table

The traditional way to style a table was to include code in the table telling a browser how to display the table. WordPress tables ignore formatting information directly in the table and rely on Cascading Style Sheets (CSS) to determine their look and feel. CSS is just a different way to style elements of your blog, including tables. Style information is held in a separate file called a Stylesheet. If you are new to CSS, WordPress has some basic information on CSS here. The nice thing about CSS is that once you’ve done this step once you can re-use the same CSS code again and again in different posts so it’s worth it in the long run. Don’t worry, CSS may look complex, but it’s not that hard to use for setting up a table.

You do need to purchase the the Custom Design upgrade to do this, but it’s worth it for the additional options it gives you to style your blog. Once purchased, simply go to Appearance -> Custom Design  in your blog’s dashboard to add the CSS for styling tables. Click Edit on the CSS tab to edit the CSS.

If you’re interested in learning more about CSS further background information on how to edit your WordPress blog’s CSS can be found here.

You’ll need cut and paste the following code to your blog’s CSS stylesheet to set the format for tables:

table.hidden_table {
    border-width: 0;
    border-spacing: 0;
    border-style: outset;
    border-color: white;
    border-collapse: separate;
    background-color: white;
}

table.hidden_table td {
    border-width: 0;
    padding: 0;
    border-style: inset;
    border-color: white;
    background-color: white;
    vertical-align: middle;
}

I named my table style hidden_table but you can change this to whatever you want to call your own style. Giving the code a name allows you to insert this code multiple times into your CSS and give it different names each time. This allows you to have multiple table styles for different things (maybe one with a border, and one without a border).

The first section contains formatting for the table as a whole. The last section (labelled td) contains formatting for individual cells in the table

I’ve highlighted the key elements of the formatting in bold in the above code. You can change the border width – zero means there is no border (hidden table), and a width of 1 or greater displays the border. I’ve specified the border color as a word. This page contains a listing of possible color values to pick from.

Paste the above code into your CSS screen. Change the name, the size and color of the border, and the color of the background (if you need to) and you’re ready to go.

Don’t forget to click Save Stylesheet once you’re done.

2. Add the table to your post

In the blog post editor (the full editor, not the quick editor. The full editor can be found by going to Posts -> Add New ) there are two little tabs at the top right of the editor box: Visual and Text. Usually you do all your editing on the visual tab. The Text tab allows you to see and edit the underlying HTML code to refine how your blog post looks.

Once you are at the right place in your post where you would like to insert your table, click on the Text tab and paste the following code into the screen:

<table class="hidden_table">
<tbody>
  <tr>
    <td> </td>
  </tr>
</tbody>
</table>

This is the code that will display the table in your post, and you can see we are referencing the CSS code we just created to style our table.

HTML uses special codes, called tags, to wrap around your text to tell the browser how to display it. There is always one code at the beginning (E.g. <td>) and one code at the end (E.g. </td>) that closes the tag. End tags always have a forward slash. Tags for tables consist of rows (the <tr></tr> tags) and columns (the <td></td> tags). The position of the tags is not important, they can all be on the same line, or separated as I have them and indented using spaces to help readability.

For every row you want in your table add an additional set of tags. Within each row (between the start and ending row tags), add column tags for every column you want.

For example:

A table with one row and two columns would look like:
<tr>
  <td> </td>
  <td> </td>
</tr>

A table with one column and two rows would look like:<tr>
  <td> </td>
</tr>
<tr>
  <td> </td>
</tr>

Hopefully you can start to see how tables are used for placement of text and images on the screen. With a hidden border you can create the right number of rows and columns to place your text and images, and nothing will show in the post.
Once you have the correct number of rows and columns it’s time to add the content to the table.

3. Enter text or image into the table

The easiest way to enter text and images into the table is to switch back to the visual tab and click in the table cell you want to enter text or an image into. You can type text directly into the cell or click the Add Media button to add an image. Use the left/center/right buttons on the editor toolbar to layout the text or image in the cell itself.

Don’t worry, you see the table border in the editor, but it won’t display in the actual post. Click the Preview button to see how the actual post will look.

That’s all there is to it.

There is plenty more information about HTML, tables and CSS out there on the internet. Just Google any of those terms and you’ll find information, tutorials and forums where you can get help.

If you run into any problems, or want to know more about tables, leave a comment below and I’ll try to help you out any way I can.

Advertisements
This entry was posted in blog design and tagged , , , , . Bookmark the permalink.

One Response to Setting a WordPress Table – A beginners guide to making great looking tables in WordPress Blog Posts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s