How To Add HTML Tables In Blogger Posts

How To Add HTML Tables In Blogger Posts - Hallo sahabat Information About Blogger, Pada Artikel yang anda baca kali ini dengan judul How To Add HTML Tables In Blogger Posts, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger Tips And Tricks, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : How To Add HTML Tables In Blogger Posts
link : How To Add HTML Tables In Blogger Posts

Baca juga


How To Add HTML Tables In Blogger Posts

HTML tables are simple tables which gives a summery of something and are mostly used by those bloggers who own blogs about money so they show there content e.g info about ad networks in the form of tables. But not all bloggers know how to add HTML tables in blog posts and blogger does not have any option to create HTML tables so it can be added only manually. And that's actually the reason of writing this post. In this post I will share with you how to create an HTML table and add it in your blog posts. I will show you only simple one because there are a number of types of HTML tables and I can't share each and every type of HTML table so I will share a simple HTML table with text Like this!So lets get started!

How To Add HTML Table In Blogger Posts?

Step 1: Copy code of HTML table from below:

<style>
#mytable{
width:100%
}
#mytable, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
#mytable th, #mytable td {
    padding: 5px;
    text-align: left;
}
</style>
<table id="mytable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Step 2: Go to blogger > Posts > Edit a post Or Create a new post.

Step 3: Switch to Html view of the post editor and paste the copied code after a certain text or in the beginning of the post or after an image, where ever you want to show your HTML table in the post.

how to switch to HTML editor In blogger.png

Step 4: Make changes according to your choices and publish your post to see your HTML table.

Understanding The HTML Table Code:
html table blogger


After adding above code for HTML Table, you need to make changes in the text and the table code and for that you need to understand the code because without it you can't add a new row in your table and can't add custom info in the rows and columns of your table. so read out below to know what the code is doing.

Here is the CSS code of your table:

<style>
#mytable{
width:100%
}
#mytable, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
#mytable th, #mytable td {
    padding: 5px;
    text-align: left;
}
</style>

It gives your table the borders for each row and column and if you want, you can add your own decorations to your table for example to add a background color you need to add this:

background: yellow;

You have to add above piece of code in this part of code:

#mytable{
width:100%;
background: yellow;
}

Now its time to make changes in the info which is added in your table's row and columns. Here is the overall code for your table:

<table id="mytable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

In this code blue one is the first row of your table, orange is the second, green is the third and yellow is the fourth row of your table. Now you can change text according to your choices.

To add a new row you need to add a simple piece of code below the yellow one, here is the simple piece of code that is need to be added for new row:

<tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>

For more HTML tables visit w3schools. Or search for online HTML table generator and create one for you.

I hope you found this post helpful. If you have any question ask me in comments or contact me. Thanks for visiting 101Helper.

Search Keywords: How to add HTML Table in blogger posts, html tables with rows and columns for blogger, how to add html table in blogger with CSS style, show content in table form in blogger posts.


That is the discussion about How To Add HTML Tables In Blogger Posts

Thank you for visiting the article How To Add HTML Tables In Blogger Posts hopefully always provide useful information, see you in another article.

the article you are reading is about How To Add HTML Tables In Blogger Posts with the link as follows https://www.booknagar.com/2016/12/how-to-add-html-tables-in-blogger-posts.html

0 Response to "How To Add HTML Tables In Blogger Posts"

Post a Comment


Tag: how to create a free blog, how to create a website, how to create a blog website, how to create a blog for free, how to make a blog, wordpress, how to create a wordpress blog, how to create a blog page, how to start a blog, blogger, how to create a blog in wordpress, how to create a blog account, how to create a blog on wordpress, how to create a blog and make money, how to create a blog in google, how to create a successful blog