Solved

divide columns equally

Posted on 2008-10-20
14
2,322 Views
Last Modified: 2012-06-27
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
Comment
Question by:vidhubala
  • 4
  • 4
  • 3
  • +2
14 Comments
 
LVL 50

Expert Comment

by:Ryan Chong
ID: 22764723
>>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
 
LVL 50

Expert Comment

by:Ryan Chong
ID: 22764729
sorry, i mean 170/1360 = 12% (rounded)
0
 

Author Comment

by:vidhubala
ID: 22764739
width="170"  doesnt work. i need to some how force it to be equally divided.
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 50

Expert Comment

by:Ryan Chong
ID: 22764751
try:

width="12%"
0
 

Expert Comment

by:etan08
ID: 22766572
shouldn't it be:
width="12.5%"
???
0
 

Expert Comment

by:etan08
ID: 22766620
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
 
LVL 50

Expert Comment

by:Ryan Chong
ID: 22768042
I thought it's 8 columns, so should be 100%/8 ...

>>width="12.5%"
I think that's not valid for HTML?
0
 

Author Comment

by:vidhubala
ID: 22768230
etan - i have to fix the width of the table. i am looking for some syntax that will force the division equally.
0
 
LVL 1

Expert Comment

by:sadshead
ID: 22768717
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22773856
"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
 

Author Comment

by:vidhubala
ID: 22773977
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
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22779546
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
 

Author Closing Comment

by:vidhubala
ID: 31508160
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22782663
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question