How to Create Table In Blogger Post Tutorial (With Pictures)

Hello our daily readers. Since the beginning, we promise to be your number one trouble shooting blog in helping you with some quick blogging and seo tips to get your blogspot blog running smoothly. On today's tutorial, we will be featuring how you can easily add or create table in blogger.


You might be thinking creating a table in blogger is really one difficult thing to do but I tell you it's NOT.

It only requires some quick and easy actions to get things done within minutes which will be disclosed here on this page shortly.

How to Create/Add Table of Content In Blogger (Step By Step Tutorial)

 

To add table of content on your blogger post in your blogspot dashboard, you need to follow our guide step by step with exact codes as shared.

STEP 1: Visit your bloggers Dashboard and select Post or Pages (depending on where you want to add the table)

STEP 2: Now you click on add new post or page (depending on your selected option in step 1). This should take you to your writing pad where you can start writing your post/page content.

STEP 3: Click on "HTML" just above the top left corner above the writing pad to navigate to the HTML section of your post content.

STEP 4: Now copy the below code and paste  "table of content" on the HTML part to display on your post. NOTE: Replace Your Content with RED Content.

CODE

<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 5: Now Go to Blogger Theme and click Customize button.

Step 6: 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
}

Conclusion: Adding Table of Content in Blogger Blog's Post

 So that is it on how to add a customized table of content in blogger blog. If you have question please write below and I will surely attend to all.

• Tweet
• Share
• Share
• Share
• Share