table issue, centered column not possible, when text in other columns

joes · Sep 1, 2007

Hello

I have strange issue with tables. I like to have table with 3 columns
where the middle column is fixed an the other 2 columns are relative,
using the rest max width. Effect is that the middle area is centered.
So far no issue, Example

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td width="704">centered column</td>
<td> </td>
</tr>
</table>

When I like to add some text in the first column " T E X T", the
column width is "exploding" so that the centered column moves to right
and the last column is shrinked nearly to nothing.

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> T E X T </td>
<td width="704">centered column</td>
<td> </td>
</tr>
</table>

I noticed this issue in IE 6.0 and also in FireFox 2. Can anyone
explain what here is happing and why the first and last column are not
longer sharing the rest of the space so that the middle column appears
centered?

Any idea to reach such a design that I can position the " T E X T"
right aligned to the centered column so that when the size of the
browser changes it stills aligned centered?

i.e.

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="right"> T E X T </td>
<td width="704">centered column</td>
<td> </td>
</tr>
</table>

many thanks in advance

regards
joes

dorayme · Sep 1, 2007

joes said:
Hello

I have strange issue with tables. I like to have table with 3 columns
where the middle column is fixed an the other 2 columns are relative,
using the rest max width. Effect is that the middle area is centered.
So far no issue, Example

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td width="704">centered column</td>
<td> </td>
</tr>
</table>

Columns mostly have different priorities to us. They listen
foremost to the demands of their contents. Your type of snippet
in more context:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Question</title>
<style type="text/css">
..centreCol {width: 704px;}
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>A whole lot of words, some big like
antidisestablishmentarianism and other things?</td>
<td class="centreCol">centered column</td>
<td>tiny</td>
</tr>
</table>
</body>
</html>

I have replaced your width instruction with a css one. It is more
correct in this context.

What you see as a default when you have minimal content is not an
indication of what to expect generally. It is not how tables
work.

If you are wanting to layout a webpage rather than exhibit some
relationships as in your average spreadsheet, then there are
quite a few ways to go to get what you want. Google for "3 column
layouts CSS".

Neredbojias · Sep 2, 2007

Well bust mah britches and call me cheeky, on Sat, 01 Sep 2007 19:24:18 GMT
joes scribed:

I have strange issue with tables. I like to have table with 3 columns
where the middle column is fixed an the other 2 columns are relative,
using the rest max width. Effect is that the middle area is centered.

When I like to add some text in the first column " T E X T", the
column width is "exploding" so that the centered column moves to right
and the last column is shrinked nearly to nothing.

You'll never do it with tables. Tables have a mind of their own, even if
you set explicit widths on columns.

The alternative is css. If you're unfamiliar with css, you'll have to
learn the basics, then search for examples of columnar layouts. They're a
bit tricky, but if you _really_ want such a layout, you will prevail.

SendGrid email issue in responsive Gmail	1	Nov 4, 2021
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Defining a table in CSS	14	Jul 28, 2009
HTML Works in IE Not Chrome or FireFox Why?	9	Aug 7, 2012
Columns	4	Nov 19, 2007

table issue, centered column not possible, when text in other columns

joes

dorayme

Neredbojias

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads