Is such alignment possible without a <table>?

Question

My goal is alignment, as shown in the attached image (the fields on the left can have any width, but those on the right should start with the same X coordinate).

I am currently using simple table code for this:

 <table><tr> <td>Left1</td><td>Right 1</td></tr> <tr><td>Left 2</td><td>Right 2</td></tr></table> 

However, I heard that using tables is generally bad. Is there a way I could achieve the same design using CSS? The website is designed for mobile devices that may not support fancy CSS, so the code should be as simple as possible.

EDIT : since I still sometimes get notified on this issue from people who (presumably) are just starting with HTML, as I did when I did this, see BT's accepted answer as this is by far the best way to achieve this functionality. The question, proposed as a “possible duplicate” (May 31, 2016), currently does not offer a CSS / column table approach and requires that you do the work.

Answer 1

I found a much easier way to do this by accident. Let's 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 the css table display style as follows:

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

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

This works in Chrome, not sure if it should behave that 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> 

Answer 2

Here you can use this to get the desired result.

Using IMO tables is a good practice, in fact they should be used where tabular data is required, or the data format is similar to a table.

However, creating a full page or anything that does not appear in tabular format using a table is not recommended, and is actually very wrong. Here's a sample using a structure different from the table:

HTML:

 <form> <label for="name">Email: </label><input id="name" type="email" placeholder="@" /> <br/><br /> <label>Password: </label><input type="password" id="password" placeholder="*"/> </form> 

CSS:

 label { width: 80px; display: block; vertical-align: middle; float:left; clear:left; } input { border-top-left-radius:5px; border-bottom-right-radius: 10px; background: #141414; color: #fdd56c; outline: none; } 

Here is an example

Answer 3

Although you can achieve the same result with tables, it would be semantically incorrect to use a table for layout purposes. Especially since you can achieve the same thing using just a line or two of CSS.

Give your labels a fixed width (something bigger than your long label text).

 <style> label { width: 100px; display: inline-block; }​ </style> <label>Name</label> <input type="text" /> <br/> <label>Email Address</label> <input type="text" />​ 

Example

Answer 4

Yes, such alignment is possible. Using CSS classes, you can lay out your HTML in such a way as to achieve the same appearance of the table without the headache of using the table (or make the markup look ugly).

Using this CSS:

 .label { display: inline-block; width: 100px; } .inputBox { width: 200px; } 

and this HTML:

 <span class="label">E-mail:</span><input type="email"></input><br> <span class="label">Password:</span><input type="text"></input> 

You will get the desired layout.

---

To do this with IE7 support, change the CSS above:

 .label { display: block; width: 100px; float: left; clear: left; } 

Then add this line below the lines that are already shown:

 <div style="clear: left"></div> 

An example of using IE7-compatible settings: http://jsfiddle.net/bbXXp/

Answer 5

True I learn this with difficulty. I used the table for alignment, and now some alignments become bizzare on small screens (like mobile phone, tablets, etc.). Therefore, I move on to the div. The preferred use is <div style="display:inline-block">...</div> , which will automatically align if the screen is smaller. Therefore, my advice is that the Table should be used only for real tables, and not for aligning controls in the body.