HTML Table Generators and Converters

Interactive source editors

The source and visual editor are linked together and you can make your adjustments in any of them.

Undo feature

Revert back to the previous version if you're not satisfied with the results.

Instant code preview

What you see is what you get! Edit your code and preview it instantly.

Syntactically correct code

It's guaranteed that the code you create with DivTable is sintactically correct HTML markup!

CSS styles supplied

Don't forget to add the custom CSS sheet to you project to make the divs behave like tables.

All the settings you need

The table generator settings allow you to customize many options of the grids you create.

StyleSheet

Use the CSS code below to style your div tags as tables.

/* DivTable.com */
.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}

Rowspan and Colspan

Unfortunately DivTables lack the colspan/rowspan equivalents. We can achieve the same effect using nested tables:

nested

Many thanks for supporting our website:

Pranx - online pranks and simulators.
TextEditor.com - online text stylers and other free online tools.

Div Table