CODEWITHSUNDEEP
htmlcsshtml-table
python
python

Reputation: 497

Html table td alignment in mutiple rows

I am trying to develop a form, which has Emp details and Personal info details i need to display in the the below way.

This is my code

            <table style="border: 1px solid; width: 900px; height: 200px; table-layout:fixed">

            <tr>
            <td> 
            <label for="Employee" style="height:20px">Employee:</label>
            </td>
            <td>
            <label for="Id" style="height: 20px">Id</label>
            </td>
            <td>
            <input type="text" id="txtId" />
            </td>
            <td>
            <label for="Designation" style="height:20px">Designation</label>
            </td>
            <td>
            <input type="text" id="txtDesig" />
            </td>
            </tr>

        
             <tr>
             <td></td>
             <td> <label for="Mail" style="height: 20px">Mail</label></td>
             <td> <input type="text" id="Text3" /> </td>
             <td>  <label style="height: 20px">Ext</label> </td>
             <td>  <input type="text" id="Text4" /> </td>
             </tr>

             <tr>
             <td> 
             <label for="PersonalInfo" style="height:20px">Personal Info:</label>
             </td>
             <td> 
             <label for="Name" style="height:20px">Name:</label>
             </td>
             <td>
             <input type="text" id="txtName" />
             </td>
             </tr>

             <tr>
             <td> 
             </td>
             <td> 
             <label for="City" style="height:20px">City:</label>
             </td>
             <td>
             <input type="text" id="txtCity" />
             </td>
             </tr>

             <tr>
             <td> 
             </td>
             <td> 
             <label for="State" style="height:20px">State:</label>
             </td>
             <td>
             <input type="text" id="txtState" />
             </td>
             </tr>
             </table>

The issue is the textboxes are not in the same line and the form looks weird.

Upvotes: 1

Views: 69

Answers (3)

Michael Heath
Michael Heath

Reputation: 174

I'm guessing you have to use tables for some reason? If not consider moving to using something a little more practical. Tables are cumbersome for this sort of thing. Having a column based approach would make a lot more sense.

In order to do this with tables, you're going to have to nest them. I only did a portion of the table to give you an idea of how to do it. So don't copy paste this. I took the IDs out to make it simpler to read. You'll obviously want those in there. Also when you run the code snippet make sure you scroll all the way left as the width is set to 1500. You can edit this when you apply it to your code. Just change where it says width: 33% to whatever you need.

<table style="border: 1px solid; width: 1500px; height: 400px;">
  <tr>
    <td style="width:33%;">
        <label style="height:20px; width:33%;">Employee:</label></td>
    </td>
    <td style="width:33%;">
       <table>
          <tr>
             <td><label height: 20px ">Id</label></td>
             <td><input type="text " /></td>
             <td><label id="lblDesig " height: 20px">Mail</label></td>
             <td><input type="text" id="txtDesig" /></td>
           </tr>
           <tr>
             <td><label style="height:20px;">Designation</label</td> 
             <td><input type="text" id="txtDesig" /></td>
             <td><label id="lblId" height: 20px ">Ext</label></td>
             <td><input type="text" id="txtDesig" /></td>
           </tr>
        </table>
    </td>
  </tr>
</table>

Upvotes: 0

Stephen Zeng
Stephen Zeng

Reputation: 2818

Normally table shouldn't be used for layout. Suggest using Bootstrap Grid system and Forms: http://getbootstrap.com/css/#grid

It gives you a modern/professional look, as well as handles different resolutions/devices for you nicely.

Here is a simple example:

<div class="row">
    <div class="col-lg-2">
        <label>Employee</label>
    </div>
    <div class="col-lg-5">
        <div class="form-group">
            <label for="Id" class="col-sm-2 control-label">ID</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="Id">
            </div>
        </div>
        <div class="form-group">
            <label for="Mail" class="col-sm-2 control-label">Mail</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="Mail">
            </div>
        </div>
    </div>
    <div class="col-lg-5"></div>
</div>

Upvotes: 0

Ricardo Mota
Ricardo Mota

Reputation: 161

You can start like this:

table{border: 1px solid; width: 1500px;}
        table tr td label{width: 95px;display: inline-flex;}
<table>
  <tr>
    <td>
      <label>Employee:</label>
    </td>
    <td>
      <label id="lblId">Id</label>
        <input type="text" id="txtId " />
        <label id="lblDesig">Designation</label>
      <input type="text" id="txtDesig" />
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <label id="Label3">Mail</label>
                <input type="text" id="Text3 " />
                 <label id="Label4 ">Ext</label>
      <input type="text" id="Text4" />
    </td>
  </tr>
  <tr>
    <td>
      <label>Personal Info:</label>
    </td>
    <td>
      <label>Name:</label>
      <input type="text" id="txtName" />
    </td>
  </tr>
  <tr>
    <td>

    </td>
    <td>
      <label>City:</label>
      <input type="text" id="txtCity" />
    </td>
  </tr>
  <tr>
    <td>

    </td>
    <td>
      <label>State:</label>
      <input type="text" id="txtState" />
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions