How To Add Responsive HTML Table In Blogger

Responsive HTML tables are tables that can automatically resize to fit the screen of the device they are being viewed on. This is important because more and more people are using mobile devices to browse the web.

1. Log in to your Blogger dashboard.
2. Open the blog post in HTML view. To do this, click the Edit button for the post you want to add the table to, then click the HTML tab.
3. Copy and paste the following HTML code into the post editor:

    	<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>	

4. Change the table data to your liking. You can add or remove rows and columns, and change the text in the cells.
5. Add the following CSS code to your blog post:

    .table-responsive {
  width: 100%;
  margin-bottom: 1rem;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive {
    -ms-overflow-style: auto;
  }
}

	

6. Click the Publish button to save your changes.

    	<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

• The <table> tag creates a table.
• The <thead> tag defines the table header.
• The <tr> tag defines a table row.
• The <th> tag defines a table header cell.
• The <tbody> tag defines the table body.
• The <td> tag defines a table data cell.

    .table-responsive {
  width: 100%;
  margin-bottom: 1rem;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive {
    -ms-overflow-style: auto;
  }
}

	

• The .table-responsive class is used to make a table responsive.
• The width: 100%; property sets the width of the table to 100% of the container.
• The margin-bottom: 1rem; property adds a 1rem margin to the bottom of the table.
• The overflow-y: hidden; property hides the horizontal scrollbar if the table content is wider than the container.
• The -webkit-overflow-scrolling: touch; property enables touch scrolling on the table.
• The @media (max-width: 575.98px) {} media query targets devices with a maximum width of 575.98px.
• The -ms-overflow-style: auto; property enables horizontal scrolling on the table on devices with a maximum width of 575.98px.