How to display a webpage inside <td> in a table in HTML?

454 Views Asked by dunubh At 01 October 2021 at 14:31

Top.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Top Page</title>
  </head>
  <body bgcolor="yellow">
    <table border="0" width="100%">
      <tr>
        <td align="center" bgcolor="white">
          <img src="./Img/Logo.jpg" alt="logo" />
        </td>
        <td align="center" bgcolor="white">
          <h1 style="color: blue">Web Client Development</h1>
        </td>
        <td bgcolor="white" style="width: 500px; text-align: center">
          <p>
            <!-- <a href="./Forms/Pages/inputform.html" target="Content_Frame"
              >User <br />
              Logon</a
            > -->
            <a href="./Forms/Pages/userLogonForm.html" target=""
              >User <br />
              Logon</a
            >
          </p>
        </td>
      </tr>
    </table>
  </body>
</html>

In that 'user logon' area I want to open a UserLogon.html which goes like

UserLogon.html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>User Logon Form</title>
    <script type="text/javascript">
      function submitCredentials() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        alert("Username: " + username + "\nPassword: " + password);
      }
      function resetCredentials() {
        document.getElementById("userLogonForm").reset();
      }
    </script>
  </head>
  <body>
    <form action="" id="userLogonForm">
      <label for="username">Username : </label>
      <input
        type="text"
        id="username"
        name="username"
        placeholder="Enter Username"
      />
      <br /><br />
      <label for="password">Password : </label>
      <input
        type="password"
        id="password"
        name="password"
        placeholder="Enter Password"
      /><br /><br />
      <button type="button" onclick="submitCredentials()">Submit</button>
      <button
        type="button"
        onclick="resetCredentials()"
        style="margin-left: 100px"
      >
        Reset
      </button>
    </form>
  </body>
</html>

My Top.html has three sections of <td> , One has a logo image, second one has a normal heading, the third is where I want to display my form which asks for username and password (UserLogon.html) The problem is when I click on User Logon area it expands my UserLogon.html page for the entire area (I guess all three <td>), whereas I want to display that UserLogon.html form in my third <td> tag only. How do I keep the size fixed to that particular <td> only

Note: For the whole website I am using framesets

Original Q&A

How to display a webpage inside <td> in a table in HTML?

There are 0 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-TABLE

Related Questions in FRAMESET

Trending Questions

Popular # Hahtags

Popular Questions