html - How do I replicate the exact layout of the attached document? -

hi form word document , have been trying recreate html having difficulty unfotunately.
this have far. perhaps, css reason why isn't laying out correctly.
thanks assistance.
css - must have:
<style type="text/css"> table .mystyle { border-width: 0 0 1px 1px; border-spacing: 0; border-collapse: collapse; border-style: solid; border-color:#000; width:900px; } .mystyle td, .mystyle th { margin: 0; padding: 4px; border-width: 1px 1px 0 0; border-style: solid; font-size:medium; border-color:#000; } </style> current html:
<table class="mystyle"> <tr> <td style="width:50px;" class="style7"> </td> <td style="width:158px;" class="style7">milestone</td> <td style="width:158px;" class="style7">owner</td> <td style="width:108px;white-space:nowrap;"> <table border="1"> <tr> <td colspan="2">completion date</td> </tr> <tr> <td>target</td> <td>actual</td> </tr> </table> </td> <td style="width:358px;" class="style7">comments</td> </tr> <tr> </tr> </table> extreme left qtr 1 through qtr4

the key laying out table using rowspan , colspan attributes.
<table class="mystyle"> <thead> <tr> <th rowspan="2">quarter</th> <th rowspan="2">milestone</th> <th rowspan="2">owner</th> <th colspan="2">completion date</th> <th rowspan="2">comments</th> </tr> <tr> <th>target</th> <th>actual</th> </tr> </thead> <tbody> <tr> <th rowspan="3">q1</th> <td>a</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>b</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>c</td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> <tbody> <tr> <th rowspan="3">q2</th> <td>a</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>b</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>c</td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>
Comments
Post a Comment