Insert Dynamic HTML Tables in your responsive Web Pages

With the help of this tutorial you may create and embed tables in any webpage of your blog or website. You may also insert it in responsive Web Pages.

There are various ways to insert HTML tables in your Blogger/ WordPress blog or site. You may create a table in word documents or excel sheets and simply paste it in HTML editor of your webpage.

In this tutorial we will learn to insert a simple as well as dynamic HTML tables in blog/site webpages. We further add some CSS codes to make our table awesome and eye catching for our readers. If you have no knowledge about basic html or CSS codes then don’t worry as because we will make it simple for you as always be there with you.

How to add Table in a Web Page using Word/Excel

Let us start with simple trick to add table in your blogger post with the help of Microsoft Word Document. Yes! You have to just create a table in your .doc or .docx file with preferred design and layout. Now, select the whole table and go to your Webpage editor (blogger posts in compose mode) and paste the copied table as it is by pressing Ctrl+V from your keyboard. This trick is working fine for me in both top blogging platform i.e. Blogger and WordPress.

How to create Responsive HTML table for Webpage

Now, we are going to create responsive HTML table manually which will fit in all device of your readers ranging from personal PC to mobile phones.

Recommended Reading: How to Insert Custom CSS Codes into Blogger Blog Template

Embed-Responsive-Table

You have to copy the following HTML codes and paste it in your webpage in which you want to insert the table.

<table border="2" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody><tr>
<td>
<table border="2" cellpadding="1" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<th>
<div style="background-color: black; text-align: center;">
<span style="color: white;">Write the Title or Heading of your Table</span>
</div>
</th>
</tr></tbody></table>
</td>
</tr>
 
<tr>
<td>
<div style="height: 50px; overflow: auto; width: 100%;">
<table border="1" cellpadding="1" cellspacing="0" style="width: 100%;">
<tbody>
 
<tr>
<td><a href="URL link of any file or webpage" rel="nofollow">File Name (Cell A1)</a></td>
<td><a href="URL link of any file or documents" rel="nofollow">File Name (Cell B1)</a></td>
</tr>
 
<tr>
<td>Text without link (Cell A2)</td>
<td>Text without link (Cell B2)</td>
</tr>
 
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>

If you want to insert a new Column in above table just add the following code above closing </tr> tag.

<td>Write here the text</td>

If you want to insert a new Row in above table just add the following code above closing </tbody> tag. Note that if you going to draw 2 columns table then paste these codes and increase the height of the table accordingly. Each row height is equal to 25px and therefore for inserting 1 row you have to increase the height of table by 25px as shown in the above code.

<tr>
<td>Write here the text </td>
<td>Write here the text </td>
</tr>
However, if you are not able to create the table let us know and we will help you as soon as possible.

Shortlink: http://www.superwebtricks.com/?p=532 Free Technical Help
If you don't want to miss our daily tutorials then you may Subscribe to Showeblogin via Email | Facebook | Twitter | and Google Plus
Home»Blogging»Blogger Blog»Tips and Tricks»WordPress Blog»Insert Dynamic HTML Tables in your responsive Web Pages
Top