Tables are one of the widely used HTML element on web pages. The HTML tag <table> is what we need in order to insert a table into the blog post.

There are a lot of ways to create tables for your blog posts.

  • You can either directly code the HTML and customize the design using CSS.
  • Or you can use a table creation online tool and use the generated HTML, CSS source code
  • Or you can simply install a WordPress plugin that helps to create unique and stylish tables for blog posts, page wherever required.

HTML Table Example

Method #1 – Create and Embed Tables Using Tools

Directly creating and embedding a table is one of the simple way provided you are familiar with HTML, CSS coding. However, the greatest disadvantage is that every time you have to add the code manually inside your blog post.

That’s a painful job.

Hence, you can use an online based tool to create tables.

Here is the list of tools:

CSS Table Generator

This is an online based tool for creating the HTML, CSS source code for tables. You can customize the style of table. You can customize almost every aspect of the table like Title Color, Row Color, Font Sizes, Cell Alignment, Cell Spacing etc.CSS Table Generator

The preview tool is cool that it auto-adjusts to the new setting while you change it live.source code of CSS table generator

Table Styler

Yet another online based tool to generate the table.

You can customize the properties of table header, table body, table footer apart from the font style, cell spacings. Tablestyler has a dynamic preview and hence you can see how the table looks while you are customizing it.Table design

Once designed, just click the HTML, CSS buttons to get the source code.

Ven Tesh, Tell Me, How Do I Embed the HTML/CSS Tables Into Blog Posts?

This step is important, I will show you where to paste these HTML, CSS source codes in order to create a table.

HTML code you can directly paste it inside your blog post.

In your WordPress blog post editor:

  1. Get into the Text mode
  2. Paste the HTML codeSource code with table elements inside the blog post

CSS code you can paste it inside your Style.css file.

First, Go to the theme editor from Appearance > Editor (or directly visit the URL http://www.example.com/wp-admin/theme-editor.php)

  1. Paste the CSS code
  2. Click “Update File”Table css setup

Once you are done with editing the post, you can see the table appearing as follows in your blog post:Table creation done

This manual method is little painful.

However, once you have configured a table design and added the CSS code to the style.css file, you don’t need to repeat it again and again.

Whenever, you want to add a table, just paste the HTML code to the new blog post and it appears with the same design.

Hope this is helpful.

Method #2 – Easily Embed Tables Using WordPress Plugins.

Now the alternate method is to use a WordPress plugin and simply create tables from the blog posts, pages.

There are a lot of WordPress plugins available from the plugin directory. I did a decent research and found the following are the plugins worth your time.

TablePress

This is a feature-rich table plugin.

You can customize all the properties of a table right from font size to colors. It supports sorting option, search option which will be very much helpful to your readers in case if you are sharing a bigger table (a table with the huge number of rows).

The following sample shows, how it looks:Table Demo

Easy Table Plugin

Yet another feature rich WordPress plugin for table creation.

You can embed tables on posts, pages as well as on the widgets all using shortcodes.

Using this plugin, you can also embed a table from Excel, it supports .CSV format.Embed table from Excel

The options are highly customizable and also, the help screen is really good made for beginners. You can customize the table colors, font size, cell spacing, border, alignment etc.

It also gives the option to use a custom shortcode yourself.table options

Using WordPress plugin, you can easily embed tables in your blog post without much pain.

Hope these plugins are helpful to you.

Let me know, if you have any issues in adding tables especially if you are using the manual method where you have to add the HTML/CSS source codes.

I will try to help you.

2017-10-09T20:56:06+00:00

About the Author:

I am a self made entrepreneur, blogger, web technology enthusiast and founder of BlashO.com. Connect with me @MrVen and on Google+

Leave A Comment