If you need to create a table in WordPress, this article shows you an outstanding method to create beautiful WordPress Tables easily using your CSS Style Sheet and the technical benevolence of others.
Recently, I was writing a WordPress blog post for which I wanted to create a table. I incorporated the HTML lingo in the HTML WordPress mode and assumed it would look great.
Wrong!
By default, tables look terrible in WordPress because they are probably not defined, or ill-defined, in your WordPress CSS style sheet. I found an easy way to create great looking WordPress tables without much technical work at all. It’s as easy as 1-2-3.
Default WordPress Tables
I like my Fresh News WordPress Theme but if you create a table using this theme, it looks like this:
| row 1, column 1 | row 1, column 2 | row 1, column 3 | row 1, column 4 |
| row 2, column 1 | row 2, column 2 | row 2, column 3 | row 2, column 4 |
| row 3, column 1 | row 3, column 2 | row 3, column 3 | row 3, column 4 |
Well, obviously, this looks terrible, but this is the way default WordPress Tables look. (Note: It looks fine in my WordPress editing Window but, when published, arggh!) With little effort, you can make your WordPress Tables look great!
Creating Beautiful WordPress Tables With Minimal Effort
To create beautiful customized tables, visit the page entitled HTML and CSS Table Border Style Wizard. Here, you can design your ideal WordPress Table and this page will return both the HTML code and the CSS code that you can then add to your WordPress style.css file.
Using that page, I have now created a simple WordPress table design that I like. Once you have completed that step, then copy the code from the section labeled CSS and HTML Source Code, but not all of it. You will want to copy the information beginning in the second row that starts table.sample { and ending with the bracket just above the line that says </style>.
We are now going to place this information in our CSS style sheet. To do this, open style.css (usually this is the name of your style sheet) with UltraEdit or any text editor, and paste the code that you have copied in the bottom of the file.
Now, when you create a table, you simply need to specify <table class=”sample”> and then the normal table code. Your previously ugly WordPress Table now looks like this:
| row 1, column 1 | row 1, column 2 | row 1, column 3 | row 1, column 4 |
| row 2, column 1 | row 2, column 2 | row 2, column 3 | row 2, column 4 |
| row 3, column 1 | row 3, column 2 | row 3, column 3 | row 3, column 4 |
The HTML and CSS Table Border Style Wizard page also gives you the HTML table code to place in your WordPress document.
Now, voila!, you have beautiful tables in WordPress!
3 Comments on “Easily Create a Table In WordPress | WordPress CSS Style Tables”
Thank you very much, i use the same theme which has no table-style, so every table looked terrible (unitl now)!
Thank you very much, i use the same theme which has no table-style, so every table looked terrible
Hey, thanks for the post. But there isn’t information to applied data i want that will fill the table. Any suggestions?