tags:

views:

1301

answers:

3
Q: 

How to format multiple tables for vertical alignment

I have inherited some HTML code and have been asked to align the two tables so the text lines up between the two columns.

There is an outer table that provides a two-column look to this thing, then two inner tables (one for each column). Each inner table contains boxes that hold text. It is these boxes of text that the client wants aligned between the two columns.

I can think of some ways to make the lines of text "match" across the two columns, but nothing simple or elegant.

Here's the html code:

<html>
<head>
    <title>Test</title>
</head>
<body  >
    <table width="100%" border="1" cellspacing="2" cellpadding="0">
    <tr>
    <td width="50%">
     <hr align="left" />
     <p><center><strong>Left Side</strong></center></p>
     <table width="100%" border="1" cellspacing="2" cellpadding="0">
      <tr>
       <td width="5%">
       <strong>1:</strong>
       </td>
       <td width="90%">
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       </td>
      </tr>
      <tr>
       <td width="5%">
       &nbsp;
       </td>
       <td width="90%">
       <hr align="left" />
       </td>
      </tr>
      <tr>
       <td width="5%">
       <strong>2:</strong>
       </td>
       <td width="90%">
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       </td>
      </tr>
      <tr>
       <td width="5%">
       &nbsp;
       </td>
       <td width="90%">
       <hr align="left" />
       </td>
      </tr>
     </table>
    </td>
    <td width="50%">
     <hr align="left" />
     <p><center><strong>Right Side</strong></center></p>
     <table width="100%" border="1" cellspacing="2" cellpadding="0">
      <tr>
       <td width="5%">
       <strong>1:</strong>
       </td>
       <td width="90%">
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       </td>
      </tr>
      <tr>
       <td width="5%">
       &nbsp;
       </td>
       <td width="90%">
       <hr align="left" />
       </td>
      </tr>
      <tr>
       <td width="5%">
       <strong>2:</strong>
       </td>
       <td width="90%">
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       </td>
      </tr>
      <tr>
       <td width="5%">
       &nbsp;
       </td>
       <td width="90%">
       <hr align="left" />
       </td>
      </tr>
     </table>
    </td>
    </tr>
    </table>
</body>
</html>

EDIT: Further clarification and restrictions on this thing.

  1. It's created by a servlet program, so the ordering of the two columns is loop based. That is, one loop writes the first (left) column, then another loop writes the second (right) column. They are not "blendable" loops - they must run one after the other, severely restricting what I'm allowed to do with the formatting.

  2. The client has specified "no javascript" in the servlets. It is a firm restriction.

I can use CSS, but the two loops (left, then right) are fixed.

Thanks,

-R

A: 

If I understand correctly, you want the rows of two tables to adapt the height of the highest row of the two for each row of the table.

I think the only two ways to do that are:

  1. Use javascript to calculate each row height for each table and set them to the highest (highest of row 1, highest of row 2, etc.).
  2. Merge the two tables into one (better, merge all three).

The second one is obviously the way to go, but the first one should also work if both tables always have the same number of rows (but you need that anyway) and you cannot change much of the html.

Apart from that I don´t think there is a html / css solution.

jeroen  2009-05-13 23:18:55
+2  A: 

Not very sure to understand what you want here, seems that you want rows to dynamically adjust their height based on its counterpart row on the other column. I.e. the first row on the left side has a longer text than the first row on the right side, but you want both second rows to start aligned, leaving some blank space between the text of the first row on the right column and the second row on the right column, correct?

Shall this be the case, your solution is to remove the wrapping table. A table is already based on columns, so you don't need an extra table to create the columns.

Try this code:

<html>
<head>
    <title>Test</title>
</head>
<body>
    <table width="100%" border="1" cellspacing="2" cellpadding="0">
     <tr>
         <td colspan="2" width="50%">
                <p><center><strong>Left Side</strong></center></p>
      </td>
      <td colspan="2" width="50%">
             <p><center><strong>Right Side</strong></center></p>
      </td>
     <tr>
     <tr>
            <td width="5%" valign="top">
                        <strong>1:</strong>
            </td>
            <td width="45%" valign="top">
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
           </td>
      <td width="5%" valign="top">
           <strong>1:</strong>
           </td>
           <td width="45%" valign="top">
           blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
           blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
           blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
           blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
           </td>
        </tr>
        <tr>
          <td width="5%">&nbsp;</td>
          <td width="45%">
             <hr align="left" />
          </td>
       <td width="5%"> &nbsp; </td>
          <td width="45%">
          <hr align="left" />
          </td>
     </tr>
        <tr>
          <td width="5%" valign="top">
                        <strong>2:</strong>
          </td>
          <td width="45%" valign="top">
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        </td>
     <td width="5%" valign="top">
        <strong>2:</strong>
        </td>
        <td width="45%" valign="top">
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        </td>
     </tr>
     <tr>
       <td width="5%">&nbsp;</td>
       <td width="45%">
           <hr align="left" />
      </td>
      <td width="5%">&nbsp;</td>
      <td width="45%">
        <hr align="left" />
      </td>
   </tr>
  </table>
</body>
</html>

No need to say that this is a terrible and very old school way of doing what you are doing, you are better off using divs and css, but as you said you inherited the code I understand that a bit of refactoring is not an option.

palako  2009-05-13 23:26:29
You could replace all rows and cells by divs, but getting rid of the spacer columns and inline "styles" (for lack of a better word) using a little css, would do it. I guess it depends on the contents whether tables or divs are the way to go.
jeroen  2009-05-13 23:50:11
This is a nice solution, but the two columns are interleaved (left, then right, then left, then right...). Due to the way the html is created (see the edit to my original post), I cannot use this approach. I wish I could. Cheers, -R
Huntrods  2009-05-14 05:30:47
... and yes, it is certainly 2000 vintage html. ;-)
Huntrods  2009-05-14 05:32:09
@Huntrods: if you mean that the content for the entire left column is created first, then the entire right column... I'm pretty sure there is no way to achieve what you want. But it's unclear if you have access to the content 'generator' or not, can you put more details in your question please?
DisgruntledGoat  2009-05-14 17:12:24
Correct. The left column must be entirely created, then the right column. I can access the code to some degree, but cannot change this specific detail of the code. (cannot access that component).
Huntrods  2009-05-14 17:56:10
If you have that restriction to create a column first, then the other, there's no possible way to achieve what you want without a lot of tricky javascript. However, I don't know what reason could you have to not be able to layout your contents in rows. Whatever server side script language you are using, substitute the print outs for variables, and once you have all variables then print them out with your layout of choice, in this case, the rows in the table. Would that work for you?
palako  2009-05-14 21:51:34
I was able to convince the client to allow a rewrite of the loops so that this approach could be used. Didn't take long, and now I have provided what they wanted. -R
Huntrods  2009-05-14 23:08:12
A: 

OK I think I understand the problem, from what others have said. If you are able to change the code yourself (you don't explicitly say), then the quickest solution is this:

  • Use multiple rows on the outer table, i.e. 2 columns x N rows instead of 2x1.
  • Set each cell of this outer table to be aligned vertically to the middle (this is the default in all browsers).
  • Put a separate table inside each cell. In the same row, the tables will align in the middle.

There aren't really any CSS (i.e. non-table) solutions that I can think of that work cross-browser. You can use inline-block but there are caveats.

DisgruntledGoat  2009-05-14 00:18:40

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?