• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 719
  • Last Modified:

HTML table vertical alignment issues

Hi Experts,

I'm struggling with getting vertical alignment on some fields of my webpage.  Here's a simplified version of my HTML, to illustrate the problem:
<html>
<body>
  <table>
    <tr>
      <td valign="top">
        [Row 1, Col 1]
      </td>
      <td rowspan="2" valign="top">
        [Row 1+2, Col 2]
<!--
        <select multiple="multiple" size="3">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
-->
        <input type="checkbox">
      </td>
    </tr>

    <tr>
      <td>
        [Row 2, Col 1]
      </td>
    </tr>
  </table>
</body>
</html>

Open in new window


See valign1.png attached, which is what this looks like in my browser.  Note how "[Row 1+2, Col 1]" and the checkbox are vertially aligned (almost) as high as "[Row 1, Col 1]".

If I remove the comment lines ("<!--" & "-->"), activating the <select>...</select> tags, the select control appears where I would expect it to, but "[Row 1+2, Col 1]" and the checkbox drop down, to the point where "[Row 1+2, Col 1]" is slightly lower than "[Row 2, Col 1]" (see valign2.png attached).

Questions:

1. In valign1.png, why does the presence of the checkbox, cause the slight vertical-misalignment of "[Row 1+2, Col 1]" and "[Row 1, Col 1]"?
2. How can I get these to align vertically?  (I expect that putting the checkbox in a separate column would achieve this, but I'm keen to know if there is a better way.)

3. In valign2.png, why does the presence of the select control, cause "[Row 1+2, Col 1]" and the checkbox to drop, despite the fact that I'm using 'valign="top">'?
4. How can I prevent these 2 from dropping?  (Again, I expect that putting the "[Row 1+2, Col 1]" and the checkbox in separate columns would achieve this, but I'm keen to know if there is a better way.)

I'm using Firefox (3.0.5...so old).

Thanks.
Tel2
valign1.png
valign2.png
0
tel2
Asked:
tel2
  • 7
  • 6
4 Solutions
 
Jagadishwor DulalBraces MediaCommented:
You are getting that issue by using form element select and check box with in a single column so now change your code like below I hope your problem is gone:
 
<table>
    <tr>
      <td valign="top">
        [Row 1, Col 1]
      </td>
      <td rowspan="2" valign="top">[Row 1+2, Col 2]</td>
      <td rowspan="2" valign="top">
      <select multiple="multiple" size="3">
      <option>1</option>
          <option>2</option>
          <option>3</option>
        </select></td>
      <td rowspan="2" valign="top"><input type="checkbox" /></td>
    </tr>

    <tr>
      <td>
        [Row 2, Col 1]
      </td>
    </tr>
  </table>

Open in new window

0
 
tel2Author Commented:
Hi jagadishdulal,

Did you read my (comments) in questions 2 & 4?  I already expected that adding extra columns would solve it, but I'm wanting to avoid that, so I'm not awarding points for that answer, as it causes other problems for me.  In 2 & 4 I said "I'm keen to know if there is a better way".

The problems it causes can be seen in valign3.png (my real webpage), which I have now attached.  No matter what "width='x%'" figures I use, I can't get everything to line up next to eachother.  The more columns I have, the worse the problem.  If you have suggestions for this, let me know.  CSS perhaps?

Thanks.
valign3.png
0
 
Dave BaldwinFixer of ProblemsCommented:
Your example is too poorly defined to produce any predictable results in different browsers.  The check box size for any browser is fixed and the demo below shows how the alignment changes with the text size.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Alignment test.</title>
<style type="text/css">
<!-- 
body { 
	margin: 0;
	font-family: Times;
	font-size: 10pt;
	} 
-->
</style>
</head>
<body>
&nbsp;
<center>
  <table border="1" cellpadding="0" cellspacing="0" style="	font-size: 10pt;">
    <tr>
      <td valign="top">
        [Row 1, Col 1]
      </td>
      <td rowspan="2" valign="top">
        [Row 1+2, Col 2]
<!--
        <select multiple="multiple" size="3">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
-->
        <input type="checkbox">
      </td>
    </tr>

    <tr>
      <td>
        [Row 2, Col 1]
      </td>
    </tr>
  </table>
&nbsp;
  <table border="1" cellpadding="0" cellspacing="0" style="	font-size: 12pt;">
    <tr>
      <td valign="top">
        [Row 1, Col 1]
      </td>
      <td rowspan="2" valign="top">
        [Row 1+2, Col 2]
<!--
        <select multiple="multiple" size="3">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
-->
        <input type="checkbox">
      </td>
    </tr>

    <tr>
      <td>
        [Row 2, Col 1]
      </td>
    </tr>
  </table>
&nbsp;
  <table border="1" cellpadding="0" cellspacing="0" style="	font-size: 14pt;">
    <tr>
      <td valign="top">
        [Row 1, Col 1]
      </td>
      <td rowspan="2" valign="top">
        [Row 1+2, Col 2]
<!--
        <select multiple="multiple" size="3">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
-->
        <input type="checkbox">
      </td>
    </tr>

    <tr>
      <td>
        [Row 2, Col 1]
      </td>
    </tr>
  </table>
</center>
</body>
</html>

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
tel2Author Commented:
Thanks for that, Dave.

Now, if you remove the comment marks ("<!--" & "-->"), any ideas on question 3, and most importantly question 4?

Thanks.
0
 
Dave BaldwinFixer of ProblemsCommented:
The 'select' is 'inline' and much larger which forces the text and checkbox baseline down.  You have to put the 'select' in it's own container that is not inline with the other two to stop that.  If you want to line up things that don't intrinsically line up, then you have to make it more complicated by putting them in separate blocks that can be separately positioned.
0
 
tel2Author Commented:
Thanks again Dave, and sorry for the delay in replying.

I've experimented with creating extra columns in my table, and so now I'm faced with the issue of getting the sections close to eachother, which is the reason I wanted to minimise use of tables (or extra columns) in the first place.  To do this, I'm:
- Using 'align="right"' for the "for teams" and "and services" text.
- Using 'width="1%"' for the "for teams", "and services", and their associated <select> elements (I guess this makes the 'align="right"' redundant).
That's fine for the 4 teams and services elements, but I want to know how to keep these close to the date fields on the left, regardless of how much I'm zoomed in with Firefox (Ctrl--/++).  If I set a width like "25%" (or don't set it at all) on the table column which contains the date, it looks close to the teams and services elements with some text zoom levels, but not at others.
See attached, where I have added "border="1"' for clarity:
- valign4.png: Zoomed out.  Things are too far from date on left.
- valign5.png: Medium zoom.  Good spacing.
- valign6.png: Zoomed in.  Date feilds are wrapping, but they shouldn't have to do that yet, as there are gaps elsewhere in the row.

Could I use CSS (perhaps using "float: left"?) to keep the team and services fields next to the date fields on the left, instead? of tables?  If so, how?  Sorry - my CSS skills are not yet good.

Thanks.
Tel2
valign4.png
valign5.png
valign6.png
0
 
Dave BaldwinFixer of ProblemsCommented:
I seriously doubt that you can make it work at all text zooms.  You have a fixed amount of space on the screen and no matter what you do, there will be some setting that will screw it up.  I always design for a fixed display and if people want to 'zoom', that's for them to deal with.  There is no CSS or HTML that will make it work under all circumstances.
0
 
tel2Author Commented:
Thanks Dave,

I'm not expecting to be able to make it look perfect for all circumstances, but I expected there would be some way to make them "float left" (or something like that), so everthing stays together (except the timestamp on the right, which would only be close to the rest when zoomed in sufficiently), and elements (like the date on the left) just start wrapping when there are no more gaps between other elements.  Am I wrong in my expectations?
0
 
Dave BaldwinFixer of ProblemsCommented:
"float left" has nothing to do with the text wrapping.  If you want the text parts to not wrap, then you need to use '&nbsp;' instead of regular spaces.  It looks like you have regular spaces between your drop-downs in some places also.  What may happen then is that the non-wrapping content may force your cells to be wider to accommodate the content.  You could use 'overflow:hidden;' which would hide any content that would cause the cell to expand.
0
 
tel2Author Commented:
Hi Dave,

> "float left" has nothing to do with the text wrapping.
I know it doesn't directly, but I was hoping that if we put the text in some kind of element that floats left, rather than having a fixed (or even %) width, then it would not force the text to wrap until the whole row ran out of space.  Am I wrong?

> If you want the text parts to not wrap, then you need to use '&nbsp;' instead of regular spaces.  It looks like you have regular spaces between your drop-downs in some places also.  What may happen then is that the non-wrapping content may force your cells to be wider to accommodate the content.
I'm happy for the words "including teams" and "and services" to wrap all the time, and setting the width of their <td> to "1%" forces that to happen.  Before my previous post, I tried putting "&nbsp;" between "days" & "from", and that worked, but putting "&nbsp;" between the "</select>" & "days" doesn't stop them from wrapping, and I've now tried doing similarly between the day and month dropdowns, but they still wrap.  Here's the syntax I'm using, in case I've missed something:
      ...</select>&nbsp;<select...
Looks as if "&nbsp;" works only between "words", right?

> You could use 'overflow:hidden;' which would hide any content that would cause the cell to expand.
OK - thanks.  I didn't realise that.  I probably won't use it here, but possibly in other applications.

Thanks.
Tel2
0
 
Dave BaldwinFixer of ProblemsCommented:
You can only 'float' divs as far as I know.  But unless you use absolute positioning with defined widths, you can't make divs act like a table.  If you 'float' them in a row, then the first div that is too large wraps below.  Not the content but the whole div.
0
 
tel2Author Commented:
Thanks for that, Dave.

Would you agree that "&nbsp;" cannot be used to prevent non-text items (e.g. dropdowns) from being separated due to wrapping, or am I doing something wrong (see my syntax in my previous post)?

0
 
Dave BaldwinFixer of ProblemsCommented:
"Would you agree that "&nbsp;" cannot be used to prevent non-text items (e.g. dropdowns) from being separated due to wrapping"   I don't know, I thought it would.
0
 
tel2Author Commented:
Thanks very much for your time, Dave.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now