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 might 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: