Replace complex nested table layout with css

Question

I am trying to rewrite some legacy code nested tables with CSS layout. It contains tabular data [reports] as well as layout info such as background color, row/column height/width, alignment and so on all wrapped under nested tables. The layout/template is configurable by users. Hence the html/UI code is generated on the fly based on the template data through JAVA. Soinline styling is used for dynamic code generation.

I tried to use div elements with display:table, table-row, table-cell to some extend but colspan/rowpsans are roadblocks.

Sample Code Snippet

<tr valign="top">
<td nowrap  height="45"></td>
<td nowrap ></td>
<td nowrap  colspan="2"><font color="#000000" ><b><font size="-1" face="arial"><span>Report:</span></font></b></font></td>
<td nowrap  colspan="2"><font color="#000000" ><b><font size="-1" face="arial"><span>Report ABC</span></font></b></font></td>
<td nowrap >
  <table width=367 cellpadding=0 cellspacing=0 border=0>
    <tr>
        <td nowrap>
            <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
                <tr>
                    <td nowrap height="100%" align="center" valign="top">
                        <font color="#000000" ><b><font  face="arial"><span>Some Report Title</span></font></b></font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  </table>
 </td>
 <td nowrap  colspan="2"><font color="#000000" ><b><font size="-1" face="arial"><span>Some title:</span></font></b></font></td>
 <td nowrap ><font color="#000000" ><b><font size="-1" face="arial"><span>Some date</span></font></b></font></td>
</tr>

The above code is dynamically generated from template using pure JAVA and no external CSS applied. Occasionally the UI layout doesn't sync up with template layout when generated due to the complex nested table structure.

Can this be completely re-written using css/div elements or some other means?

Thanks in advance.

Answer 1

There are good resources to convert tables to div structure online.

One good example would be: divtable converter

Example:

Your example code will be transformed into 2 files (html and css):

Html

<p>&nbsp;&nbsp;<span style="color: #000000;"><strong><span style="font-family: arial;">Report:</span></strong></span><span style="color: #000000;"><strong><span style="font-family: arial;">Report ABC</span></strong></span></p>
<div class="divTable">
    <div class="divTableBody">
        <div class="divTableRow">
            <div class="divTableCell">
                <div class="divTable">
                    <div class="divTableBody">
                        <div class="divTableRow">
                            <div class="divTableCell"><span style="color: #000000;"><strong><span style="font-family: arial;">Some Report Title</span></strong></span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<p><span style="color: #000000;"><strong><span style="font-family: arial;">Some title:</span></strong></span><span style="color: #000000;"><strong><span style="font-family: arial;">Some date</span></strong></span></p>

CSS:

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

Any further customization needs to be hand-written, but it's a good start.

I hope it helps!