How to Make Table Valid HTML5 in Blogspot

Normally, the table which we create in  the post is invalid HTML5. If you want to get no error when checking valid HTML5 you can do as following step.

How to do this tutorial

Before you do this tutorial, I recommend you to back up your Blogger template, you can see How to back up and restore blogger template

Step 1

Log in to Blogger.com

Step 2

After log in, select Template > Edit HTML

Step 3

Then search code </head>, and paste following CSS right above that code:

<style type='text/css' scoped>
.tg-table-paper {width:100%; border-collapse: collapse; border-spacing: 0; }
.tg-table-paper td, .tg-table-paper th { background-color: #F3F5EF; border: 1px #bbb solid; color: #333; font-family: sans-serif; font-size: 100%; padding: 10px; vertical-align: top; }
.tg-table-paper .tg-even td  { background-color: #F0F0E5; }
.tg-table-paper th  { background-color: #EAE2CF; color: #333; font-size: 110%; font-weight: bold; }
.tg-table-paper tr:hover td, .tg-table-paper tr.even:hover td  { color: #222; background-color: #FFFBEF; }
.tg-bf { font-weight: bold; } .tg-it { font-style: italic; }
.tg-left { text-align: left; } .tg-right { text-align: right; } .tg-center { text-align: center; }
</style>

Save your Template

Step 4

Create table in the post with HTMl like this:

<table class="tg-table-paper">
  <tr>
    <th colspan="4" class="tg-center tg-bf">Table valid HTML5</th>
  </tr>
  <tr class="tg-even">
    <td>No</td>
    <td>Sure Name</td>
    <td>Fml Name</td>
    <td>Note</td>
  </tr>
  <tr>
    <td>No1</td>
    <td>A</td>
    <td>B</td>
    <td>Mr.</td>
  </tr>
  <tr class="tg-even">
    <td>No2</td>
    <td>C</td>
    <td>D</td>
    <td>Mrs.</td>
  </tr>
  <tr>
    <td>No3</td>
    <td>E</td>
    <td>F</td>
    <td>Mss.</td>
  </tr>
  <tr class="tg-even">
    <td>No4</td>
    <td>G</td>
    <td>H</td>
    <td>Mr.</td>
  </tr>
</table>

Publish the post and see Result

Table valid HTML5 Demo
No	Sure Name	Fml Name	Note
No1	A	B	Mr.
No2	C	D	Mrs.
No3	E	F	Mss.
No4	G	H	Mr.