• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2566
  • Last Modified:

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

0
vidhubala
Asked:
vidhubala
  • 4
  • 4
  • 3
  • +2
1 Solution
 
Ryan ChongCommented:
>>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?
0
 
Ryan ChongCommented:
sorry, i mean 170/1360 = 12% (rounded)
0
 
vidhubalaAuthor Commented:
width="170"  doesnt work. i need to some how force it to be equally divided.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Ryan ChongCommented:
try:

width="12%"
0
 
etan08Commented:
shouldn't it be:
width="12.5%"
???
0
 
etan08Commented:
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.
0
 
Ryan ChongCommented:
I thought it's 8 columns, so should be 100%/8 ...

>>width="12.5%"
I think that's not valid for HTML?
0
 
vidhubalaAuthor Commented:
etan - i have to fix the width of the table. i am looking for some syntax that will force the division equally.
0
 
sadsheadCommented:
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.
0
 
scrathcyboyCommented:
"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.
0
 
vidhubalaAuthor Commented:
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.
0
 
scrathcyboyCommented:
To make an equal divide, you assign the whole table a width, as you did above -- 1360 pixels.  First now, remember, that is wider than most people's screens, so you already have a potential "wrap" situation.

But assuming the screen is wide enough, now you take the # of cells, say 4, and add 5 x the padding and 5x the margin to each cell.  The default is 2 padding, 2 margin -- so that is 20 pixels used in padding and margin, assuming no border.  Now the remaining is 1360 - 20 = 1340 pixels.  Now subtract 5 either side for IE's built in table padding, which leaves 1330 pixels.  

Divide that by 4, you come up with 332 pixels for each TD -- so you need to put -- <TD width="332">
If it is 8 columns, then you have to redo the padding and margin calculations -- which is why people above have said to style the table -- padding:0px; margin:0px; -- it makes it easier to calculate.

However, if you set the TD width to LESS than the maximum possible, you are better off, because it allows for overflow of any column by wider data -- so in your case, I would use this --

4 column  -- <TD width="320"
8 column --  <TD width="155">

Why less for the 8 column?  More padding more margins.  That gives room in the table for longer data than 155 or 320, as you choose.  POINT -- if you UNDER size the TD width, every browser is still going to space out the table cells to fit the overall table width -- 1360 -- if there is extra room to play with.

Conclusion -- table rendering is up to the browser -- your size are a GUIDE -- not a strict limit.  The only way to CHOP a table off is to put it into a DIV with width=1360 -- now if the table exceeds that, the right side will be cut off and the user will not see the lost data to the right -- as long as you stop scrolling too
0
 
vidhubalaAuthor Commented:
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.
0
 
scrathcyboyCommented:
I think it is just a matter of who is online at any one time, I encourage others to come in with their ideas
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 4
  • 4
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now