How to Create HTML Table in Blogger - PC Week | Weekend Tech Network
Logo Designing - Video Editing - SEO and Adsense Optimisation

How to Create HTML Table in Blogger

insert table in blogger

How to Create HTML Table in Blogger - Hello guys welcome back to another tutorial in this tutorial I will show you how to add a table to your blogger post using HTML codes. HTML table can be easily created using many ways. I will show two easiest way to create tables in blogger.

HTML tables are very useful in creating a list of materials or another useful listing which is very useful to understand and catch visitors rather writing it without a table.

Check - How to Add Table of Contents in Blogger

Table of Contents
  1. Basic HTML Table without Style
  2. HTML Table - Adding Style
  3. Adding style through your Custom CSS section
  4. Adding style in Single Post
  5. Conclusion

How to insert a table in blogger

HTML table contains Four main tags which are very necessary to insert any table into our post.

 Table tag 
 Row tag
 Heading tag

Basic HTML Table without Style

In order to insert a table in blogger, you will only need the below code but it will not contain nay border, padding or colour because all these features are added through <style> which we will discuss below.
    <table>
      <tr>
        <th>Name</th>
        <th>Last</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Bill</td>
        <td>Sith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>E</td>
        <td>Jack</td>
        <td>94</td>
      </tr
      <tr>
        <td>Jerry</td>
        <td>Mill</td>
        <td>80</td>
      </tr>
    </table>

     The table should start and end with a <table> tag and the closing tag </table>

    Each row start with a <trtag and end with a </tr> tag.

    All Element in a row should be inserted with <td>John</td> tags and these tags determine the number of column in each row. <th>  tag is only used for the first row for headline as shown below
      insert table in blogger


      HTML Table - Adding Style

      In the above section, we have discussed how to insert a basic HTML table into our blog. Here we would study how to add style to your tables like border, padding, colour etc.

      In order to Add style into your blog, there is two way to do it but I will recommend below method

      Adding style through your Custom CSS section

      1. Goto to Blogger Customise Section in your theme panel 

      2. And Click Advanced Option and Paste the below code (From <style> to <style> in the custom CSS section

      insert table in blogger

      3. That's all refresh your page and see the change
        <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
        }

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

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

        <h2>HTML Table with Style</h2>

        <table>
          <tr>
            <th>Name</th>
            <th>Mobile</th>
            <th>Place</th>
          </tr>
          <tr>
            <td>Alfred</td>
            <td>123</td>
            <td>Germany</td>
          </tr>
          <tr>
            <td>Moctezuma</td>
            <td>355</td>
            <td>Mexico</td>
          </tr>
          <tr>
            <td>Handel</td>
            <td>553</td>
            <td>Austria</td>
          </tr>
          <tr>
            <td>Island</td>
            <td>585</td>
            <td>UK</td>
          </tr>
          <tr>
            <td>Bacchus</td>
            <td>582</td>
            <td>Canada</td>
          </tr>
          <tr>
            <td>Alimentari</td>
            <td>455</td>
            <td>Italy</td>
          </tr>
        </table>


        And this would look like this with style

        insert table in blogger

        Adding style in Single Post

        If you don't need this style in every post or you only need to add this in a single post then you don't need to copy all the Style in  Custom CSS section. For this just paste the above code in your posts HTML section and you are done

        insert table in blogger

        Conclusion

        I Hope that you liked this post on How to Create HTML Table in Blogger. You can freely comment your doubts below.

        If you liked this article, then please share to the social networking site. You can also find us on Twitter, Facebook, YouTube, and Instagram.

        Check out this - Blogger Templates without Copyright

        No comments:

        Powered by Blogger.