CODEWITHSUNDEEP
html
ground
ground

Reputation: 116

Something wrong in html table

I creating sign up form similar as gmail,but I can't change size on td tags in table row where user choose his birthday.Probably because I set feasts td to colspan=2.How to fix this lines of code to look fine visually?

<!DOCTYPE html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" type="text/css" href="styleForme.css">
</head>
<body>
   <div style="background-color: whitesmoke; width: 320px; height: 800px; position: relative; left: 800px; padding: 20px">
  <form>
     <table style="table-layout: auto">
        <!--Unos imena i prezimena-->
        <tr>
           <td style="font-weight: bold ;font-family: monospace;font-size: 14px;">Name</td>
        </tr>
        <tr>
           <td>
              <input type="text" name="FirstName" placeholder="First" style="width: 150px; height: 20px">
           </td>
           <td>
              <input type="text" name="LastName" placeholder="Last" style="width: 150px; height: 20px">
           </td>
        </tr>
        <tr>
           <td>&nbsp;</td>
        </tr>
        <!-- Kreiranje username-a -->
        <tr>
           <td style="font-weight: bold;font-family: monospace;font-size: 14px;" colspan="2">Choose your username</td>
        </tr>
        <tr>
           <td colspan="2">
              <input type="text" placeholder="@gmail.com" style="width: 308px; height: 20px">
           </td>
        </tr>
        <tr>
           <td>&nbsp;</td>
        </tr>
        <!--Kreiranje sifre-->
        <tr>
           <td style="font-weight: bold; font-family: monospace;font-size: 14px;">Create a password</td>
        </tr>
        <tr>
           <td colspan="2">
              <input type="password" style="width: 308px; height: 20px" >
           </td>
        </tr>
        <tr>
           <td>&nbsp;</td>
        </tr>
        <!--Potvrda sifre-->
        <tr>
           <td colspan="2" style="font-weight: bold; font-family: monospace;font-size: 14px;">Confirm your password</td>
        </tr>
        <tr>
           <td colspan="2">
              <input type="password" style="width: 308px; height: 20px" >
           </td>
        </tr>
        <tr>
           <td>&nbsp;</td>
        </tr>
        <!--Kreiranje datuma rodjenja-->
        <tr>
           <td colspan="2" style="font-weight: bold; font-family: monospace;font-size: 14px;">Birthday</td>
        </tr>
        <tr>
           <td>
              <select>
                 <option>January</option>
                 <option>February</option>
                 <option>March</option>
                 <option>April</option>
                 <option>May</option>
                 <option>June</option>
                 <option>July</option>
                 <option>August</option>
                 <option>September</option>
                 <option>October</option>
                 <option>November</option>
                 <option>December</option>
              </select>
           </td>
           <td>
              <input type="text" maxlength="2" placeholder="Day" style="width: 50px">
           </td>
           <td>
              <input type="text" maxlength="4" placeholder="Year" style="width: 50px">
           </td>
        </tr>
     </table>
  </form>
   </div>
</body>
</html>

Upvotes: 0

Views: 57

Answers (1)

smoggers
smoggers

Reputation: 3192

How about using display:table for each <tr> and display:table-cell; for each <td>

(Note: using fixed pixel sizes for height/width attributes is generally not best practice these days due to the varying nature of screen sizes. Consider using a responsive framework like Foundation going forward)

<body>
  <div style="background-color: whitesmoke; width: 320px; height: 800px; position: relative; left: 800px; padding: 20px">
    <form>
      <table style="table-layout: auto">
        <!--Unos imena i prezimena-->
        <tr>
          <td style="font-weight: bold ;font-family: monospace;font-size: 14px;">Name</td>
        </tr>
        <tr style="display:table">
          <td>
            <input type="text" name="FirstName" placeholder="First" style="width: 150px; height: 20px">
          </td>
          <td>
            <input type="text" name="LastName" placeholder="Last" style="width: 150px; height: 20px">
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <!-- Kreiranje username-a -->
        <tr>
          <td style="font-weight: bold;font-family: monospace;font-size: 14px;" colspan="2">Choose your username</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" placeholder="@gmail.com" style="width: 308px; height: 20px">
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <!--Kreiranje sifre-->
        <tr>
          <td style="font-weight: bold; font-family: monospace;font-size: 14px;">Create a password</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="password" style="width: 308px; height: 20px">
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <!--Potvrda sifre-->
        <tr>
          <td colspan="2" style="font-weight: bold; font-family: monospace;font-size: 14px;">Confirm your password</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="password" style="width: 308px; height: 20px">
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr style="display:table">
          <td style="width:70px; display:table-cell; margin-left: 0;">
            <select>
              <option>January</option>
              <option>February</option>
              <option>March</option>
              <option>April</option>
              <option>May</option>
              <option>June</option>
              <option>July</option>
              <option>August</option>
              <option>September</option>
              <option>October</option>
              <option>November</option>
              <option>December</option>
            </select>
          </td>
          <td>
            <input type="text" maxlength="2" placeholder="Day" style="width:70px; display:table-cell; margin: 0 34px">
          </td>
          <td>
            <input type="text" maxlength="4" placeholder="Year" style="width:70px; display:table-cell; margin-right: 0;">
          </td>
        </tr>
      </table>
    </form>
  </div>
</body>

Upvotes: 1

Related Questions