How to create a table in blogger ?

Do you want to know how to create tables in blogger ? If yes , then you are at the right place.

Well alot of bloggers start their blog on blogger platform and sometime they face some problems like creating tables in blogger post.
Sometime we need to tabulate data so that it looks easy to understand. It is found that table helps to better understand data than in paragraph form . So my suggestion is you should learn to create tables in blogger.

If you want to create tables in blogger then it requires basic or almost negligible knowledge of HTML. Don't worry i am here to teach you.

Basics of Table in HTML

There are three tags for creating and crafting a table in HTML, Yes only three.
They are given below in the table and you know after reading this whole post you will be able to create similar responsive tables in blogger posts.

Tags	Uses
< table > .... < /table >	It defines or creates a table .
< tr > .... < /tr >	It defines or creates a table row
< td> ....< td >	It stands for table data and create a cell.

<table >.....</table>

It is used just to define a table . This tags comes in pair so must be ended by
</table >.

Note : It is basic and first rule of HTML that all tags which comes in pair must be closed . How to close ? Just repeat same tag with forward / . Like if <table> is opening tag then </table> is closing tag.

<tr>.....</tr>

Tr stands for table row . It creates a table row. And it is placed between table tag .
Example
<table >
<tr>

</tr>
</table>

<td>.....</td>

Td stands for table data and it creates table data or cell . What is cell ? Well its a block of data .
So you must be wondering , Is there table column just like table row ? Answer is no . You can create column by repeating <td> tag .

And it is placed inside tr tag.
Example.

<table >

<tr>

<td>Name</td>
<td>Alex</td>
<td>Tom</td>
<td>Steve</td>

</tr>

</table>

Note : In above example block of repeated td looks like a column but its not . Yeah they are cells of a row as they are inside tr tags.

So finally you have very basic knowledge of table right so now you are ready to create tables.

How to create tables in blogger ?

In order to create tables in blogger just copy code below by clicking copy button and paste it inside post in HTML mode .

Yes your post editor should be in HTML mode.

After that just change values of <td> tags . Also you can add or remove <td> and <tr> tags as per your wish . Thats why i gave you basic knowledge of HTML

And make sure all tags are properly ended or closed .
These three codes are designed with CSS i know learning CSS may be hard for you so just copy paste. And change tr and tds , its easy.

But the most important customization is in CSS section . In css section there is a class

.pirate-table{

width:600px;

}

In above code width should be set according to look of table and it depends on no of row and column . How to set its value then ?

Well its simple try from 300px to 960px at interval of 30px like try 300 then 330 then 360 then 390 then 420 etc. At some point your table will look good.

Table 1

  
  
  
  <div class="tb-box" style="overflow-x:scroll;">

<table class="pirate-table">

<!--Table row -->
<tr>
<td>SN</td>
<td>Name</td>
<td>Registered</td>
<td>Email</td>
<td>Donation</td>
</tr>


<!--Table row -->
<tr>
<td>1</td>
<td>Alex Poirich</td>
<td>Yes</td>
<td>alex2050@gmail.com </td>
<td>200$</td>
</tr>


<!--Table row -->
<tr>
<td>2</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>


<!--Table row -->
<tr>
<td>3</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>


<!--Table row -->
<tr>
<td>4</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>


<!--Table row -->
<tr>
<td>5</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>

</table>

</div>
<style type="text/css">
.tb-box{
box-shadow:0px 2px 4px 0 rgba(0,0,0,0.4);
}
.pirate-table{
border:1px solid rgba(0,0,0,0.9);
border-collapse:collapse;
width:600px;
}
.pirate-table tr{
border:1px solid rgba(0,0,0,0.9);

}

.pirate-table tr:nth-child(odd){
background:rgba(50,100,200,0.1);
color:black;
}

.pirate-table tr:nth-child(1){
background:rgba(0,100,200,0.9);
color:white;
}
.pirate-table td{
border:1px solid transparent;
padding:10px 20px;
}
</style>

Table 1 preview

SN	Name	Registered	Email	Donation
1	Alex Poirich	Yes	alex2050@gmail.com	200$
2	william Nerdson	yes	willi80@gmail.com	300$
3	william Nerdson	yes	willi80@gmail.com	300$
4	william Nerdson	yes	willi80@gmail.com	300$
5	william Nerdson	yes	willi80@gmail.com	300$

Table 2 code

  
  

<div class="tb-box"style="overflow-x:scroll;">

<table class="pirate-table">

<!--Table row -->
<tr>
<td>SN</td>
<td>Name</td>
<td>Registered</td>
<td>Email</td>
<td>Donation</td>
</tr>


<!--Table row -->
<tr>
<td>1</td>
<td>Alex Poirich</td>
<td>Yes</td>
<td>alex2050@gmail.com </td>
<td>200$</td>
</tr>


<!--Table row -->
<tr>
<td>2</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>


<!--Table row -->
<tr>
<td>3</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>


<!--Table row -->
<tr>
<td>4</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>


<!--Table row -->
<tr>
<td>5</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>

</table>

</div>
<style type="text/css">
.tb-box{
box-shadow:0px 2px 4px 0 rgba(0,0,0,0.4);
}
.pirate-table{
border-collapse:collapse;
width:600px;
}
.pirate-table tr{
border:1px solid transparent;

}

.pirate-table tr:nth-child(odd){
background:rgba(0,100,100,0.1);
color:black;
}

.pirate-table tr:nth-child(1){
background:rgba(0,100,100,0.9);
color:white;
}
.pirate-table td{
border:1px solid transparent;
padding:10px 20px;
}
</style>

Table 2 preview

SN	Name	Registered	Email	Donation
1	Alex Poirich	Yes	alex2050@gmail.com	200$
2	william Nerdson	yes	willi80@gmail.com	300$
3	william Nerdson	yes	willi80@gmail.com	300$
4	william Nerdson	yes	willi80@gmail.com	300$
5	william Nerdson	yes	willi80@gmail.com	300$

Table 3 code

<div class="tb-box"style="overflow-x:scroll;">

<table class="pirate-table">

<!--Table row -->
<tr>
<td>SN</td>
<td>Name</td>
<td>Registered</td>
<td>Email</td>
<td>Donation</td>
</tr>


<!--Table row -->
<tr>
<td>1</td>
<td>Alex Poirich</td>
<td>Yes</td>
<td>alex2050@gmail.com </td>
<td>200$</td>
</tr>


<!--Table row -->
<tr>
<td>2</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>


<!--Table row -->
<tr>
<td>3</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>


<!--Table row -->
<tr>
<td>4</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>


<!--Table row -->
<tr>
<td>5</td>
<td>william Nerdson</td>
<td>yes</td>
<td>willi80@gmail.com</td>
<td>300$</td>
</tr>

</table>

</div>
<style type="text/css">
.tb-box{
box-shadow:0px 2px 4px 0 rgba(0,0,0,0.4);
}
.pirate-table{
border-collapse:collapse;
width:600px;
}
.pirate-table tr{
border:1px solid transparent;

}

.pirate-table tr:nth-child(odd){
/*Change color*/
background:rgba(0,0,0,0.1);
color:black;
}

.pirate-table tr:nth-child(1){
/*change color*/
background:rgba(0,0,0,0.8);
color:white;
}
.pirate-table td{
border:1px solid transparent;
padding:10px 20px;
}
</style>

Table 3 preview

SN	Name	Registered	Email	Donation
1	Alex Poirich	Yes	alex2050@gmail.com	200$
2	william Nerdson	yes	willi80@gmail.com	300$
3	william Nerdson	yes	willi80@gmail.com	300$
4	william Nerdson	yes	willi80@gmail.com	300$
5	william Nerdson	yes	willi80@gmail.com	300$

Conclusion

Finally i want to say you that creating a table in blogger is a bit tricky and it requires some learning but you know it worth . Table helps your visitor to better anaylze data and also it makes your blog professional and attractive.

So Make sure to learn creating table completely.
If you liked this article then please share it to facebook , pin it or tweet it.
And the most important thing please link to this blog from yours as it will help me to rank better in google so that more people will be helped.

swipbook.com

How to create a static home page in Blogger ?

Do you want step by step guide to create a static home page in blogger ? Well if you want then read this post carefully. Before that i want to give a little background knowledge about websites. Generally there are about three types of websites in this world and they are static , dynamic and application. Static websites are those which organize their content in such a way that it never up gets updated or say its looks , appearance or written texts are not updated. For example Websites of college and universities which are written once and their students or those students who wants to apply reads same thing for year and year. Their website put articles like how to apply , fee structure , scholarships , hostel etc. These articles never get old with every new year it gets new readers. Similarly websites of companies , organization , clubs etc comes under static sites Now lets come to dynamic websites , All those websites which keep on changing or updating their web content are dynamic w

Anonymous3 December 2022 at 11:15
That’s end result of|as a outcome of} the payout for a Full House and a Flush is 9 and 6 coins/credits, respectively. It’s the most effective hand could get} and routinely beats all other 점보카지노 hands. However, it’s a golden hand that’s unimaginable to acquire. This hand could activate the progressive jackpot characteristic in some video games if there’s that characteristic. Some of the video poker variants even have a wild card characteristic. Similarly, in Joker Wild, the wild card is the Joker card.

Pirates of Blogger

Search This Blog