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


enter image description here

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">&nbsp;</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

enter image description here

the key laying out table using rowspan , colspan attributes.

http://tinker.io/174de/1

<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

Popular posts from this blog

node.js - Bad Request - node js ajax post -

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -