Questions › (HTML) How to reproduce this nested table?

This is an assignment question. The table I need to reproduce

The table above is what I need to make. The table below is what I came up 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 are different: the font and line spacing of Nested Table 1 and 2.

  1. As per the font, is there a way to set a default font for all HTML documents to use? If so, how?

  2. For the spacing, I have no idea. I tried all kinds of combinations of <br>, <pre>, <div>.. etc. I'm pretty sure it's not a browser issue that caused the erroneous result (tried multiple browsers--I'm using IE, running on Windows 7). Any ideas?

Thank you.

Comments :
David replied

You can examine the styling of the original HTML in your browser to see things like fonts/spacing/etc., can't you?

John Doe replied

It's a screenshot..

David replied

If all you have is a screen shot then all you can do is approximate it. If whoever gave you the screen shot wants you to replicate the original code exactly then they should provide you with the original code.

John Doe replied

i forgot to mention this is an assignment question.

I will say that the font appears to be sans-seriff because it doesn't have the extra markings on the letters. Maybe try out some fonts in Word to see if you can match the font. Maybe arial?


2 Answers :
wmeade answered

This is just a wild guess but the font you're looking for may be "Calibri" or something very similar. You can add the font-family as an inline style to your body tag and everything in the table will inherit the font.

<body style="font-family:Calibri;"> and here's a demo of it in action.

The spacing seems fine as is, however if you need to make adjustments you can do so with padding, margin, or even cellpadding.

This will pad the space in all the cells by 10: <table border="1" cellpadding="10">

This will pad the top of the cell by 10px: <td rowspan="2" style="padding-top:10px;">

David answered

As per the font, is there a way to set a default font for all HTML documents to use? If so, how?

If it's something for "all HTML documents" to use, then it would be a browser setting. You're probably on your own for that one. But if you want something for all of the content in this document to use, that's easy with CSS. Something like this:

<style>
    body {
        font-family: Arial;
        font-size: 1em;
        color: #000;
    }
</style>

Putting that in the head of the HTML would apply that styling to the entire contents of the body tag, including all descendants. (You can also put the CSS code in a separate file and use a <link> tag to reference it in the head. As the code grows in complexity, this quickly becomes a preferred approach.)

For the spacing, I have no idea. I tried all kinds of combinations of <br>, <pre>, <div>.. etc.

I'd use CSS for this as well. First, identify the element(s) you want to target. An id or a class is often a good approach. For example:

<td rowspan="2" id="column3Cell">

Then in the CSS you can target that element and apply styling to it:

#column3Cell {
    padding-top: 10px;
}

Adjust as necessary. Since the goal here is to replicate a screen shot as exactly as possible, approximating it is going to take some tweaking and trial-and-error. But there is a lot you can do with CSS styles here.

John Doe replied
Thank you David. All of the teacher's examples seem to have the same font. I'll ask him if his browser uses that font as a default.;