Google Answers Logo
View Question
Q: TD width in TABLE ( Answered 5 out of 5 stars,   0 Comments )
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=<v>px" or width=<w> wide with cellspacing=<x> and
cellpadding=<y>, 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:5 out of 5 stars
Hi trephin,

the best source for everything that has to do with HTML is still the
HTML language specification of the W3C ( ).
You can find the answer to your question here ( ) 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

width of a cell (general) = width of the content of a cell + 2 *

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  ( ) or
collapsing (

I hope this is helpful, if you have any questions about my answer or
require additional detail, feel free to request a clarification before

Thank you,


Additional Resources

My little test page:

<TITLE> Width Test </TITLE>
<style type="text/css"> { width: "42px"; background-color: "brown" }
<!-- 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.

<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"
<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 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 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
<table width="153px" cellspacing="5px" cellpadding="2px"
<!-- 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
<table width="153px" cellspacing="5px" cellpadding="2px"
<!-- 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
<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
<table width="99px" cellspacing="5px" cellpadding="2px">
<tr><td width="100%" bgcolor="red">five</td></tr>

HTML 4.01 Specification: 11. Tables

W3C CSS2: 8. Box Model

W3C CSS2: 9. Visual formatting model

W3C CSS2: 10. Visual formatting model details

W3C CSS2: 17. Tables

Search Strategy

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

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.


Additional Information

My little test programm:

<TITLE> Border Collapse Test </TITLE> 

<table width="100px" cellpadding="2px" border="1"
<!-- This example uses the style border-collapse:collapse --> 
<tr><td bgcolor="yellow">one</td><td bgcolor="green">two</td></tr>
<table width="100px" cellspacing="10px" cellpadding="2px" border="1"
<!-- This example shows what happens (browser dependant) when there is
a cellspacing combined with border-collapse:collapse-->
<tr><td bgcolor="yellow">one</td><td bgcolor="green">two</td></tr>
<table width="100px" cellspacing="10px" cellpadding="2px" border="1"
<!-- This example uses border-collapse:separate and cellspacing. --> 
<tr><td bgcolor="yellow">one</td><td bgcolor="green">two</td></tr>
<table width="100px" cellspacing="0px" cellpadding="2px" border="1"
<!-- Basically same as above - just take a close look at borders
between cells and compare them to the first example-->
<tr><td bgcolor="yellow">one</td><td bgcolor="green">two</td></tr>
trephin_-ga rated this answer:5 out of 5 stars

There are no comments at this time.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy