CODEWITHSUNDEEP
htmlcsshtml-table
user691856
user691856

Reputation: 185

I have no style

enter image description here

I am tearing my hair out on this one and it seems I am probably not searching the right terms and the google results I get seems to be general layout type of questions.

I have some data that I wish to represent in a web page. There are some 20~30 fields of different data. If I were to do it with what I know, I would so something like this(total of 3 columns and 30 rows each field is different data):

<table>
<tr><td>Field1:</td><td><input id="dataforField1"></input></td><td>Field2:/td><td><input id="dataforfield2"></td></tr>
<tr><td>Field3:</td><td><input id="dataforField3"></input></td><td>Field4:/td><td><input id="dataforfield4"></td></tr>
</table>

However I have been reading lately that div is much preferred when presenting non-tabular data. So I attempted to do this:

<div style="float:left;">
<ul>
<li>Field1</li>
<li>Field2</li>
<li>Field3</li>
</ul>
</div>
<div style="float:left;">
<ul>
<li><input id="tag1...</li>
<li><input id="tag2...</li>
<li><input id="tag3...</li>
</ul>
</div>

but my field labels are not lining up with my data input elements. Field1 seems to match input1 horizontally. But when I get to field10, it is off by a lot. I tried it without ul and li and use br after each, but I can't seem to get them to line up.

Question:

  1. How do I get them to match if I don't do table?
  2. I need clarification on the word "tabular". If my data were a table, it would only ever going to have 1 row. When is it okay to use table?
  3. What do people use to line things up when they are trying to implement similar things?

Edit: I want Field1 to line up horizontally with input tag1 and so on. Edit2: Added a picture to show how things are not lining up. it would be the same without li.

Upvotes: 2

Views: 65

Answers (2)

Shomz
Shomz

Reputation: 37711

For labels and inputs you should use, you guessed it: labels and inputs. Put each pair under the same parent, make them inline-blocks with a fixed width and you're good to go. No need for external tools, this is as basic as it gets.

label {
  margin-right: 10px;
  width: 120px;
  display: inline-block;
}
<div style="float:left;">
<ul>
  <li><label>Field1</label><input/></li>
  <li><label>Field2</label><input/></li>
  <li><label>Field3</label><input/></li>
  <li><label>Field4</label><input/></li>
  <li><label>Field5</label><input/></li>
  <li><label>Long Field Name</label><input/></li>
  <li><label>Field6</label><input/></li>
  <li><label>Field7</label><input/></li>
</ul>
</div>

Upvotes: 0

Ariel Weinberger
Ariel Weinberger

Reputation: 2301

I would generally suggest adopting a grid system for this purpose. There are many great ones. My favorite one for web development is Bootstrap's grid. Bootstrap as a framework is amazing as well.

I will also add a quote of my comment regarding this:

... It is really recommended to only use a table when you are actually willing to show a real table with information in it. The old way of presenting forms in tables to achieve alignment is just a no-no these days. Grid systems do it better and they are more responsive.

However.

The disalignment was caused by loss of relativity between the text (labels) and the input fields. As the list goes longer, the proportions are losing. This is because the height of the text is not the same as the height of the input field.

CSS:

li {
    height: 40px;
}

This makes sure all <li> elements will have the same height. Of course it's recommended to apply the style to a class and not directly to an element, but this is just for the sake of the solution.

CodePen: http://codepen.io/arielweinberger/pen/jqveoX

I haven't managed to re-produce what you said you are experiencing.

Upvotes: 3

Related Questions