Вы находитесь на странице: 1из 4
HTML CSS JS HTML CSS JS Features How to use? Blog Invest for a bright

HTML

CSS

JS

HTML CSS JS HTML CSS JS Features How to use? Blog Invest for a bright future
HTML CSS JS
HTML
CSS
JS
Features How to use? Blog
Features
How to use?
Blog
Invest for a bright future ahead Your all in one or plan a relaxing weekend,

Invest for a bright future ahead

Your all in one

Invest for a bright future ahead Your all in one

or plan a relaxing weekend,

yono by SBI

planner

Yono is all you need

weekend, yono by SBI planner Yono is all you need Replace HTML tables with <div>s In
Replace HTML tables with <div>s In the era of responsive web design the old trend
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

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></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

> < div class = "rTableCell" >< img Please support this free tool with a share.

Please support this free tool with a share.

Like 276

Share

Thank you!

class = "rTableCell" >< img Please support this free tool with a share. Like 276 S

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