Wrox Home  
Search P2P Archive for: Go

  Return to Index  

html_code_clinic thread: One table - static AND dynamic widths


Message #1 by Patrick Mair <pmair@e...> on Fri, 18 Oct 2002 13:36:03 -0400
If I set percentages on all, the widths will change relative to screen size
though right?  I wanted a, b, and c to be static widths.  However, it just
occurred to me that maybe I can just put a static width table inside a table
of width 100% and get the result I'm looking for...

Patrick

-----Original Message-----
From: Andrew Thorne [mailto:AndrewT@C...] 
Sent: October 18, 2002 11:43 AM
To: HTML Code Clinic
Subject: [html_code_clinic] RE: One table - static AND dynamic widths

You're close set your widths using percentages on all <td> 

<table width="100%" height="75" cellpadding="0" cellspacing="0">
  <tr>
    <td height="42" width="5%" bgcolor="red">&nbsp;</td>
	<td height="42" width="5%" bgcolor="white">&nbsp;</td>
	<td height="42" width="5%" bgcolor="blue">&nbsp;</td>
	<td height="42" width="85%" bgcolor="black">&nbsp;</td>
  </tr>
</table>

this should do what your looking for
-----Original Message-----
From: Patrick Mair [mailto:pmair@e...]
Sent: Friday, October 18, 2002 2:36 PM
To: HTML Code Clinic
Subject: [html_code_clinic] One table - static AND dynamic widths


Hi,

I've got a table that looks like the following:

-------------------------------
| a | b | c |       d         |
-------------------------------

What I'd like to do is to set static column widths for columns a, b, and c.
I would like to extend column d to the edge of the page.  Previously I had
simply set widths of the first 3, and set the width of column d to be 100%.
This isn't working for me now, instead I get column d squishing a, b, and c.

How can I code this?  My code is below...

Patrick

<table width="100%" height="75" cellpadding="0" cellspacing="0">
  <tr>
    <td height="42" width="100" bgcolor="red">&nbsp;</td>
	<td height="42" width="200" bgcolor="white">&nbsp;</td>
	<td height="42" width="300" bgcolor="blue">&nbsp;</td>
	<td height="42" width="100%" bgcolor="black">&nbsp;</td>
  </tr>
</table>


---

Improve your web design skills with these new books from Glasshaus.

Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20


---

Improve your web design skills with these new books from Glasshaus.

Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20

  Return to Index