Replace HTML tables with <div>s

In the era of responsive web design the old trend of building websites using HTML tables can't be used anymore. You have to use div tags and style them as required. This feature of the HTML Cleaner offers you a simple way to replace all table tags with div tags having the correct classes.

In this case replacing the content is not going to be enough, you'll have to add a CSS code to the stylesheet of your website. Scroll down to find the requred code at the bottom of this page and adjust it if it's necessary.

The 4 simple steps:

1. Paste your table in the editor
2. Make sure the cleaning option Replace table tags with divs is enabled
3. Clean the document
4. Style your tables using the CSS below

Why and how to use?

Watch the video in HD.

The two examples below demonstrate the two approaches. The first has been built using table tags while the other is made with styled DIVs.

<h2>Phone numbers</h2>
				 <table width="300" border="1" cellpadding="5" style="text-align: center">
				  <tr>
					<th width="75"><strong>Name</strong></th>
					<th><span style="font-weight: bold;">Telephone</span></th>
					<th>&nbsp;</th>
				  </tr>
				  <tr>
					<td>John</td>
					<td><a href="tel:0123456785">0123 456 785</a></td>
					<td><img src="images/check.gif" alt="checked" /></td>
				  </tr>
				  <tr>
					<td>Cassie</td>
					<td><a href="tel:9876532432">9876 532 432</a></td>
					<td><img src="images/check.gif" alt="checked" /></td>
				  </tr>
				</table>
				

<h2>Phone numbers</h2>
				 <div class="rTable">
				 <div class="rTableRow">
				 <div class="rTableHead"><strong>Name</strong></div>
				 <div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
				 <div class="rTableHead">&nbsp;</div>
				 </div>
				 <div class="rTableRow">
				 <div class="rTableCell">John</div>
				 <div class="rTableCell"><a href="tel:0123456785">0123 456 785</a></div>
				 <div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
				 </div>
				 <div class="rTableRow">
				 <div class="rTableCell">Cassie</div>
				 <div class="rTableCell"><a href="tel:9876532432">9876 532 432</a></div>
				 <div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
				 </div>
				</div>
				

Styling your div tables

Minimalist styles

The very basic styling for div tables. It doesn't even add the borders of the cells, it just aligns the elements correctly.

.rTable    { display: table; }
		.rTableRow       { display: table-row; }
		.rTableHeading    { display: table-header-group; }
		.rTableBody    { display: table-row-group; }
		.rTableFoot    { display: table-footer-group; }
		.rTableCell, .rTableHead  { display: table-cell; }
		

Sample div table styles

We used the css below for our demo table you can see above. It gives the borders to the cells and highlights the header and footer.

.rTable {
		    	display: table;
		    	width: 100%;
		}
		.rTableRow {
		    	display: table-row;
		}
		.rTableHeading {
		    	display: table-header-group;
		    	background-color: #ddd;
		}
		.rTableCell, .rTableHead {
		    	display: table-cell;
		    	padding: 3px 10px;
		    	border: 1px solid #999999;
		}
		.rTableHeading {
		    	display: table-header-group;
		    	background-color: #ddd;
		    	font-weight: bold;
		}
		.rTableFoot {
		    	display: table-footer-group;
		    	font-weight: bold;
		    	background-color: #ddd;
		}
		.rTableBody {
		    	display: table-row-group;
		}
		

Avoiding display: table

You can simply set the width of the cells and float them to the left and clear the line with every table row. The main side effect is that changing the number of the columns you need to adjust the width of the cells.

.rTable {
			  	display: block;
			  	width: 100%;
			}
			.rTableHeading, .rTableBody, .rTableFoot, .rTableRow{
			  	clear: both;
			}
			.rTableHead, .rTableFoot{
			  	background-color: #DDD;
			  	font-weight: bold;
			}
			.rTableCell, .rTableHead {
			  	border: 1px solid #999999;
			  	float: left;
			  	height: 17px;
			  	overflow: hidden;
			  	padding: 3px 1.8%;
			  	width: 28%;
			}
			.rTable:after {
			  	 visibility: hidden;
			  	 display: block;
			  	 font-size: 0;
			  	 content: " ";
			  	 clear: both;
			  	 height: 0;
			}