How do I fix this html code to make the required table?

Question

I have to make a table using the table element in HTML. The table should look like this: required Table image

But at the moment my table looks like this: My Table image I've tried to fix it numerous times. but I just can not figure it out. heres my HTML code aswell. Please help

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8 />
    <title>Page header</title>
</head>
    <body>
        <table border="1" width="100%"> 
            <tr>    
                <td colspan=4>Page Header </td>
            </tr>       

            <tr>
                <td rowspan=2>Menu: </td>
                <td> Advertisement Space </td>
                <td> Blog Links </td>
            </tr>

            <tr>
                <td> Main Content Area</td>
            </tr>

            <tr>
                <td colspan=4>Footer </td>
            </tr>
    </body>
</html>

You don't have tabular data there, so you shouldn't be using a table. We've had CSS for almost two decades now, it is the correct tool for performing layout on the WWW. — Quentin, Mar 29 '16 at 13:46
Only use tables if it's tabular data! Create the layout with divs instead. Maybe something like this http://www.w3schools.com/html/html_layout.asp — P Lysenius, Mar 29 '16 at 13:50

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

Just correct with:

<td rowspan="2"> Blog Links </td>

Side comment: you seem to be building the layout of the page using html tables. Bad idea, read this.

Also, html attributes, to be correct, require quotes, i.e. <elem attrib="value">

edited May 23 '17 at 12:15

Community

1
1

answered Mar 29 '16 at 13:47

kebs

6,387
4
41
70

score 0 · Answer 2 · answered Mar 29 '16 at 13:48

0

Close off your table:

<table border="1" width>Table data...</table>

answered Mar 29 '16 at 13:48

TJS UK

111
2
12

Florian-Rh · Accepted Answer · 2016-03-29T15:07:10.307

The HTML below creats a table like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8 />
    <title>Page header</title>
</head>
    <body>
        <table border="1" width="100%"> 
            <tr>    
                <td colspan=4>Page Header </td>
            </tr>       

            <tr>
                <td rowspan=2>Menu: </td>
                <td colspan=2> Advertisement Space </td>

            </tr>

            <tr>
                <td> Main Content Area</td>
                <td> Blog Links </td>
            </tr>

            <tr>
                <td colspan=4>Footer </td>
            </tr>
    </body>
</html>

What you need to change:

Set colspan for the "Advertisment Space"
Move "Blog Links" to the same row as "Main Content Area"

Although I must say that tables are absolutely not state of the art when it comes to designing a website layout. <table> is used do display data (like a list or, well, a table). <div> and <span> should be used to apply a layout to a website

score 0 · Answer 4 · edited Mar 29 '16 at 13:50

0

Give menu rowspan 4 and change accordingly.

edited Mar 29 '16 at 13:50

Kyll

7,036
7
41
64

answered Mar 29 '16 at 13:49

Vaibhav Save

56
2
10

How do I fix this html code to make the required table?

4 Answers4