So basically, you've turned all your <table>
, <tr>
and <td>
elements into <div>
elements, and styled them to work exactly like the original table elements they've replaced?
What's the point in that?
It sounds like someone's told you that you shouldn't be using tables in modern web design, which is sort of right, but not in this way -- what you've done doesn't actually change anything about your code. It certainly hasn't got rid of the table; it's just made it harder to read.
The true meaning of the point about not using tables in modern sites is to achieve the page layout you want without using the kind of layout techniques that involve setting out a grid of table cells.
This is achieved by using position
styles and float
styles, and a number of others, but certainly not display:table-cell;
etc. All of this can be achieved without ever needing colspans or rowspans.
On the other hand, if you are trying to place an actual block of tabular data on the page - for instance a list of items and prices in a shopping basket, or a set of statistics, etc, then a table is still the correct solution. Tables were not removed from HTML, because they are still relevant and still useful. The point is that it is fine to use them, but only in places where you are actually display a table of data.
The short answer to your question is I don't think you can -- colspan
and rowspan
are specific to tables. If you want to carry on using them, you will need to use tables.
If your page layout is such that it relies on tables, there really isn't any point doing a half-way house effort to get rid of the table elements without reworking how the layout is done. It doesn't achieve anything.
Hope that helps.