How to Add Responsive & Stylish Table in Blogger Post - Do Tech Blog

How to Add Responsive & Stylish Table in Blogger Post

Hello guys! In today's article, you will know how to add a table in blogger posts.

Because the normal table is used in every post.


But No plugin is used in Blogger. So we have to add any code custom. So looking at it. We will tell you about some such stylish and responsive tables.


How to Add Table In Blogger Post


Table In Blogger Post


You remained with us in this article. How do you create a table in a blogger post? All the information related to table creation will be found in this article. So let's start.



    Below you are shown several types of tables. You can use the table you want to use. Follow the steps mentioned to use them.


    Table 1 (Black Table)

    table 1


    #Step 1: Open your Blogger Dashboard.

    #Step 2:  Now you click on the Theme.


    blogger theme

    #Step 3: Then you click on Edit Html.

    Customize blogger template

    edit html


    The code editor will open in front of you.

    #Step 4: You click on the code. Press Ctrl + F from your keyboard.

    #Step 5: And Find  </head> .

    paste css

    #Step 6: Now paste the below-given CSS over the <head>.

    <style>

    #table_Style

    {

      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

      border-collapse: collapse;

      width: 100%;}

    #table_Style td, #table_Style th

    {border: 1px solid #ddd;

      padding: 8px;

    }

    #table_Style tr: nth-child (even)

    {

    background-color: # f2f2f2;

    }

    #table_Style tr: hover

     {

     background-color: #ddd; }

    #table_Style th

    {padding-top: 12px; text-align: left; background-color: # 000; color: white; padding-bottom: 12px; } </style>


    #Step 7: Click on save.

    You have to do this work only once.

    #Step 8: Whenever you want to use the table. Then go to the HTML view of your post and paste the below code.

    html view

    view

    paste table code

     

    <table id = "table_Style">

    <tr>

    <th> Heading1 </th>

    <th> Heading2 </th>

    <th> Heading3 </th>

    </tr>

    <tr>

    <td> First Item </td>

    <td> Second Item </td>

    <td> Third Item </td>

    </tr>

    <tr>

    <td> First Item </td>

    <td> Second Item </td>

    <td> Third Item </td>

    </tr>

    <tr>

    <td> First Item </td>

    <td> Second Item </td>

    <td> Third Item </td>

    </tr>

    <tr>

    <td> Table 1 </td>

    <td> Table 2 </td>

    <td> Table 3 </td>

    </tr>

    <tr>

    <td> First Item </td>

    <td> Second Item </td>

    <td> Third Item </td>

    </tr>

    </table>

    </body>

    </html>

    Now you open the Compose View. Now your table will be created in front of you.

    You can add the content of your table according to your choice.


    Table 2 (Blue&White Table)

    table 2

    If you want to add this table in your blogger post. So you can use this table by following the process shown above.

    In which you have to paste the below-given CSS over the <head>.

    <style>

    #table_Style

    {

      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

      border-collapse: collapse;

      width: 100%;}

    #table_Style td, #table_Style th

    {border: 1px solid #fff;

      padding: 8px;

    }

    #table_Style tr: nth-child (even)

    {

    background-color: # eae8e8;

    }

    #table_Style tr: hover

     {

     background-color: #ddd; }

    #table_Style th

    {padding-top: 12px; text-align: left; background-color: # 00e7ff; color: black; padding-bottom: 12px; } </style>


    And you have to paste this code in the HTML view of your post.

    <table id = "table_Style">

    <tr>

    <th> Heading1 </th>

    <th> Heading2 </th>

    <th> Heading3 </th>

    </tr>

    <tr>

    <td> First Item </td>

    <td> Second Item </td>

    <td> Third Item </td>

    </tr>

    <tr>

    <td> First Item </td>

    <td> Second Item </td>

    <td> Third Item </td>

    </tr>

    <tr>

    <td> First Item </td>

    <td> Second Item </td>

    <td> Third Item </td>

    </tr>

    <tr>

    <td> Table 1 </td>

    <td> Table 2 </td>

    <td> Table 3 </td>

    </tr>

    <tr>

    <td> First Item </td>

    <td> Second Item </td>

    <td> Third Item </td>

    </tr>

    </table>


    Table 3 (Transprate Table)

    If you like this table. Then follow the same procedure as in Table 1.

    In which you have to paste the below-given CSS over the <head>.

    <style>

    table {

      border-collapse: collapse;

      border-spacing: 0;

      width: 80%;

      border: 0.8px solid # d8d5d5;

    }

    th, td {

      text-align: center;

      padding: 15px;

    }

    th {

      color: # 287707;

    }

    th: first-child, td: first-child

    {

      text-align: left;

    }

    tr: nth-child (even) {

      background-color: #efefef;

    }

    </style>


    And you have to paste this code in the HTML view of your post.


    <table>

    <tr>

    <th> Heading1 </th>

    <th> Heading2 </th>

    <th> Heading3 </th>

    </tr>

    <tr>

    <td> Table A </td>

    <td> Table B </td>

    <td> Table C </td>

    </tr>

    <tr>

    <td> Table a </td>

    <td> Table b </td>

    <td> Table c </td>

    </tr>

    <tr>

    <td> Table A </td>

    <td> Table B </td>

    <td> Table C </td>

    </tr>

    <tr>

    <td> Table 1 </td>

    <td> Table 2 </td>

    <td> Table 3 </td>

    </tr>

    <tr>

    <td> Table a </td>

    <td> Table b </td>

    <td> Table c </td>

    </tr>

    <tr>

    <td> Table 1 </td>

    <td> Table 2 </td>

    <td> Table 3 </td>

    </tr>

    <tr>

    <td> Table a </td>

    <td> Table b </td>

    <td> Table c </td>

    </tr>

    </table>


    You can use any of these tables. All these tables are responsive.

    The way to do table 2 and table 3 is the same as table 1.


    Suggestion 


    If you want to use the type of table in your blog, you can do it. You have to follow all the steps.

    All these tables are responsive. So it is friendly for both desktop and mobile.


    If you have any kind of error or problem. So you can tell us by commenting.


    No comments :

    Post a Comment

    ;