Is such alignment achievable without ?

Asked Jun 13 '12 at 18:59

Active Oct 15 '17 at 11:35

Viewed 1.8k times

14

My goal is an alignment as shown in the attached image (the fields on the left may have any width, but the ones on the right should begin at the same `X` coordinate).

Right now I am using a simple table code to achieve this:

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

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

EDIT: since I still occasionally get a notification on this question from people who (presumably) are just starting out with HTML like I was when I made it, please refer to the accepted answer by B T as this is by far the best way to achieve this functionality. The question suggested as a "possible duplicate" (31 May 2016) does not currently offer the table-row/table-column CSS-based approach and requires you to do guess work.

html css optimization html-table

edited Oct 15 '17 at 11:35
Brian Tompsett - 汤莱恩

5,753

72

57

129

asked Jun 13 '12 at 18:59
AM-

871

1

10

20

4

What's wrong with a table? This is what they are meant for. Anything else would probably be more complex than using a table. – Will Jun 13 '12 at 19:01

2

As I said, all the design articles I've read discourage the use of tables, hence the question. – AM- Jun 13 '12 at 19:02

1

I would agree that table's isn't the best way to go here. Yes, tables get the job done, but they are not semantically correct, as you are not creating a table. It is very trivial to achieve the same using CSS (see my answer) – Ayush Jun 13 '12 at 19:03

3

Using tables for layout is not good design practice. Use tables for tabular data, that what it was intended for. – saluce Jun 13 '12 at 19:04

Possible duplicate of [Forms - Can they be done without tables?](http://stackoverflow.com/questions/591539/forms-can-they-be-done-without-tables) – Ciro Santilli OurBigBook.com May 30 '16 at 22:03

@CiroSantilli巴拿馬文件六四事件法轮功 Please see my edit on why this question should be preferred over the one at https://stackoverflow.com/questions/591539/can-form-styling-be-done-without-tables – AM- May 31 '16 at 10:49

@AM- I propose this: copy / adapt that answer to the other question ;-) – Ciro Santilli OurBigBook.com May 31 '16 at 11:37

5 Answers5

14

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

edited Jun 05 '16 at 13:24
parseguy

129

2

17

answered Jul 17 '15 at 01:03
B T

57,525

34

189

207

2

Much more robust and maintainable solution than those above as it requires no width-guessing. – P-Gn Nov 10 '15 at 20:11

This is the first solution I've seen that avoids specifying widths and behaves just like a table. Perfect! – Greg Jan 26 '16 at 18:35

I needed this because I wanted to extract a search result into it's own component but didn't want it's top-level tag to be a `
`. This was a perfect solution! Thanks – ScottJun 22 '20 at 18:15

5

While it is possible to achieve the same with tables, it would be considered semantically incorrect to use a table for the purpose of layout. Especially since you can achieve the same using just a line or two of CSS.

Give your labels a fixed width (something larger than your longest 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

answered Jun 13 '12 at 19:02
Ayush

41,754

51

164

239

what happens if you omit the `display:inline-block`? (supposedly IE7 doesn't support it) – Rodolfo Jun 13 '12 at 19:07

The browser will ignore width as well, since width can only be applied to block level elements. – Ayush Jun 13 '12 at 19:23

5

Here, you could use this for getting the output required.

Using tables IMO is not bad practice, in fact they should be used where tabular data is required, or the format of data resembles a table.

However, designing a full page, or anything not to be displayed in a tabular format, using a table is discouraged, and is in fact very very wrong. Here goes a sample using a non-table structure:

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

edited Dec 29 '16 at 13:36
Laogeodritt

750

4

15

answered Jun 13 '12 at 19:18
Pranav 웃

8,469

6

38

48

One could get away of using float in the above example using `display:inline-block `, and the css IE7 Hack as `display:inline`. Updated the answer to clear the float – Pranav 웃 Jun 13 '12 at 19:51

1

using `br` this way is wrong idea http://stackoverflow.com/questions/3937515/when-to-use-br-line-breaks-vs-css-positioning – Zanshin13 Nov 08 '16 at 13:57

3

Yes, such alignment is possible. Using CSS classes, you can markup your HTML in such a way to achieve the same look of a table without the headache of using a table (or making 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'll get the layout you want.

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

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

Then, add this line below the lines already shown:

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

Example using IE7-compatible settings: http://jsfiddle.net/bbXXp/

edited Jun 13 '12 at 19:47

saluce

answered Jun 13 '12 at 19:03
saluce

13,035

3

50

67

0

True. I am learning it the hard way. I used table for alignment, and now, certain alignments are becoming bizzare in smaller screens (e.g. mobile phone, tablets etc). Hence, am switching over to div. Preferable use `<div style="display:inline-block">...</div>`, which will align automatically if the screen is smaller. Hence, my advice is that Table should be used only for genuine tables, and not for aligning controls in a body.

edited Nov 23 '16 at 06:14

Vijay Srinivas

answered Oct 21 '16 at 06:53
Vijay Srinivas

81

3

Linked

0
How to design a responsive form with vertical-aligned fields without knowing the max width of the labels?

0
Table style messed up when printing

Question

The wanted result

My goal is an alignment as shown in the attached image (the fields on the left may have any width, but the ones on the right should begin at the same X coordinate).

Right now I am using a simple table code to achieve this:

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

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

EDIT: since I still occasionally get a notification on this question from people who (presumably) are just starting out with HTML like I was when I made it, please refer to the accepted answer by B T as this is by far the best way to achieve this functionality. The question suggested as a "possible duplicate" (31 May 2016) does not currently offer the table-row/table-column CSS-based approach and requires you to do guess work.

What's wrong with a table? This is what they are meant for. Anything else would probably be more complex than using a table. — Will, Jun 13 '12 at 19:01
As I said, all the design articles I've read discourage the use of tables, hence the question. — AM-, Jun 13 '12 at 19:02
I would agree that table's isn't the best way to go here. Yes, tables get the job done, but they are not semantically correct, as you are not creating a table. It is very trivial to achieve the same using CSS (see my answer) — Ayush, Jun 13 '12 at 19:03
Using tables for layout is not good design practice. Use tables for tabular data, that what it was intended for. — saluce, Jun 13 '12 at 19:04
Possible duplicate of [Forms - Can they be done without tables?](http://stackoverflow.com/questions/591539/forms-can-they-be-done-without-tables) — Ciro Santilli OurBigBook.com, May 30 '16 at 22:03
@CiroSantilli巴拿馬文件六四事件法轮功 Please see my edit on why this question should be preferred over the one at https://stackoverflow.com/questions/591539/can-form-styling-be-done-without-tables — AM-, May 31 '16 at 10:49
@AM- I propose this: copy / adapt that answer to the other question ;-) — Ciro Santilli OurBigBook.com, May 31 '16 at 11:37

score 14 · Accepted Answer · edited Jun 05 '16 at 13:24

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>

Much more robust and maintainable solution than those above as it requires no width-guessing. — P-Gn, Nov 10 '15 at 20:11
This is the first solution I've seen that avoids specifying widths and behaves just like a table. Perfect! — Greg, Jan 26 '16 at 18:35
I needed this because I wanted to extract a search result into it's own component but didn't want it's top-level tag to be a `

score 5 · Answer 2 · answered Jun 13 '12 at 19:02

5

While it is possible to achieve the same with tables, it would be considered semantically incorrect to use a table for the purpose of layout. Especially since you can achieve the same using just a line or two of CSS.

Give your labels a fixed width (something larger than your longest 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

answered Jun 13 '12 at 19:02

Ayush

41,754
51
164
239

what happens if you omit the `display:inline-block`? (supposedly IE7 doesn't support it) – Rodolfo Jun 13 '12 at 19:07
The browser will ignore width as well, since width can only be applied to block level elements. – Ayush Jun 13 '12 at 19:23

score 5 · Answer 3 · edited Dec 29 '16 at 13:36

Here, you could use this for getting the output required.

Using tables IMO is not bad practice, in fact they should be used where tabular data is required, or the format of data resembles a table.

However, designing a full page, or anything not to be displayed in a tabular format, using a table is discouraged, and is in fact very very wrong. Here goes a sample using a non-table structure:

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

One could get away of using float in the above example using `display:inline-block `, and the css IE7 Hack as `*display:inline`. Updated the answer to clear the float — Pranav 웃, Jun 13 '12 at 19:51
using `br` this way is wrong idea http://stackoverflow.com/questions/3937515/when-to-use-br-line-breaks-vs-css-positioning — Zanshin13, Nov 08 '16 at 13:57

saluce · Answer 4 · 2012-06-13T19:47:00.973

Yes, such alignment is possible. Using CSS classes, you can markup your HTML in such a way to achieve the same look of a table without the headache of using a table (or making 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'll get the layout you want.

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

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

Then, add this line below the lines already shown:

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

Example using IE7-compatible settings: http://jsfiddle.net/bbXXp/

Vijay Srinivas · Answer 5 · 2016-11-23T06:14:55.043

True. I am learning it the hard way. I used table for alignment, and now, certain alignments are becoming bizzare in smaller screens (e.g. mobile phone, tablets etc). Hence, am switching over to div. Preferable use <div style="display:inline-block">...</div>, which will align automatically if the screen is smaller. Hence, my advice is that Table should be used only for genuine tables, and not for aligning controls in a body.