RESPONSIVE TABLE CODE FOR BLOGGER TESTED

Steps to add this HTML CSS Responsive Grid Layout to your blogger post.

Steps to add images to HTML CSS Responsive Grid Layout Generator for blogger post.

Steps to add this HTML CSS Responsive Grid Layout to your blogger post.

Go to your blogger dashboard and click on the new post.

Create and design content for the first cell.

After creating and styling the content for the first cell, click on Html Tab.

Copy the content available in the HTML editor (Ctrl+A and Ctrl+C).

Then come back to this site, click on Cell then paste the copied code into cell1.

Repeat the same procedure for all cells.

After creating content for all cells, customize the design for a responsive layout.

Then copy the generated code and go back to your post editor.

Click on the HTML tab then paste the copied code.

Publish and view the post.

Simple Grid Responsive Template will be added to your blogger post.

Steps to add images to HTML CSS Responsive Grid Layout Generator for blogger post.

Go to your blogger dashboard and click on the new post.

Click on Compose then upload an image.

Right-click on the uploaded image and select "Copy image address".

Paste the copied image address in the below red-colored text.

<img width="100%" height="auto" src="Paste the copied image address here">

then copy the updated code.

Then come back to this site, click on Cell then paste the copied code into the cell.

Then the image will be added to your cell.

CONTENT	LINK
TABLE WITH BORDER (HTML CODE)	CLICK
ADD MANUALLY SIMPLE TABLE	CLICK
TABLE WITH BORDER AND RESPONSIVE(PROBLEM-1)	CLICK
HOW TO ADD CSS CODE IN BLOG THEME CSS CUSTOM	CLICK
Start a blog	CLICK

CODE FOR THE RESPONSIVE TABLE WITH BORDER

https://www.htmlcodegenerator-tools.com/2019/11/html-css-responsive-table-generator-mobile-friendly.html

THIS CODE IS FOR ONE HEAR 2 COLUMNS AND 5 ROWS

CODE
<style> table {border: 1px solid #000000;border-collapse: collapse; margin: 0 auto;  padding: 0px;table-layout: fixed;min-width: 100%;}table th {text-align: center;padding: 8px;border: 1px solid #000000;background:#1b90bb;color:#FFFFFF;font-weight:bold;text-align:center}table td{padding: 8px;border: 1px solid #000000;}table tr{background-color: #dddddd;color:#000000;text-align:left;}table .mobile-head {display:none;}@media screen and (max-width: 600px) {table {border: 1px solid #000000;border-collapse: collapse; margin: 0 auto;  padding: 0px;table-layout: fixed;min-width: 100%;}table td{padding: 8px;border: 1px solid #000000;display: block;text-align: right;width: 100%\9;  float: left\9;}table tr{background-color: #dddddd;color:#000000;text-align:right;margin:8px}table tr:first-child {display:none;}table tr{display: block;}table td:not(:first-child){border-top:0px;}table .mobile-head{font-weight:bold;color:#000000;float:left;text-align:left;display:block}} </style> <table> <tr> <th>Head1</th> <th>Head2</th> </tr> <tr> <td><span class='mobile-head'>Head1</span>row1 column1</td> <td><span class='mobile-head'>Head2</span>row1 column2</td> </tr> <tr> <td><span class='mobile-head'>Head1</span>row2 column1</td> <td><span class='mobile-head'>Head2</span>row2 column2</td> </tr> <tr> <td><span class='mobile-head'>Head1</span>row3 column1</td> <td><span class='mobile-head'>Head2</span>row3 column2</td> </tr> <tr> <td><span class='mobile-head'>Head1</span>row4 column1</td> <td><span class='mobile-head'>Head2</span>row4 column2</td> </tr> <tr> <td><span class='mobile-head'>Head1</span>row5 column1</td> <td><span class='mobile-head'>Head2</span>row5 column2</td> </tr> </table>1 column1
Row1 Description