Solved

divide columns equally

Posted on 2008-10-20
14
2,295 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 49

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 49

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
 
LVL 49

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 49

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

707 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now