(HTML) How to reproduce this nested table? -


this assignment question. the table need reproduce

the table above need make. table below came with:

my table

my code:

<!doctype html> <html>     <head>         <title>question two</title>         <meta charset="utf-8">     </head>     <body>         <h2>nested tables</h2>         <table border="1">             <tr>                 <th>header column 1</th>                     <th>header column 2</th>                 <th>header column 3</th>                 <th>header column 4</th>             </tr>             <tr>                 <td>row 2 - item 1</td>                 <td>row 2 - item 2</td>                 <td rowspan="2">                     <h4>row 2: nested table 1</h4>                     <table border="1">                                                               <tr>                             <th>row 1 header</th>                             <td>item</td>                         </tr>                         <tr>                             <th>row 2 header</th>                             <td>item</td>                         </tr>                         <tr>                             <th>row 3 header</th>                             <td>item</td>                         </tr>                     </table>                 </td>                 <td>row 2 - item 4<br/>a second line</td>             </tr>             <tr>                 <td>                     <h4>row 3: nested table 2</h4>                     <table border=1>                         <tr>                             <th>row 1 header</th>                             <td>item</td>                         </tr>                         <tr>                             <th>row 2 header</th>                             <td>item</td>                         </tr>                     </table>                 </td>                 <td>row 3 - item 2</td>                 <td rowspan="2">row 3 - item 3</td>             </tr>             <tr>                 <td>row 4 - item 1</td>                 <td>row 4 - item 2</td>                 <td>row 4 - item 3</td>             </tr>             <tr>                 <td colspan="4">row 5 - last row of outer table</td>             </tr>         </table>     </body> </html> 

two things different: font , line spacing of nested table 1 , 2.

  1. as per font, there way set default font html documents use? if so, how?

  2. for spacing, have no idea. tried kinds of combinations of <br>, <pre>, <div>.. etc. i'm pretty sure it's not browser issue caused erroneous result (tried multiple browsers--i'm using ie, running on windows 7). ideas?

thank you.

this wild guess font you're looking may "calibri" or similar. can add font-family inline style body tag , in table inherit font.

<body style="font-family:calibri;"> , here's demo of in action.

the spacing seems fine is, if need make adjustments can padding, margin, or cellpadding.

this pad space in cells 10: <table border="1" cellpadding="10">

this pad top of cell 10px: <td rowspan="2" style="padding-top:10px;">


Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -