How To Add Tables In Blogger Post

Welcome to the Tutbig Blogger Design tutorial today I will show you How to Add Tables in Blogger Post with pictures or create a table in blogger post.

When we are going to post about product specification, product review, some versus content, then we create make a table in Blogger post.

Step 1: Go to Blogger Pages or Posts and click Edit any post or page.

Step 2: Now click HTML button and paste the code in the code area then click the update button. Replace Your Content with Green Content.

<table>
<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Table A</td>
<td>Table B</td>
<td>Table C</td>
</tr>
<tr>
<td>Blogger</td>
<td>Wordpress</td>
<td>Joomla</td>
</tr>
<tr>
<td>CSS3</td>
<td>HTML5</td>
<td>Javascript</td>
</tr>
<tr>
<td>Sylesheet</td>
<td>Script</td>
<td>Coding</td>
</tr>
</tbody>
</table>

Step 3: Now Go to Blogger Theme and click Customize button. 

Step 4: Here click Advanced and scroll down the option, then click Add CSS and paste the CSS code here then click Apply to Blog button.

table {
color:#333;
font-family:Helvetica,Arial,sans-serif;
width:100%;
border-spacing:1px;
border-collapse:separate;
padding:0 3px;
}
td, th {
height:30px;
transition:all .3s;
text-align:center;
width:auto;
}
th {
background:#B1B6AF;
font-weight:700;
border-radius: 5px;
}
td {
background:#FAFAFA;
}
tr:nth-child(even) td {
background:#F1F1F1;
}
tr:nth-child(odd) td {
background:#E1DDDD;
}
tr td:hover {
background:#666;
color:#FFF
}

Step 5: Now Open Your Blogger Blog. 

I hope you enjoy this post and the photos.How to Add Tables in Blogger Post

Share This :