Add Responsive Table In Blogger Post With HTML Code

OnTeque is the best platform for Mobile Reviews, Laptop Reviews,  Tips and Tricks about Android, How to, windows, Software, mac, iOS Apple, YouTube, Facebook, WhatsApp, Instagram, twitter, tech.

Here we are going to insert a responsive beautiful table for blogger along with this we discuss about advanced html table generator, table widget for blogger, blogger table, responsive table colspan rowspan, responsive table generator, blogger table html, html table generator with colspan and rowspan, how to add automatic table of contents in google blogger etc.
Add Responsive Table In Blogger Post With HTML Code


Content


Here we are going to learn about

⇒Can you insert a table in blogger?

How do I make my table layout responsive?

Can a table be responsive?

How do I make my blog post responsive?

Responsive Table - Overview


Here we are going to insert a responsive beautiful table for blogger along with this we discuss about advanced html table generator, table widget for blogger, blogger table, responsive table colspan rowspan, responsive table generator, blogger table html, html table generator with colspan and rowspan, how to add automatic table of contents in google blogger etc.

What is Responsive Table ?


Table is a combination of horizontal and vertical line. The vertical  line creates column and the horizontal line creates raw. And multiple combination of raw and column makes a table.

Responsive table means a table which adjust its size according to size of the display and do not get distorted with change in size of display. 



How To Insert Responsive Table In Blogger


Steps to insert a responsive table in blogger posts

Step 1: Go To Blogger dashboard.

Step 2: Go To post in which you want to insert a responsive table.

Step 3: Click on pencil icon present on the left upper corner.

Step 4: Click on HTML View.

Step 5: Copy the below code.
<table border="1" bordercolor="#888" cellspacing="0" style="border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px; line-height: 1.5;">
    <tbody style="line-height: 1.5;">
      <tr style="line-height: 1.5;">
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large;"><span style="font-weight: normal;">&nbsp;R1</span><span>C1</span></span></div>
        </td>
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">&nbsp;R1C2&nbsp;</span></div>
        </td>
       <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">&nbsp;R1C3&nbsp;</span></div>
        </td>
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">&nbsp;R1C4&nbsp;</span></div>
        </td>
      </tr>
      <tr style="line-height: 1.5;">
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R2C1</span></div>
        </td>
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R2C2</span></div>
        </td>
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R2C3</span></div>
        </td>
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R2C4</span></div>
        </td>
      </tr>
      <tr style="line-height: 1.5;">
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R3C1</span></div>
        </td>
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R3C2</span></div>
        </td>
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R3C3</span></div>
        </td>
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R3C4</span></div>
        </td>
      </tr>
      <tr style="line-height: 1.5;">
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R4C1</span></div>
        </td>
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R4C2</span></div>
        </td>
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R4C3</span></div>
        </td>
        <td style="line-height: 1.5;">
          <div style="text-align: center;"><span style="font-size: x-large; font-weight: normal;">R4C4</span></div>
        </td>
      </tr>
          </tbody>
</table>
Step 6: Paste the code only in HTML View.

Step 7: Now switch to compose view.

Step 8: If you want to add or delete any raw or column then watch the video tutorial.

Video Tutorial



Previous Post Next Post