Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Tabel Taak</title>
    <style>
        table, td, th{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th colspan="3"><h2>Een website structuur geven met tabellen</h2></th>
        </tr>
        <tr>
            <td>Voorbeeld 1</td>
            <td rowspan="4">
                In het midden plaatsen we een foto die deze les typeert
                <br />
                <div class="container"
                     style="text-align: center; margin-top: 5em;">
                    <!-- Image to be enlarged and onclick() function call-->
                    <img src="Schermafbeelding 2023-03-31 103534.png"
                         onclick="enlargeImg()" id="img1" />
                    <br /><br /><br />
                    <!-- Button to reset the Image size -->
                    <br />
                    <button onclick="resetImg()">Reset</button>
                </div>
                <script>
                    // Get the img object using its Id
                    img = document.getElementById("img1");
                    // Function to increase image size
                    function enlargeImg() {
                        // Set image size to 1.5 times original
                        img.style.transform = "scale(1.5)";
                        // Animation effect
                        img.style.transition = "transform 0.25s ease";
                    }
                    // Function to reset image size
                    function resetImg() {
                        // Set image size to original
                        img.style.transform = "scale(1)";
                        img.style.transition = "transform 0.25s ease";
                    }
                </script>
                <p>Als we over deze foto gaan krijgen we een tooltip</p>
                <p>Als we op de figuur klikken word deze op ware grootte in een nieuw venster getoond</p>
            </td>
            <td rowspan="2">
                Soorten lijsten
                <ul>
                    <li>Genummerde lijsten</li>
                    <li>Ongenummerde lijsten</li>
                    <li>Definitielijsten</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>Voorbeeld 2</td>
        </tr>
        <tr>
            <td>Voorbeeld 3</td>
            <td rowspan="2">
                Tabellen opbouwen
                <ol>
                    <li>Met de &lt;table&gt; tag</li>
                    <li>Dan rijen opbouwen met de &lt;tr&gt; tag</li>
                    <li>
                        <dl>
                            <dt></dt>Binnen de rijen hebben we
                            <dd>de &lt;td&gt; tag of</dd>
                            <dd>de &lt;th&gt; tag</dd>
                        </dl>
                    </li>
                </ol>
            </td>

        </tr>
        <tr>
            <td>Voorbeeld 4</td>
        </tr>
    </table>

</body>
</html>