Hi trephin,
the best source for everything that has to do with HTML is still the
HTML language specification of the W3C ( http://www.w3c.org ).
You can find the answer to your question here (
http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.3.3 ) in
section 11.3.3. "Cell Margins":
To calculate your width for a single cell element, you'll have to use
the following formula (variables according to your question):
Let z be the number of cells in one column of the table and l the
width of your content. v and w are equivalent (v = w):
l = ( v - ((z + 1) * x) - (2 * z * y) ) / z
width of the content of a cell (if all cells are the same width) =
( total width - total cellspacing - total cellpadding ) / number of
cells
width of a cell (general) = width of the content of a cell + 2 *
cellpadding
if all cells are the same width:
width of a cell = ( v - (( z + 1 ) * x ) / z) – 2y + 2 y = (( v – x )
/ z ) - x
Please be aware though that this equation only works if you want cells
of equal width. If you want to do a colspan the equation needs to be
modified for that cell. Another special case is, if the division above
does not work out without a rest. In this case you will have to decide
where to put the extra pixel(s).
The way a browser should render the resulting table is not strictly
defined except if you set the table-layout to fixed (and even then
there are some differences). Another thing that plays into this is the
direction setting of the table rendering engine.
If you require help setting up an algorithm that takes this into
account, please request a clarification, stating how you would like
those extra pixels to be distributed among cells. If, in addition, you
want an algorithm, which can work with different sized cells, please
state this in a request for clarification, too (but please provide
additional information about the input data then - if the overall
table width is fixed, do you want to specify the cells in percentage
values and then translate that to pixels, or do you want to specify a
certain amount of fixed cell width and then get a result for the
remaining ones?).
You should also be aware that according to the definition in the
standard, the width tag for the table specifies a minimum width.
The HTML 4.01 Standard also notes that the use of the width attribute
of the TABLE element is not encouraged anymore and that the width
should be defined in a style sheet instead.
Maybe I should also note that I disregarded borders so far because you
have not specified them in your question. If you want me to include
them into the calculation, please request a clarification and I will
add this part to your answer. Please specify though, which border
model you would prefer (separated (
http://www.w3.org/TR/REC-CSS2/tables.html#separated-borders ) or
collapsing (http://www.w3.org/TR/REC-CSS2/tables.html#collapsing-borders
)).
I hope this is helpful, if you have any questions about my answer or
require additional detail, feel free to request a clarification before
rating.
Thank you,
voyager-ga
Additional Resources
My little test page:
-----------
<HTML>
<HEAD>
<TITLE> Width Test </TITLE>
<style type="text/css">
td.fish { width: "42px"; background-color: "brown" }
</style>
<!-- This little page was created to visually test the equation
width of a cell = ((v-x)/z)-x
Remember though that width attributes are usually min values
that might be overruled.
Results partly dependant on the browser you use.
-->
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<table width="99px" cellspacing="5px" cellpadding="2px">
<!-- This example uses a table width that can be divided equally -->
<tr><td width="42px" bgcolor="yellow">one</td><td width="42px"
bgcolor="green">two</td></tr>
</table>
<table width="99px" cellspacing="5px" cellpadding="2px">
<!-- This example uses a table width that can be divided equally and a
css style -->
<tr><td class="fish">three</td><td class="fish">four</td></tr>
</table>
<table width="100px" cellspacing="5px" cellpadding="2px">
<!-- This example uses two cells and a table width that can't be
divided equally -->
<tr><td bgcolor="cyan">tst</td><td bgcolor="cyan">tst</td></tr>
</table>
<table width="153px" cellspacing="5px" cellpadding="2px">
<!-- This example uses three cells and a table width that can't be
divided equally -->
<tr><td bgcolor="cyan">tst2</td><td bgcolor="cyan">tst2</td><td
bgcolor="cyan">tst2</td></tr>
</table>
<table width="153px" cellspacing="5px" cellpadding="2px"
style="table-layout:fixed">
<!-- This example uses three cells and a table width that can't be
divided equally plus it has a different layout-->
<tr><td bgcolor="cyan">fix</td><td bgcolor="cyan">fix</td><td
bgcolor="cyan">fix</td></tr>
</table>
<table width="153px" cellspacing="5px" cellpadding="2px"
style="direction:rtl">
<!-- This example uses three cells and a table width that can't be
divided equally plus is rendered right to left-->
<tr><td bgcolor="cyan">rtl</td><td bgcolor="cyan">rtl</td><td
bgcolor="cyan">rtl</td></tr>
</table>
<table width="151px" cellspacing="5px" cellpadding="2px">
<!-- This is the control example for tst2 -->
<tr><td bgcolor="cyan">tst3</td><td bgcolor="cyan">tst3</td><td
bgcolor="cyan">tst3</td></tr>
</table>
<table width="99px" cellspacing="5px" cellpadding="2px">
<tr><td width="100%" bgcolor="red">five</td></tr>
</table>
</BODY>
</HTML>
------------
HTML 4.01 Specification: 11. Tables
http://www.w3.org/TR/REC-html40/struct/tables.html
W3C CSS2: 8. Box Model
http://www.w3.org/TR/REC-CSS2/box.html
W3C CSS2: 9. Visual formatting model
http://www.w3.org/TR/REC-CSS2/visuren.html
W3C CSS2: 10. Visual formatting model details
http://www.w3.org/TR/REC-CSS2/visudet.html
W3C CSS2: 17. Tables
http://www.w3.org/TR/REC-CSS2/tables.html#q2
Search Strategy
calculating width table cellspacing cellpadding
://www.google.com/search?sourceid=navclient&q=calculating+width+table+cellspacing+cellpadding |
,
0 Comments
)