Text alignment without using table in html and css

Question

I'm trying to learn HTML and CSS and using the old-school approach by creating a login page with three input controls (two text and one button). However, I'm using <table></table> for the alignment issues of textboxes. But I've read somewhere that using tables is not considered a good approach. This is what I'm doing:

Home.html

<div>
    <table>
        <thead>
            <tr><th><span>Login Page</span></th></tr>
        </thead>
        <tbody>
            <tr>
            <th><label>Username:</label></th>
            <td><input type="text" value="" /></td>
            </tr>
            <tr>
                <th><label>Password:</label></th>
                <td><input type="text" value="" /></td>
            </tr>
            <tr>
                <td><input type="button" value="Submit" /></td>
            </tr>
        </tbody>
    </table>
</div>

However, I'm using some beginner stuff of CSS to align input controls without using tables and this is what I'm trying:

Home.html

<div class="box">
    <span>Login Page</span>
    <br />
    <span>
        <label>Username:</label>
        <input type="text" value="" />
        <br />
        <label>Password:</label>
        <input type="text" value="" />
        <br />
        <input type="button" value="Submit" />
    </span>
</div>

style.css

.box {
   margin: 10px 10px 10px 10px;
   border: dotted 2px #fff;
   width: 500px;
}

.box span:first-child {
    border: dotted 1px;
    margin-left: 30%;
    font-family: Arial, sans-serif;
    width: 50%;
}

.box span label:nth-of-type(odd)
{
    color:blue;
    font-family: Arial, sans-serif;
}

.box span label:nth-of-type(even)
{
    color: red;
    font-family: Arial, sans-serif;
    display: inline-block;
}

My concern is using css, I'm able to align the input controls but I have to use multiple break tags ( <br /> ) and also extra code for alignment which is easier by simply using the <table> tag. Can someone suggest me the standard approach and either I'm on the right path or not?

Answer 1

Although tables are a very good approach for forms but I prefer the much shorter and easier method ie CSS tables

Here is a code:

 form { display: table; } p { display: table-row; } label { display: table-cell; } input { display: table-cell; } 

 <form> <p> <label for="a">Short label:</label> <input id="a" type="text"> </p> <p> <label for="b">Very very very long label:</label> <input id="b" type="text"> </p> </form> 

Answer 2

As a small addition to the things that are said already, I would recommend you to consider an option to use a separate container for a single form control and its label. Like this:

<form>
    <div class="input-group">
        <label for="name">Username:</label>
        <input type="text" id="name" value="" />
    </div>
    <div class="input-group">
        <label for="password">Password:</label>
      <input type="text" id="password" value="" />
    </div>
</form>

Perhaps, one might say this is redundant, but from my perspective, it gives you more control during positioning. On the other hand, Michael Seltenreich is making a good point. I still find tables used for forms in many places, although I'd prefer to keep away from this method.

PS In case you want to spread labels and inputs horizontally, you would probably want to use flexboxes.

Answer 3

@iSahilSharma Please find following code without using table. I hope you were expecting the same. A part from it just a suggestion that start using Bootstrap framework instead of using custom coding.

 .main_container{ width:100%; } .inner_box { margin: 40px auto; width: 30%; } .inner_box span{ clear: both; display: block; } .inner_box span:first-child{ margin-bottom:10px; } .inner_box span:nth-child(n+2){ margin-bottom:20px; } 

 <div class="main_container"> <div class="inner_box"> <span>Login Page</span> <span> <label>Username:</label> <input type="text" value="" /> </span> <span> <label>Password:</label> <input type="text" value="" /> </span> <span> <input type="button" value="Submit" /> </span> </div> </div> 

Answer 4

Using table is not always good. One way to do is

   <div class="form-wrap">
     <h2>Login Form</h2>
     <div class="form-field">
       <label>User Name</label>
       <input type="text" value="" />
     </div>
     <div class="form-field">
       <label>Password</label>
       <input type="text" value="" />
     </div>
     <input type="button" value="Submit" />
    </div>

CSS:

.form-field label {
  width: 80px;
  display: inline-block;
}
.form-field {
  margin-bottom: 10px;
}

link to codepen

Answer 5

出于多种原因，表不是一种好的方法，但是表非常适合您要创建的类型的表格。