i am not able to put certain columns in the correct position in html talbes

Viewed 27

I got two assignments from my school today and I wasn't able to replicate the images in html that our teachers gave us

Here is the first image: enter image description here

and here's what I made: enter image description here

and this is all the code:

<!DOCTYPE HTML>

<html>

<head>
    <title>
        pizza shop
    </title>
</head>

<body>
    <table border="1" cellpadding="11">
        <tr>
            <th colspan="4">Pizza Shop 2.0</td>
        </tr>
        <tr>
            <td>Name</td>
            <td><label for="name"></label>
                <input type="text" id="name" name="name"><br>
            </td>
        </tr>
        <tr>
            <td>Pizza topping</td>
            <td>
                <input type="radio" id="Supreme" name="Supreme" value="Supreme">
                <label for="Supreme">Supreme</label><br>
                <input type="radio" id="Vegetarian" name="Vegetarian" value="Vegetarian">
                <label for="Vegetarian">Vegetarian</label><br>
                <input type="radio" id="Hawaiian" name="Hawaiian" value="Hawaiian">
                <label for="Hawaiian">Hawaiian</label>
            </td>
        </tr>
        <tr>
            <td>Sauce</td>
            <td>
                <label for="Sauce"></label>
                <select>
                    <option value="Tomato">Tomato</option>
                    <option value="Pesto">Pesto</option>
                    <option value="Hummus">Hummus</option>
                    <option value="Buffalo sauce">Buffalo sauce</option>
                    <option value="Marinara sauce">Marinara sauce</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Optional extras</td>
            <td>
                <input type="checkbox" id="Extra Cheese" name="Extra Cheese" value="Extra Cheese">
                <label for="Extra Cheese">Extra Cheese</label>
                <input type="checkbox" id="Gluten Free Base" name="Gluten Free Base" value="Gluten Free Base">
                <label for="Gluten Free Base">Gluten Free Base</label>
            </td>
        </tr>
        <tr>
            <td colspan="4">Delivery Instructions:</td>

        </tr>
        <tr>
            <textarea id="Delivery Instructions" name="Delivery Instructions" rows="4" cols="50"></textarea>
        </tr>
    </table>
</body>

</html>

here's the second image: enter image description here

and here's what I made: enter image description here

and here's all the code:

<!DOCTYPE HTML>

<html>

<head>
    <title>
        Seminar
    </title>
</head>

<body>
    <table border="black" cellpadding="6" align="center">
        <tr>
            <th rowspan="2">Day</th>
            <th colspan="5">Seminar</th>
            <th colspan="2">Schedule</th>
        </tr>
        <tr>
            <th>Begin</th>
            <th>End</th>
            <th colspan="2">Topic</th>
        </tr>
        <tr>
            <td rowspan="2">Monday</td>
            <td rowspan="2">8:00 a.m</td>
            <td rowspan="2">5:00 p.m</td>
            <td>Introduction to XML</td>
        </tr>
        <tr>
            <td>Validity: DTD and Relax NG</td>
        </tr>
        <tr>
            <td rowspan="3">Tuesday</td>
            <td>8:00 a.m</td>
            <td>11:00 a.m</td>
            <td rowspan="2">XPath</td>
        </tr>
        <tr>
            <td>11:00 a.m</td>
            <td>2:00 p.m</td>
        </tr>
        <tr>
            <td>2:00 p.m</td>
            <td>5:00 p.m</td>
            <td>XSL Transformations</td>
        </tr>
        <tr>
            <td>Wednesday</td>
            <td>8:00 a.m</td>
            <td>12:00 p.m</td>
            <td>XSL Formatting Objects</td>
        </tr>
    </table>
</body>

</html>

I have tried to fix this many a time but i have ultimately failed that is why I have come to here to get answers

any help would be greatly appreciated

1 Answers

In assignment 1 the reason textarea is out of table is because you haven't put the textarea inside the td tag. However, according to your assignment Delivery instruction and textarea should be in same cell.

Assignment 1

<html>
<body>
    <table border="1" cellpadding="5">
        <tr>
            <th colspan="4">Pizza Shop 2.0</th>
        </tr>
        <tr>
            <td>Name</td>
            <td><label for="name"></label>
                <input type="text" id="name" name="name"><br>
            </td>
        </tr>
        <tr>
            <td>Pizza topping</td>
            <td>
                <input type="radio" id="Supreme" name="Supreme" value="Supreme">
                <label for="Supreme">Supreme</label><br>
                <input type="radio" id="Vegetarian" name="Vegetarian" value="Vegetarian">
                <label for="Vegetarian">Vegetarian</label><br>
                <input type="radio" id="Hawaiian" name="Hawaiian" value="Hawaiian">
                <label for="Hawaiian">Hawaiian</label>
            </td>
        </tr>
        <tr>
            <td>Sauce</td>
            <td>
                <label for="Sauce"></label>
                <select>
                    <option value="Tomato">Tomato</option>
                    <option value="Pesto">Pesto</option>
                    <option value="Hummus">Hummus</option>
                    <option value="Buffalo sauce">Buffalo sauce</option>
                    <option value="Marinara sauce">Marinara sauce</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Optional extras</td>
            <td>
                <input type="checkbox" id="Extra Cheese" name="Extra Cheese" value="Extra Cheese">
                <label for="Extra Cheese">Extra Cheese</label>
                <input type="checkbox" id="Gluten Free Base" name="Gluten Free Base" value="Gluten Free Base">
                <label for="Gluten Free Base">Gluten Free Base</label>
            </td>
        </tr>
        <tr>
            <td colspan="4">Delivery Instructions:<br />
            <textarea id="Delivery Instructions" name="Delivery Instructions" rows="4" cols="50"></textarea></td>
        </tr>
    </table>
</body>

</html>

Assignment 2

<!DOCTYPE HTML>

<html>

<head>
    <title>
        Seminar
    </title>
</head>

<body>
    <table border="black" cellpadding="5" align="center">
        <tr>
            <th rowspan="3" colspan ="2">Day</th>
            <th colspan="5">Seminar</th>
        </tr>
        <tr>
            <th colspan="4">Schedule</th>
            <th rowspan="2">Topic</th>
        </tr>
        <tr>
            <th colspan="2">Begin</th>
            <th colspan="2">End</th>
        </tr>
        <tr>
            <td rowspan="2" colspan="2">Monday</td>
            <td colspan="2" rowspan="2">8:00 a.m</td>
            <td colspan="2" rowspan="2">5:00 p.m</td>
            <td>Introduction to XML</td>
        </tr>
        <tr>
            <td>Validity: DTD and Relax NG</td>
        </tr>
        <tr>
            <td rowspan="3" colspan="2">Tuesday</td>
            <td colspan="2">8:00 a.m</td>
            <td colspan="2">11:00 a.m</td>
            <td rowspan="2">XPath</td>
        </tr>
        <tr>
            <td colspan="2">11:00 a.m</td>
            <td colspan="2">2:00 p.m</td>
        </tr>
        <tr>
            <td colspan="2">2:00 p.m</td>
            <td colspan="2">5:00 p.m</td>
            <td>XSL Transformations</td>
        </tr>
         <tr>
            <td colspan="2">Wednesday</td>
            <td colspan="2">8:00 a.m</td>
            <td colspan="2">12:00 p.m</td>
            <td>XSL Formatting Objects</td>
        </tr>
    </table>
</body>

</html>

Related