Aligning tables

G

Griff

I've a (classic) ASP web page that has several tables on it that have
identical columns (headings).

When these tables are displayed they of course have different widths, based
upon the amount of text within each column.

I have been asked to make all tables have identical column widths.

What I thought I would do would be to have some sort of column-width counter
that counted the maximum number of characters in column A in all tables, and
another for column B in all tables. From this I would have to come up with
some algorithm (not yet done) to turn the number of characters into a column
width (based upon font family and font size chosen). This value would then
be put into a programmatically generated style sheet. However, a quick
prototype shows that the style sheet appears to be ignored if it's at the
end of the document (even if in a <head/> tag) and the aforementioned
algorithm would appear to be rather complicated....

So - I'm after a new approach. I don't want to make it into one big table
because I've sections of information that appear between the tables.

Could I do something in JavaScript on the Client's machine?

All thoughts most welcome.

Thanks

Griff
 
M

McKirahan

Griff said:
I've a (classic) ASP web page that has several tables on it that have
identical columns (headings).

When these tables are displayed they of course have different widths, based
upon the amount of text within each column.

I have been asked to make all tables have identical column widths.

What I thought I would do would be to have some sort of column-width counter
that counted the maximum number of characters in column A in all tables, and
another for column B in all tables. From this I would have to come up with
some algorithm (not yet done) to turn the number of characters into a column
width (based upon font family and font size chosen). This value would then
be put into a programmatically generated style sheet. However, a quick
prototype shows that the style sheet appears to be ignored if it's at the
end of the document (even if in a <head/> tag) and the aforementioned
algorithm would appear to be rather complicated....

So - I'm after a new approach. I don't want to make it into one big table
because I've sections of information that appear between the tables.

Could I do something in JavaScript on the Client's machine?

All thoughts most welcome.

Thanks

Griff

Consider tables within tables.

<html>
<head>
<title>tables.htm</title>
</head>
<body>
<table border="0" width="400">
<tr>
<td>
<table border="1" width="100%">
<tr>
<th width="25%">col 1<hr></th>
<th width="25%">col 2<hr></th>
<th width="25%">col 3<hr></th>
<th width="25%">col 4<hr></th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td colspan="4">
<br>Stuff between the tables.<br><br>
</td>
</tr>
<tr>
<th>col 1<hr></th>
<th>col 2<hr></th>
<th>col 3<hr></th>
<th>col 4<hr></th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

The first row in the second table identifies the width of the columns.

Unless you use a proportional font (like Courier) then counting
characters will yield inaccurate results as "iii" is narrower than "XXX".
 
L

Larry Bud

Griff said:
I've a (classic) ASP web page that has several tables on it that have
identical columns (headings).

When these tables are displayed they of course have different widths, based
upon the amount of text within each column.

I have been asked to make all tables have identical column widths.

What I thought I would do would be to have some sort of column-width counter
that counted the maximum number of characters in column A in all tables, and
another for column B in all tables. From this I would have to come up with
some algorithm (not yet done) to turn the number of characters into a column
width (based upon font family and font size chosen). This value would then
be put into a programmatically generated style sheet. However, a quick
prototype shows that the style sheet appears to be ignored if it's at the
end of the document (even if in a <head/> tag) and the aforementioned
algorithm would appear to be rather complicated....

So - I'm after a new approach. I don't want to make it into one big table
because I've sections of information that appear between the tables.

Could I do something in JavaScript on the Client's machine?

You can't count characters because the width of the text will appear
different on different machines.

Not sure your problem with one big table, it's probably the only way
that you're going to get away with this.

For the stuff between tables, just merge the row into 1 big row. If
you want the "table" portions bordered, you can apply that to each
cell. The user won't be able to tell if it's in 1 table or not.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top