How to Style and Align Forms Without Tables

How to style and align forms without tables?

This might not get a lot of support but here's my two cents:

In some situations tables are easier for layout; such as three columns or forms (albeit there are some great suggestions here for doing a pure css form layout so don't ignore those either.)

Processes and methodologies can make good servants but are poor masters.
   - Mark Dowd, John McDonald & Justin Schuh 
     in "The Art of Software Security Assessment"

I believe that this quote very strongly applies to this situation. If your table layout is working for you, not causing accessibility issues and isn't broken - then don't fix it.

Phrases like: "you should", "must", "always" - make me scared, because one-size-doesn't-fit-all! Take zealots with a grain of salt.

Is such alignment achievable without table?

I found a much easier way to do this by accident. Say you have the following:

<div class='top'>
  <div>Something else</div>
  <div class='a'>
    <div>Some text 1</div>
    <div>Some text 2</div>
  </div>
  <div class='a'>
    <div>Some text 3</div>
    <div>Some text 4</div>
  </div>
</div>

You can align Some text 1 and Some text 2 using css table display styling like this:

.a {
  display: table-row;
}
.a div {
  display: table-cell;
}

The coolest thing is that as long as the 'top' div is NOT styled display: table, then other things like "Something else" can be ignored in terms of alignment. If the 'top' div IS styled display: table, then "Some text 1" will be aligned with "Something else" (ie it treats all its children like table rows, even if they have a different display style).

This works in Chrome, not sure if its supposed to behave this way, but I'm glad it works.

  .a {      display: table-row;    }    .a div {      display: table-cell;    }

   <div class='top'>      <div>Something else</div>      <div class='a'>        <div>Some text 1</div>        <div>Some text 2</div>      </div>      <div class='a'>        <div>Some text 3</div>        <div>Some text 4</div>      </div>    </div>

How to align input forms in HTML

Another example, this uses CSS, I simply put the form in a div with the container class. And specified that input elements contained within are to be 100% of the container width and not have any elements on either side.

.container {  width: 500px;  clear: both;}
.container input {  width: 100%;  clear: both;}

<html>
<head>  <title>Example form</title></head>
<body>  <div class="container">    <form>      <label>First Name</label>      <input type="text" name="first"><br />      <label>Last Name</label>      <input type="text" name="last"><br />      <label>Email</label>      <input type="text" name="email"><br />    </form>  </div></body>
</html>

Text alignment without using table in html and css

@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>

Can you do this HTML layout without using tables?

There is nothing wrong with using the tools that are available to you to do the job quickly and correctly.

In this case a table worked perfectly.

I personally would have used a table for this.

I think nested tables should be avoided, things can get messy.

form fields not aligning properly when using CSS table

Give width: 100%; to form>div>input, form>div>textarea and following css:

input[type="submit"], input[type="reset"] {
    display: inline-block;
    width: 48%;
}

will make it as per your expected output.

Working Fiddle

How to Style and Align Forms Without Tables