Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Table render

0 views
Skip to first unread message

Aleksandar Pecanov

unread,
Jul 5, 2005, 7:29:30 PM7/5/05
to
I'm having some trouble in displaying a table with a certain configuration in firefox.
I've been helplessly trying to display a table like:

------------------------
|     |     |           |
------------------------
|     |           |     |
------------------------
|     |           |     |
------------------------

The code to achieve this would be:

<table width="200" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td width="50">&nbsp;</td>
        <td width="50">&nbsp;</td>
        <td width="100" colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td width="50">&nbsp;</td>
        <td width="100" colspan="2">&nbsp;</td>
        <td width="50">&nbsp;</td>
    </tr>
    <tr>
        <td width="50">&nbsp;</td>
        <td width="100" colspan="2">&nbsp;</td>
        <td width="50">&nbsp;</td>
    </tr>
</table>

However, the firefox (and mozilla) browsers always mistaken this table to be 3x3, and display it as such.
Could you explain me what is happening, so I can avoid this in future.

Thank you.

Aleksandar Pecanov

unread,
Jul 5, 2005, 7:30:57 PM7/5/05
to

Ryan Kitlitz

unread,
Jul 5, 2005, 7:50:47 PM7/5/05
to

You're going to need to nest a table to accomplish that. Is this what
you're looking for?

<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>

<td colspan="3">
<table width="100%" border="1" cellspacing="0" cellpadding="0">


<tr>
<td width="50">&nbsp;</td>
<td width="50">&nbsp;</td>

<td>&nbsp;</td>
</tr>
</table>


</td>
</tr>
<tr>
<td width="50">&nbsp;</td>

<td width="100">&nbsp;</td>


<td width="50">&nbsp;</td>
</tr>
<tr>
<td width="50">&nbsp;</td>

<td width="100">&nbsp;</td>


<td width="50">&nbsp;</td>
</tr>
</table>


--
Ryan Kitlitz
http://ryan.kitlitz.com - portfolio
http://breadstick.cyntaks.com - personal

Aphrael

unread,
Jul 5, 2005, 8:28:19 PM7/5/05
to
Ryan Kitlitz a écrit :

Or you can simply add

<tr>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
</tr>

at the top or bottom of your table...

Aphrael.
--
"La demande mondiale d'ordinateurs n'excŽdera pas cinq machines."
(Thomas Watson, Fondateur d'IBM, 1945)

Ryan Kitlitz

unread,
Jul 5, 2005, 8:46:28 PM7/5/05
to

I'm a little confused about what you're trying to accomplish. If you
want to have a cell with a width other than that of the cells above and
below it, you'll need to nest a table in that cell.

Arne

unread,
Jul 6, 2005, 2:24:05 AM7/6/05
to
Once upon a time *Aleksandar Pecanov* wrote:

> I'm having some trouble in displaying a table with a certain
> configuration in firefox.
> I've been helplessly trying to display a table like:
>
> ------------------------
> | | | |
> ------------------------
> | | | |
> ------------------------
> | | | |
> ------------------------

That "picture" indicate that you want 4 columns on eatch row, with 2
columns merged together on eatch row. But the code you have gives only
3 columns. The colspan don't add any more columns automaticaly, only
merge 2 or more of the existing columns.

You need to add one more row, do it in the top of the table and then
the code can look like this:

<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="50">&nbsp;</td>
<td width="50">&nbsp;</td>
<td width="50">&nbsp;</td>

<td width="50" colspan="2">&nbsp;</td>


</tr>
<tr>
<td width="50">&nbsp;</td>
<td width="50">&nbsp;</td>
<td width="100" colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="50">&nbsp;</td>
<td width="100" colspan="2">&nbsp;</td>
<td width="50">&nbsp;</td>
</tr>
<tr>
<td width="50">&nbsp;</td>
<td width="100" colspan="2">&nbsp;</td>
<td width="50">&nbsp;</td>
</tr>
</table>

--
/Arne

Top posters will be ignored. Quote the part you
are replying to, no more and no less! And don't
quote signatures, thank you.

RobertVA

unread,
Jul 6, 2005, 2:44:58 AM7/6/05
to

"Ryan Kitlitz" <ry...@kitlitz.com> wrote in message
news:daf9l3$gr...@ripley.netscape.com...

Apparent goal is to have a FOUR column table where:

A cell spans third and fourth column in first row
A cell spans second and third column in the each of the second and third
rows

I was able to acomplish such in IE, but Firefox doesn't seem to understand
that four coumns are desired. In Firefox the COLSPAN appears to be ignored
when one of the columns doesn't have a non-spanned cell in another row. The
preview and tag views in Nvu seem to have the same issue, although the
colspan still shows up in the advanced cell properties..


Ralph Fox

unread,
Jul 6, 2005, 4:31:15 AM7/6/05
to
On Wed, 06 Jul 2005 01:30:57 +0200, in message


1. The problem is not that the table is interpreted as 3x3.
The problem is that the 3rd of 4 columns has nearly zero width.

The <td> tags' width= attributes are not having the
effect that you want.

2. The table also looks wrong in IE6 and in IE4 (I just tested it).

3. To fix the problem, alter the <td> tags to use percentage widths
instead of fixed widths. This fixes the problem in both Firefox
and IE.


--
Cheers
Ralph

"Those who have knowledge, don't predict.
Those who predict, don't have knowledge."
-- Lao Tzu, 6th century B.C.

Ryan Kitlitz

unread,
Jul 7, 2005, 7:43:22 PM7/7/05
to

That's interesting... what if you need fixed widths on the cells?

Ralph Fox

unread,
Jul 9, 2005, 12:37:46 AM7/9/05
to


If you need fixed widths, you should set fixed widths on the _columns_
and not on the cells. See the example below [2].
Each cell will take its width from the column(s) it spans.

Things you want to stay away from are

A. Specifying fixed widths on cells rather than on columns.

B. Specifying both a fixed width on the entire table (like the OP has)
and fixed widths on _all_ columns (or all cells) of the table.


References

[1] "HTML 4.01 Specification", Chapter 11 "Tables".
http://www.w3.org/TR/html401/struct/tables.html


Examples

[2] Fixed width on each _column_, not on table

<table border="1" cellpadding="0" cellspacing="0">
<colgroup><col width="50"><col width="50"><col width="50"><col width="50"></colgroup>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

--
Cheers,
Ralph

The early bird gets the worm, but the second mouse gets the cheese.

0 new messages