Link to home
Start Free TrialLog in
Avatar of vidhubala
vidhubala

asked on

divide columns equally

i have a table with equally divided columns. how do i make sure the width 1360 is equally divided among the 8 columns?
the seems to be off a bit. is there any specific syntax that will force accurately divided the columns?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 
 <body>
  <table width="1360" cellpadding="2" cellspacing="1" border="1" style="border-collapse:collapse">
  <tr>
	<td width="170">fsafafasdf</td>
	<td width="170">fsfsafd</td>
	<td width="170">fasfas</td>
	<td width="170">fasdf</td>
 
	<td width="170">fasdfas</td>
	<td width="170">fasdfa</td>
	<td width="170">fadsf</td>
	<td width="170">fsa</td>
  </tr>
  <tr>
	<td width="170">fsafafasdf</td>
	<td width="170">fsfsafd</td>
	<td width="170">fasfas</td>
	<td width="170">fasdf</td>
 
	<td width="170">fasdfas</td>
	<td width="170">fasdfa</td>
	<td width="170">fadsf</td>
	<td width="170">fsa</td>
  </tr>
  <tr>
	<td width="170">fsafafasdf</td>
	<td width="170">fsfsafd</td>
	<td width="170">fasfas</td>
	<td width="170">fasdf</td>
 
	<td width="170">fasdfas</td>
	<td width="170">fasdfa</td>
	<td width="170">fadsf</td>
	<td width="170">fsa</td>
  </tr>
	<tr>
	<td width="170">fsafafasdf</td>
	<td width="170">fsfsafd</td>
	<td width="170">fasfas</td>
	<td width="170">fasdf</td>
 
	<td width="170">fasdfas</td>
	<td width="170">fasdfa</td>
	<td width="170">fadsf</td>
	<td width="170">fsa</td>
  </tr>
 </body>
</html>

Open in new window

Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image

>>how do i make sure the width 1360 is equally divided among the 8 columns?

you may try set the width with percentage, where each column's width equals to 1360/8.

get the idea?
sorry, i mean 170/1360 = 12% (rounded)
Avatar of vidhubala
vidhubala

ASKER

width="170"  doesnt work. i need to some how force it to be equally divided.
try:

width="12%"
shouldn't it be:
width="12.5%"
???
Another thing, wouldn't it be better to not specify the length of the table at all? That way what ever size browser the user has that is open could be used to represent a clean looking table.  
8 / 100 = .08
.08 * 100 = 8%
so
<td width="8%">
Try that out and see if you like it.
I thought it's 8 columns, so should be 100%/8 ...

>>width="12.5%"
I think that's not valid for HTML?
etan - i have to fix the width of the table. i am looking for some syntax that will force the division equally.
You dont need to specify the width of any of the cells other than those in your first row. Any rows following that will follow the width of its predecessor.

I have sanity checked your maths and 1360 divided is 170 so the only suggestion i have is to remove your border padding and cellspacing.

You have cellpadding="2" cellspacing="1" border="1", this suggests to me that each cell of 170 will have an addition 2pixels padding either side plus 1pixel spacing so is in fact 173. Strip these out of your table tag and i think you will find your table is the correct size.
"i am looking for some syntax that will force the division equally"

There is NOTHING that will force a browser to make all cells equal width, if the text going into them varies in width.  The very nature of table rendering in all browsers is that the cells will expand or shrink to fit the text that goes into each cell.  If all the texts are equal widths, then the cells will be equal widths. If not, they will not be -- and all the percentages will make no difference.

Browser rendering of tables is a sophisticated algorithm developed over a decade of browser versions.  What are they going to do?  Chop off some crucial text in one cell because you want them all equal?  If you were writing a browser, you would not chop off the user's view of web page content, would you?

You can set cell padding and spacing to 0, and put all equal percentages, but if ONE or TWO cells need more room to display longer text, then ALL browsers are obliged to give those cells more room.  The algorithm is a "buffering best-fit" algorithm that overrides what you specified in the cell widths.
there are some special syntax similar to cols="4" if there are only 4 cols to divide equally. i am going in that direction.
i am aware of all the points u have explained above.
ASKER CERTIFIED SOLUTION
Avatar of scrathcyboy
scrathcyboy
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
hi scrath,
looks like no magic code from anyone. so i am doing forced accept.
its odd when one person responds to one questions, others stay away.
thanks.
I think it is just a matter of who is online at any one time, I encourage others to come in with their ideas