Responsive html table would help your reader to see dynamic display in any device. 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.
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.