View Question
 Question
 Subject: TD width in TABLE Category: Computers Asked by: trephin_-ga List Price: \$50.00 Posted: 16 Jan 2003 14:46 PST Expires: 15 Feb 2003 14:46 PST Question ID: 144415
 ```In HTML, how do I specify width of a cell in a table that has cellspacing and cellpadding, to get an exact match? If a table is style="width=px" or width= wide with cellspacing= and cellpadding=, how do I specify the width of the cells (td) to match the table definition without disturbing the measurements overall? I would like an answer that includes and takes in account both width="?" and style="width=?" for all elements and any number of columns in the table. I like alorithms and equations.```
 Subject: Re: TD width in TABLE Answered By: voyager-ga on 16 Jan 2003 18:54 PST Rated:
 ```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: ----------- Width Test
onetwo
threefour
tsttst
tst2tst2tst2
fixfixfix
rtlrtlrtl
tst3tst3tst3
five
------------ 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``` Request for Answer Clarification by trephin_-ga on 20 Jan 2003 04:27 PST ```Thank you voyager for a very thorough answer! Could you please also supply me with a function that takes borders in account? I would just like a function that gives me the total width available for cell content. Then I can distribute this to the different columns.``` Clarification of Answer by voyager-ga on 20 Jan 2003 17:49 PST ```Hallo trepin, I'm happy that you found my answer to be helpful so far. I will reformulate my answer to take borders into account and also total width of all usable cell content combined. That should allow you to split it up yourself. NOTE: Different browsers will interpret borders on empty cells differently. Some will draw them, others won't. It might be useful to take a look at the CSS Style empty-cells. I assumed your padding and borders on right an left side of the cells are the same and that they are the same for every cell. Let b be the width of the border. There are two different models for borders: 1. The Separated Borders Model CSS Style: border-collapse="separate" In the sparated border model there is a certain spacing between the borders of individual cells combined usable width of cells = table width - 2 * number of cells * ( border width + padding ) - cellspacing * ( number of cells + 1 ) combined usable width of cells = v - 2 * z * ( b + y ) - x * ( z + 1 ) 2. The Collapsing Borders Model CSS Style: border-collapse="collapse" In the collapse border model there is one single border between two individual cells. NOTE: This Model doesn't work very well with cellspacing. Some browsers won't even interpret a cellspacing argument - others really mess up the tables. This is the reason I will not add cellspacing in the equation here. NOTE: The rounding of border widths is not defined and left to the browser. combined usable width of cells = table width - border width * ( number of cells + 1 ) - 2 * padding * mumber of cells combined usable width of cells = v - b * ( z + 1 ) - 2 * y * z I hope this clarified the points that were still open - if not, please ask for clarification again. voyager-ga Additional Information My little test programm: ------ Border Collapse Test
onetwo
onetwo
onetwo
onetwo
-------```