Problems with formatting nested tables

Question

We are working on a site that would help us generate resumes from the samples provided, in order to generate these resumes, display the generated resume and export them in to .doc format we have created the structure of the resume using tables and they render perfectly when opened as word document but it renders incorrectly when opened in any browser. The number of nested tables are more I guess and hence this issue.

Here is a link to the fiddle : http://jsfiddle.net/EdgeHour/dmm8hfhr/

And I will paste the code here too just for your reference. Please help.

<table cellspacing="10px" cellpadding="3px" style="width:18cm;">
    <tr>
        <td width="65%" style="font-size:28px; color:#F00; font-weight:bolder;"> John Diioe </td>
        <td>&nbsp; </td>
    </tr>
    <tr>
        <td style="font-size:16px; font-weight:bolder;"> Senior CAD Technician </td>
        <td>&nbsp; </td>
    </tr>
    <tr>
        <td> 
        <table>
            <tr>
                <td align="center" style="background-color:#FF0000; font-size:12px; font-weight:bold; color:#FFFFFF;"> Summary </td>
            </tr>
            <tr>
                <td> Information Systems Technologist with a strong background in business process and technology providing an ideal mix of management, analytical, and technical capabilities. Experience in small, mid, and fortune 500 companies as well as several industries inclusive of Healthcare, Manufacturing, Technology, Consumer Goods, Pharmaceuticals and Infrastructure/Construction. Strong people skills with a proven record as a problem solver recognized for focus on cost reduction, meeting aggressive deadlines, aligning teams and maintaining a hand’s on approach to achieve an organization’s business goals. Highly skilled in all facets of </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#FF0000; font-size:12px; font-weight:bold; color:#FFFFFF;"> Accomplishment </td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:disc;">
                    <li>Actively participated in the senior management team which determines plans for the development of the company</li>
                    <li>Worked on spread sheet to effect pay rises and conditions in Nigeria.</li>
                    <li>Participated in the set up of $8m business in Angola which increased to $25m Business.</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#FF0000; font-size:12px; font-weight:bold; color:#FFFFFF;"> Professional Experience </td>
            </tr>
            <tr>
                <td> 
                <table width="100%">
                    <tr>
                        <td style="font-size:14px; font-weight:bolder; color:#F00;"> JC Services, LLC, Nesconset, NY </td>
                        <td align="right" style="font-size:14px; font-weight:bolder; color:#F00;"> March 2007 -Present </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="font-size:14px; font-weight:bolder; color:#F00;"> Principal Consultant </td>
                    </tr>
                    <tr>
                        <td colspan="2"> Job Responsibilities </td>
                    </tr>
                    <tr>
                        <td colspan="2"> 
                        <ul style="list-style:disc; font-weight:lighter;font-size:13px;">
                            <li>Healthcare – Infrastructure project management and subject matter expertise. Lead the planning and redesign of the organizations computer infrastructure inclusive of data center design and layout.</li>
                            <li>Healthcare – Internet / E-Mail migration project. Recommended, designed and implemented new Internet and E-Mail services for organization</li>
                        </ul>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size:14px; font-weight:bolder; color:#F00;"> JC Services, LLC, Nesconset, NY </td>
                        <td align="right" style="font-size:14px; font-weight:bolder; color:#F00;"> March 2007 -Present </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="font-size:14px; font-weight:bolder; color:#F00;"> Principal Consultant </td>
                    </tr>
                    <tr>
                        <td colspan="2"> Job Responsibilities </td>
                    </tr>
                    <tr>
                        <td colspan="2"> 
                        <ul style="list-style:disc; font-weight:lighter;font-size:13px;">
                            <li>Healthcare – Infrastructure project management and subject matter expertise. Lead the planning and redesign of the organizations computer infrastructure inclusive of data center design and layout.</li>
                            <li>Healthcare – Internet / E-Mail migration project. Recommended, designed and implemented new Internet and E-Mail services for organization</li>
                        </ul>
                        </td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#FF0000; font-size:12px; font-weight:bold; color:#FFFFFF;"> Project </td>
            </tr>
            <tr>
                <table width="100%">
                    <tr>
                        <td width="30%"> Project</td>
                        <td>Retail, supply chain, warehouse ERP management systems; e-Commerce system; CRM/Loyalty system </td>
                    </tr>
                    <tr>
                        <td>Role </td>
                        <td>&nbsp; </td>
                    </tr>
                    <tr>
                        <td colspan="2"> 
                        <ul>
                            <li>Implementation and operations of Aldata GOLD Retail software and multi systems integration to POS, warehouse systems, finance systems, and data warehouse. Includes IT planning, project management, business models, business rules, and supply chain integration. Designer of advanced consignment management. Solution architect of e-Commerce and CRM/Loyalty projects.</li>
                            <li>Group entities: The Body Shop Indonesia, Centro department stores, KemChicks supermarket, PS/M2 fashion, F Fashion, Luley hotels, Santika Bintaro hotel.</li>
                        </ul>
                        </td>
                    </tr>
                </table>
            </tr>
        </table>
        </td>
        <td valign="top"> 
        <table>
            <tr>
                <td align="center" style="background-color:#06F; font-size:12px; font-weight:bold; color:#FFFFFF;"> Core Competencies </td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:none">
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#06F; height:20px; font-size:12px; font-weight:bold; color:#FFFFFF;"> Technical Skills </td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:none">
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#06F; height:20px; font-size:12px; font-weight:bold; color:#FFFFFF;"> Education</td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:none">
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#06F; height:20px; font-size:12px; font-weight:bold; color:#FFFFFF;"> Contact Details</td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:none">
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
            <tr>
                <td align="center" style="background-color:#06F; height:20px; font-size:12px; font-weight:bold; color:#FFFFFF;"> Personal Details</td>
            </tr>
            <tr>
                <td> 
                <ul style="list-style:none">
                    <li>Equipment Management</li>
                    <li>Project Management</li>
                    <li>Project Administration</li>
                    <li>Knowledge in HSE standards</li>
                </ul>
                </td>
            </tr>
        </table>
        </td>
    </tr>
</table>

Are you generating this code from scratch or is it coming from a Word document to start with? If you're writing it from scratch, I would take some time to ensure that whatever is produces valid, semantically-correct html. — i alarmed alien, Aug 11 '14 at 16:24
@girlwithglasses cm is valid CSS, it should translate to roughly 38px — Dai, Aug 11 '14 at 16:25
@girlwithglasses I am writing the code from scratch and i am exporting it to a word document. — Hitesh Bansi Ramnathkar, Aug 12 '14 at 11:29
I'd highly recommend that you rewrite the code in that case -- it will be much simpler and easier to maintain without all those tables to worry about. See also http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — i alarmed alien, Aug 12 '14 at 11:52

score 0 · Accepted Answer · edited Aug 11 '14 at 16:56

0

Your markup is invalid, you have tags open but not closed in places, and you have at least one nested table that isn't inside a <td> (line 125).

edited Aug 11 '14 at 16:56

Jukka K. Korpela

195,524
37
270
390

answered Aug 11 '14 at 16:34

Dai

1,510
1
11
12

score 0 · Answer 2 · answered Aug 11 '14 at 17:02

I would recommend you ditch the tables and rewrite the code completely. Here's how I would start the document:

<h1>
    John Diioe 
</h1>
<h2>
    Senior CAD Technician 
</h2>
<h3>
    Summary 
</h3>
<p>
    Information Systems Technologist with a strong background in business process and technology providing an ideal mix of management, analytical, and technical capabilities. Experience in small, mid, and fortune 500 companies as well as several industries inclusive of Healthcare, Manufacturing, Technology, Consumer Goods, Pharmaceuticals and Infrastructure/Construction. Strong people skills with a proven record as a problem solver recognized for focus on cost reduction, meeting aggressive deadlines, aligning teams and maintaining a hand’s on approach to achieve an organization’s business goals. Highly skilled in all facets of 
</p>
<h3>
    Accomplishments 
</h3>
<ul class="disc">
    <li>Actively participated in the senior management team which determines plans for the development of the company</li>
    <li>Worked on spread sheet to effect pay rises and conditions in Nigeria.</li>
    <li>Participated in the set up of $8m business in Angola which increased to $25m Business.</li>
    <li>Knowledge in HSE standards</li>
</ul>
<h3>
    Professional Experience
</h3>
<h4>
    JC Services, LLC, Nesconset, NY
</h4>
<p>
    March 2007 - Present<br>
    Principal Consultant
</p>
<h5>
    Job Responsibilities
</h5>
<ul class="details">
    <li>Healthcare – Infrastructure project management and subject matter expertise. Lead the planning and redesign of the organizations computer infrastructure inclusive of data center design and layout.</li>
    <li>Healthcare – Internet / E-Mail migration project. Recommended, designed and implemented new Internet and E-Mail services for organization</li>
</ul>

(etc.)

You can then separate out the css (style) information:

body { background-color: #fff; color: #000;
/* put your general settings here - e.g. background color, text color, margins, fonts, etc. */ 
}
h1, h2, h3, h4, h5, p, ul, li { margin: 10px; padding: 3px; }
h1 { font-size:28px; color:#F00; font-weight:bolder; }
h2 { font-size:16px; font-weight:bolder; }
h3 { background-color:#FF0000; font-size:12px; font-weight:bold; color:#FFFFFF; }
h3.blue { background-color:#06F; /* blue background */ } 
h4 { color: #f00; font-size:14px; font-weight:bolder; }
h5 { font-weight: bolder; }
ul.disc { list-style-type: disc; } /* for lists with a disc as a marker */
.details { font-size:13px; font-weight: lighter; } /* detailed lists */

(etc.)

That will stop you having problems with nested tables, will make your code a lot cleaner, and I believe that Word will still be able to use the style information.

Problems with formatting nested tables

2 Answers2