How to Make Table In Blogger Blog Post

How to Add Table In Blogger Blog Post

html table

Blogger Table


If you have blogger website and if you want to make table in blogger post then it is too difficult because there are no any features available in blogger so that we can make a table. If you search in google how to make table in blogger post or how to add table in blogger post then you will get many articles related to this but no one is sufficient to understand. But if you have HTML knowledge then this is easy for you and you can make any type of table. So today in this post i will show how we can create a table on the blogger post.


Why table is important?

I think this question came on your mind that why table is important while i can write post without table. So answer is very simple. Let's understand with a example- suppose that you went bank for deposit money but there was too much crowd and all people are stand with gathering. They did not stand in good manner. When you saw then you will think how they are stand they should stand in Que.

So if you are writing some articles where you need table then you need to make the table so that you articles look pretty and when any visitors read you post then they can understand in easy manner.


How to make table in Blogger post?

Here i will show you different type of table and which one you like then you can used that table in your blogger post. But before start i would like to tell you that here i will use HTML code for make a table. Don;t think it is going to difficult because you just need to copy HTML code and paste on you blogger post where you want to create a table. So let's have a look.

Table Type 1:


You can see table type 1 picture. If you want to make this type table on you blogger post then follow the step. I will guide step by step.

Step 1: Copy below HTML code.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Student Name</th>
    <th>Roll No</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>Rajeev Ranjan</td>
    <td>102</td>
    <td>10th</td>
  </tr>
  <tr>
    <td>Suresh Kumar</td>
    <td>502</td>
    <td>11th</td>
  </tr>
  <tr>
    <td>Neha Singh</td>
    <td>405</td>
    <td>9th</td>
  </tr>
  <tr>
    <td>Monika</td>
    <td>001</td>
    <td>12th</td>
  </tr>
  <tr>
    <td>Vivek Ranjan</td>
    <td>741</td>
    <td>10th</td>
  </tr>
  <tr>
    <td>Arvind Kumar</td>
    <td>754</td>
    <td>8th</td>
  </tr>
</table>

</body>
</html>

Step 2:  Now first click in (Step 1) HTML section and Paste this (Step 2) HTML code as shown in below figure.


Step 3: Now change this Name in Step 1 HTML code And write those name which you want.


  • Student Name
  • Roll No
  • Class
Also change all the name, roll no and class which is written in the HTML code.

Step 4: If you want to change the width of table then you can change. You just need to write the % value in HTML code where written ( width: 100%;) 

Step 5: In this table 3 row and 3 column. If you want to add more row and column then see HTML code and you need to do some change only. First add row and then column.


Hints : 

Defining an HTML Table


An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Table Type 2:


You can see second type of table. If you want to make this type of table then follow the step.

Step 1: Copy below HTML code.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Table Type 2</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Rajeev</td>
    <td>Ranjan</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Niraj</td>
    <td>Kumar</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Suresh</td>
    <td>singh</td>
    <td>36</td>
  </tr>
</table>

</body>
</html>

Step 2: Paste this HTML code in HTML blog post section. 


Step 3: Now change the name in Step 1 HTML code.

  • First Name
  • Last Name
  • Age
Also change all the name and write which you want to add.

Step 4: You can also change the width of table. You just need to change % value in ( <table style="width:100%"> ) in HTML code.

Table Type 3:

You can see 3rd type of table. If you want to make this type of table then follow the step.

Step 1: Copy below HTML code.


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Customer Name</th>
    <th colspan="2">Mobile No</th>
  </tr>
  <tr>
    <td>Rajesh ranjan</td>
    <td>9876543212</td>
    <td>7894561236</td>
  </tr>
</table>

</body>
</html>

Step 2:  Now first click in (Step 1) HTML section and Paste this (Step 2) HTML code as shown in below figure.



Step 3: Now change the name in Step 1 HTML code.

  • Customer Name
  • Mobile No
Step 4: You can also change the width of table. You just need to change % value in ( <table style="width:100%"> ) in HTML code.

I hope you like all the table. If you have any issues then comment below.

Post a Comment