Can't define HTML table height-CodePudding

I'm working on a school project, where we have to design a website with html 4.01 and must not use CSS at all. My Question is, how can I expand a table over the whole window height? I have tried the height attribute with a percantage value, but it didn't work. I couldn't find any good solutions for my problem since all of them used inline CSS or the style tag. here is my code:

<!DOCTYPE HTML>
<html lang="en-GB">
    <head>
        <title>Horse Audio</title>
    </head>
    <body>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
            <tbody><tr bgcolor="#d1bc8a">
                <td width="4%">
                    <center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
                </td>
                <td>
                    <font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
                </td>
                <td width="5px" bgcolor="#a99972"></td>
                <td width="10%">
                    <center>Contact</center>
                </td>
                <td width="5px" bgcolor="#a99972"></td>
                <td width="10%">
                    <center>Product</center>
                </td>
                <td width="5px" bgcolor="#a99972"></td>
                <td width="10%">
                    <center>FAQ</center>
                </td>
                <td width="5px" bgcolor="#a99972"></td>
                <td width="25%">
                    <center>Search</center>
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <center>Test</center>
                </td>
            </tr>
            <tr>
                <td colspan="5" bgcolor="#322c1d">
                    Test
                </td>
            </tr>
            </tbody></table>
    </body>
</html>

CodePudding user response：

Add style="height: 100vh;" on your table element.

<!DOCTYPE HTML>
<html lang="en-GB">
    <head>
        <title>Horse Audio</title>
    </head>
    <body>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8" style="height: 100vh;">
            <tbody><tr bgcolor="#d1bc8a">
                <td width="4%">
                    <center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
                </td>
                <td>
                    <font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
                </td>
                <td width="5px" bgcolor="#a99972"></td>
                <td width="10%">
                    <center>Contact</center>
                </td>
                <td width="5px" bgcolor="#a99972"></td>
                <td width="10%">
                    <center>Product</center>
                </td>
                <td width="5px" bgcolor="#a99972"></td>
                <td width="10%">
                    <center>FAQ</center>
                </td>
                <td width="5px" bgcolor="#a99972"></td>
                <td width="25%">
                    <center>Search</center>
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <center>Test</center>
                </td>
            </tr>
            <tr>
                <td colspan="5" bgcolor="#322c1d">
                    Test
                </td>
            </tr>
            </tbody></table>
    </body>
</html>

CodePudding user response：

You should set the height of <body> and <html> to 100% too. Then you can set the height of element with 100%.

body, html {
  height: 100%;
}

table {
  height: 100%;
}