Sub Table not spreading 100% across a Parent Table Cell ...

[simonwar]

Have a look at this HTML.

It specifies a Table within a cell of a Parent table. The cell is spread across two rows of the Parent Table, and i simply want to fill it full height 100% with the child Table. But this HTML is not working, and I think it should, so i have got something wrong somewhere....

Can anyone see what i've done wrong ?

<td width="170" rowspan="2" align="center" valign="middle" background="bk.gif"> 
      <div align="center"> 
        <table width="170" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="bk.gif">
          <tr> 
            <td width="12" height="12" align="right" valign="bottom"><img src="../../../Sites/Site1/images/box_tl.gif"></td>
            <td background="../../../Sites/Site1/images/box_t.gif"></td>
            <td width="12" height="12" align="left" valign="bottom"><img src="../../../Sites/Site1/images/box_tr.gif"></td>
          </tr>
          <tr> 
            <td background="../../../Sites/Site1/images/box_l.gif"></td>
            <td background="../../../Sites/Site1/images/box_ctr.gif">&nbsp;</td>
            <td background="../../../Sites/Site1/images/box_r.gif"></td>
          </tr>
          <tr> 
            <td width="12" height="13" align="right" valign="top"><img src="../../../Sites/Site1/images/box_bl.gif"></td>
            <td background="../../../Sites/Site1/images/box_b.gif"></td>
            <td width="12" height="13" align="left" valign="top"><img src="../../../Sites/Site1/images/box_br.gif"></td>
          </tr>
        </table>
      </div></td>

Any ideas ? Simon.

[wjcampbe]

You could try making the centre column read <td height="34% background= on the first row, and <td height="33%" background= on the other two.

Where are those image paths coming from BTW? Since they refer to the site1 folder Actinic should not need those paths, just the subfolder and filename.

[jont]

Just to note that the "height" attributes are now deprecated. You can use either css or the transparent.gif method.

[simonwar]

Can you explain further ?

Hi Jont,

Deprecated, you mean being phased out, obsolete ?

Whats the transparent gif method, as I have a gif already in the cell in question as a background to give the column a colour. thats what all the image references are on my html.

Have a look at the attachment first ..

<td width="170" rowspan="2" align="center" valign="top" background="bk.gif"> 
      <div align="center"> 
        <table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="bk.gif">
          <tr> 
            <td width="12" height="12" align="right" valign="bottom"><img src="../images/box_tl.gif" width="12" height="13"></td>
            <td background="../images/box_t.gif"></td>
            <td width="12" height="12" align="left" valign="bottom"><img src="../images/box_tr.gif" width="12" height="13"></td>
          </tr>
          <tr> 
            <td background="../images/box_l.gif"></td>
            <td background="../images/box_ctr.gif">&nbsp;</td>
            <td background="../images/box_r.gif"></td>
          </tr>
          <tr> 
            <td width="12" height="12" align="right" valign="top"><img src="../images/box_bl.gif" width="12" height="13"></td>
            <td background="../images/box_b.gif"></td>
            <td width="12" height="12" align="left" valign="top"><img src="../images/box_br.gif" width="12" height="13"></td>
          </tr>
        </table>
      </div></td>

My cell includes the table above split into 9, i.e. 3x3 so that the corners have gifs in them and the adjoining edges the gifs are as backgrounds so that the coloured column will grow with the page..... and hence the 100% mentality.

I still can't understand why this child table will not spread across the parent cell ?

Any ideas, Simon.

[jont]

Hi Simon,

deprecated means no longer supported or featured (obsolete) - new browsers will not be written to feature that specific code and you should really start using the alternatives - primarily CSS. You will probably find the current releases of browsers support the feature but will not do so indefinitely. You may also receive validation errors when checking the code.

The child table is collapsing down to the minimum size it can. You can use the no-collapse function or it may be worth adding in a transparent spacer GIF image into the middle left hand cell (the background will show through) and set the dimensions to the minimum height you need for layout purposes (eg width="1" height="300") - as you add more content to the central cell the table will expand down the page - may be worth using valign=top in the parent cell to anchor the child table at the top of the page for consistancy of placement.

You can use the spacer.gif already in the actinic folder so it will not add to page overheads

HTH

[Mike Hughes]

Not often I disagree with Jont but I do here. Deprecated does not mean no longer supported or obsolete. The W3C explain what it does mean:

A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.

User agents should continue to support deprecated elements for reasons of backward compatibility.

See: http://www.w3.org/TR/REC-html40/conform.html#deprecated

The difference between deprecated and obsolete is that to quote the w3c again (same reference)

An obsolete element or attribute is one for which there is no guarantee of support by a user agent. Obsolete elements are no longer defined in the specification, but are listed for historical purposes in the changes section of the reference manual

i.e. deprecated elements have been superceded by newer elements in that version of HTML but are still valid and will be supported by browsers.

Mike

[jont]

Fair point Mike - obsolete was probably an overly strong word to use as many deprecated tags are still supported (mainly due to a convergence of standards over recent years) but thankfully some are not eg Microsoft Frontpage and older Netscape codes.

If a tag becomes deprecated it is best practice to start using the suggested alternatives and treat the old as obsolete for if or when the plug is pulled

[simonwar]

OK, thanks for the details ...

Cheers i'll force the table height to suit content using the spacing method.

Thanks for your help, Simon.