How to Make a Responsive Table in a Blogger | PC Week

How to Make a Responsive Table in a Blogger

Monday, September 17, 2018

How to Make a Responsive Table in a Blogger


Hello, guys welcome back to another tutorial in this tutorial I will show you How to Make a Responsive Table in a Blogger. A responsive 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 other useful listings which is very useful to understand and catch visitors rather writing it without a table.

How to Make a Responsive Table in a Blogger

HTML table contains Four main tags which are very necessary to insert any table into our post. It is mainly
  1. Table tag 
  2. Row tag
  3. Heading tag

Basic Responsive Table in a Blogger

In order to insert a table in blogger, you will only need the below code but it will not contain nay border, padding or color 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>
  1. The table should start and end with a <table> tag and the closing tag </table>
  2. Each row start with a <tr> tag and end with a </tr> tag.
  3. 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 the headline as shown below
    insert table in blogger


    Adding Style to Responsive Table

    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, color, 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 Make a Responsive Table in a 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.
    bm

    I'm an Electronics Engineer with years of experience in Blogging and DIY Projects. I like to make new gadgets and write contents related to technology and Blogging.