HTML

CSS
JS

HTML CSS JS Features How to use? Blog

Your all in one

Invest for a bright future ahead
yono
plannerby SBI
or plan a relaxing weekend,
Yono is all you need

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.

DivTable.com Start converting

tables
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> Please support this free tool
<tr>
<td>Cassie</td> with a share.
<td><a href="tel:9876532432">9876 532
432</a></td>
<td><img src="images/check.gif"
alt="checked" /></td>
</tr>
</table> Like 276 Share

Thank you!
<h2>Phone numbers</h2>
<div class="rTable">
<div class="rTableRow">
<div
class="rTableHead"><strong>Name</strong></di
v>
<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>

A table built using the classic HTML table tags:

Month Expenses Notes
January $20 Car repair
February $130 Furniture
March $30 Pool cleaning
Sum $180 All done

The same table built using div's only:

Month Expenses Notes
January $20 Car repair
February $130 Furniture
March $30 Pool cleaning
Sum $180 All done

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;
}

<< Previous Next >>

Just like almost every other website, we use cookies to improve user experience. Please leave this website if you don't agree.
Contact | SiteMap | Privacy | Terms & Conditions | © 2018 HTML-Cleaner.com