Reputation: 220

How can I get the headers to align properly with the columns of the form?

Here is how it looks right now :

https://i.sstatic.net/sjh8P.png

What's happening is the columns of the form I created doesn't align with my headers. I also would like it to re-size itself automatically when the browser size is re-sized too. Any help is greatly appreciated. Here is my code look like:

<html>
    <body>  
        <h1 style="font-family:verdana; font-size:160%; text-align:center;"> W1 Resource Management</h1>        
        <p style="font-family:verdana; font-size:100%;"><i><strong>Make a reservation.</strong></i></p>
        <table>
          <tr>
            <th>UserID</th>
            <th>Resource Name</th>
            <th>Resource Type</th>
            <th>Location</th>           
            <th>Reservation Time</th>
          </tr>
        </table>

        <form id="testformid" method="post" action="/insert.php">
            <input type="text" name="userID">   
            <input type="text" name="resName">
            <input type="text" name="resType">
            <input type="text" name="resLoc">
            <input type="number" name="resTime">
            <input type="submit" value="Reserve" onclick="insertdb(resID,"","",true)" >         
        </form>     
    <body>  
</html>

I wrote my stylesheet like this :

input[type=text] {
    width: 15px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #555;
    outline: none;
}

table {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 50%;
}

Upvotes: 0

Answers (3)

TheoretiCAL

Reputation: 20571

Your table and form are two separate containers, so there is nothing forcing them to be aligned. Consider putting your table inside your form:

<html>
    <body>  
        <h1 style="font-family:verdana; font-size:160%; text-align:center;"> W1 Resource Management</h1>        
        <p style="font-family:verdana; font-size:100%;"><i><strong>Make a reservation.</strong></i></p>

        <form id="testformid" method="post" action="/insert.php">
        <table>
          <thead>
          <tr>
            <th>UserID</th>
            <th>Resource Name</th>
            <th>Resource Type</th>
            <th>Location</th>           
            <th>Reservation Time</th>
            <th></th>
           </tr>
           </thead>
         <tbody>
          <tr>
            <td><input type="text" name="userID"></td> 
            <td><input type="text" name="resName"></td>
            <td><input type="text" name="resType"></td>
            <td><input type="text" name="resLoc"></td>
            <td><input type="number" name="resTime"></td>
            <td><input type="submit" value="Reserve" onclick="insertdb(resID,"","",true)">   </td>
          <tr>
         </tbody>
        </table>     
        </form>     
    <body>  
</html>

Upvotes: 1