.png)
How to add table in blogger
How to add tabel in blogger . Most bloggers have to face this problem, but in today's post, I will tell you how to add tables in blogger blog posts. so follow few simple step to add table in blog post.
How to add responsive table in blogger
To use the table in blogger, you must first use an optimized theme that supports the table like Plus UI, Media UI etc. After that you will be able to implement the following HTML code in your blogger post.
- open your blogger dashboard and add new post or open existing blog post
- now switch to html view and paste the below code
- change the data according your need
- now publish the post or update the post and your responsive table is added in your blog post suceesfully
<div class='table'>
<table style='white-space:nowrap; min-width:100%;'>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
</div>
<table style='white-space:nowrap; min-width:100%;'>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
</div>
sample :
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
How to add Table in Blogger (BlogSpot)
responsive table code for blogger . you cann use following code for create a table in blogger blog post
<tbody> <tr bgcolor="#E73A3A"> <td style="text-align: center;"><span style="color: white;">Column 1</span></td> <td style="text-align: center;"><span style="color: white;">Column 2</span></td> <td style="text-align: center;"><span style="color: white;">Column 3</span></td> <td style="text-align: center;"><span style="color: white;">Column 4</span></td> <td style="text-align: center;"><span style="color: white;">Column 5</span></td> </tr> <tr> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> <tr> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> <tr> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> </tbody> </table> <table border="1" style="width: 500px;"></table></pre><pre style="max-height: none; white-space: pre-wrap;"><br /></pre><pre style="max-height: none; white-space: pre-wrap;"><br /></pre><pre style="max-height: none; white-space: pre-wrap;"><br /></pre><pre style="max-height: none; white-space: pre-wrap;"><br /></pre><p style="max-height: none; text-align: left; white-space: pre-wrap;"><span style="font-size: medium;">Sample :</span></p> </div> <table border="1" style="width: 500px;"> <tbody> <tr bgcolor="#E73A3A"> <td style="text-align: center;"><span style="color: white;">Column 1</span></td> <td style="text-align: center;"><span style="color: white;">Column 2</span></td> <td style="text-align: center;"><span style="color: white;">Column 3</span></td> <td style="text-align: center;"><span style="color: white;">Column 4</span></td> <td style="text-align: center;"><span style="color: white;">Column 5</span></td> </tr> <tr> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> <tr> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> <tr> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> </tbody> </table><br /> <div><br /></div><div><br /></div><h3 style="text-align: left;"><span style="font-size: x-large;">Another one . How to add table in blogger post </span></h3><div><span style="font-size: large;">Through this trick, you will learn to add table in blogger post of any theme. So let's learn how to add table in blogger's blog post.</span></div><div><span style="font-size: large;"><br /></span></div> <!--[ Change data-text to .html, .css, .js or any language ]--> <div class="pre pu notranslate" data-text=".html"> <pre style="max-height: none; white-space: pre-wrap;"><table border="1" style="width: 500px;"> <tbody> <tr bgcolor="#E73A3A"> <td style="text-align: center;"><span style="color: white;">Column 1</span></td> <td style="text-align: center;"><span style="color: white;">Column 2</span></td> <td style="text-align: center;"><span style="color: white;">Column 3</span></td> <td style="text-align: center;"><span style="color: white;">Column 4</span></td> <td style="text-align: center;"><span style="color: white;">Column 5</span></td> </tr> <tr bgcolor="#0092FF"> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> <tr bgcolor="#00FFA8"> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> <tr bgcolor="#FCFF00"> <td style="text-align: center;">Column 1</td> <td style="text-align: center;">Column 2</td> <td style="text-align: center;">Column 3</td> <td style="text-align: center;">Column 4</td> <td style="text-align: center;">Column 5</td> </tr> </tbody> </table>sample image:
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
advanced html table generator
Here are the Steps to add Responsive Table in Blogger:
Step-1: Login in to Blogger.com and Go to Posts Section.
Step-2: Go to the Post which you want to add Table of Contents
Step-3: Switch to HTML Mode and Add the below code where you want to Display Table.
use following code to create a advance table in blogger
table.GeneratedTable {
width: 100%;
background-color: #ffffff;
border-collapse: collapse;
border-width: 2px;
border-color: #ffcc00;
border-style: solid;
color: #000000;
}
table.GeneratedTable td, table.GeneratedTable th {
border-width: 2px;
border-color: #ffcc00;
border-style: solid;
padding: 3px;
}
table.GeneratedTable thead {
background-color: #ffcc00;
}
</style>
<table class="GeneratedTable">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
</table>
sample images:
tags:-
blogger table html code
html table generator
how to add table of contents in blogger
create table html
how to make a table cell a link in html
dummy html table
drag and drop html table generator