Create and Style a Table in WordPress Easily

Creating a table in WordPress is not a ninja task, its easy and anyone can create it. In this tutorial, we’ll be creating beautiful table in WordPress and style it using CSS. Don’t worry, you don’t need to know CSS, but we’ll be using a style wizard which will automatically style the table by outputting the CSS code. When creating a table, you just need to use that class and your table will be styled accordingly.

By default, tables look terrible in WordPress. Theme developers don’t usually define table elements and even if they have defined, it may be possible that you don’t like those looks.

How to Create a Table in WordPress

To create a table, we just need to use proper HTML code. Below is an example code which you can use to create a table:

<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

This is a simple HTML code to create table. You can repeat the same code to add more rows and columns. If you’re using this code, then make sure you enter this code in WordPress in HTML view. With this step done, we complete the process to create a table.

Styling a Table in WordPress

Now let’s style this table. The process to style a table can be automated and you don’t need to delve in CSS stuff to do this. In fact, the effort required to style is very minimal, anyone can do it. This process is very simple and even a person who doesn’t know any coding stuff can follow this process.

To create beautiful tables, visit this site for HTML and CSS Table Border Style Wizard. Its a superb resource to style the table, you just need to select your preferences, what size do you want for border, what color, how much padding, border style, etc. Click on the appropriate options and this page will return both the HTML and CSS code. Basically, this wizard generates code, based on the options that we select and outputs the code which is ready to be used. We’ll need to place this code in style.css.

Observe the code carefully. We need to copy the code from second line, which would be:
table.sample {

Don’t copy the complete code, copy the code ending with the bracket } just above the line that says </style> (include this } closing bracket also)

Now we need to place this code in style.css. For this, you can do it from logging in to WordPress admin > Appearance > Editor

Click on style.css, and paste the code at the bottom of this file. OR you can use a FTP client to download this file from: wp-content/themes/yourtheme. After downloading, open the file with any text editor and add the code at the bottom. After adding the code, upload it again.

When creating a table, make sure to use the table class as “sample” and then the normal table code. Below is an example:

<table class=”sample”>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>

Don’t forget to use this table class, else styling won’t be added to the table. If you know CSS, then you can change this table class easily OR edit the code and replace “sample” with whatever you want (But doing this is not compulsory, this is for those who want to change class name).

Isn’t this the best and easiest way to style tables. Try using it and you will be surprised to know how easy it is to style the table automatically through this wizard.

Note: If your WordPress theme already contains CSS for table style, then you just need to alter that code. You don’t need to follow the above method to apply the CSS.