Displaying output in an even two-column html table...

silrayn

Hello, I just thought of a sticky problem in my code, I hope someone could help me with it. Currently I'm using this sort of code:


$output = '<TABLE BORDER=0 CELLSPACING=30 CELLPADDING=0><TR><TD>';

$resQ = 'SELECT * FROM table ORDERBY title LIMIT 0,30';
$result = mysql_query($resQ);

if($result){

$res_num = mysql_num_rows($result);

if($res_num%2 = 1){
$reshalf = ($res_num + 1)/2;
}else{
$reshalf = $res_num/2;
}

$i = 0; 

while($resD = mysql_fetch_assoc($result)){
$output .= '<P>' . $resD['id'];
$output .= '<P><DD>' . $resD['desc'];
$output .= '<P>' . $resD['other_stuff'];

if($i == $reshalf){
$output .= '</TD><TD>';

}

$i++; 
}
}

$output .= '<TD></TR></TABLE>';
echo($output);

It seems to work pretty well under most circustances but when the amount of text there is in one of the elements is more than others well...the table becomes imbalanced. It's especially bad when the later elements get so imbalanced. I'd like to know if there is a way to cut the string output in even halves without inadvertently chopping a word in half.

Hafkas

you could use the width property of each table element to set the columns to the same width by doing:

<td width="some_width">

to make the columns even - I suppose another way would be to use the php wordwrap function...

silrayn

Erm, I don't think you quite got what I was looking for. I'm trying to get the columns to balance in length not in width. I want both columns to either be of the same length or if not the same, the left would be only slightly longer than the right. Something like a normal newspaper column should look like.

I know I could use the 'multicol' tag instead of a table but that would only work in netscape. ^{^;;;}

sarah

What about just setting a width for the table (so it won't jump around on you) and then setting the width of each <td> tag to 50%. As long as you don't have it set not to wrap and there aren't any really really long words, you should be fine.

If the problem is that it appears imbalanced (the length of the text instead of the width of the column), you might try limiting the characters and cutting it off at the closest space. The issue with that is that all of your hard work goes bye-bye in certain browsers and you'd better hope no one changes the font size...

silrayn

You did answer my question. Sorry. Thanks.

maybl8r03

This is probably not the best thing to do within your php code. If it's up to me, I'd leave this to the presentation layer and try and handle in the html templates.

Brute force method - breaks a long string into x parts (depending on how many <span id="cols"></span> there are) and inserts them into <td> cells with similar IDs - quick and dirty way - slices words in the middle... warning not tested on anything other than IE6

<html>

<head>
<title>Test</title>
</head>
<body onload="transfertopage('textdata', 'col');">
<script language="javascript">
<!-- //
	function transfertopage(strFrom, collectionTo)
	{
		var objsource = document.getElementById(strFrom);
		var iCount = 0;
		var arTarget = new Object;
		if (objsource && objsource.innerHTML)
		{
			var strMessage = objsource.innerHTML;
			for (element in document.all)
			{
				if (element == collectionTo)
				{
					iCount++;
					//arTarget[iCount] = arAllElements[element];
					arTarget[iCount] = document.all[element];
					//alert(element);
				}
			}
			if (iCount > 0)
			{
				iElementcount = 0;
				iStrLength = strMessage.length;
				iDivided = strMessage.length / iCount;
				lastpoint = 0;
				for (element in document.all)
				{
					if (element == collectionTo)
					{
						document.all[iElementcount-1].innerHTML = strMessage.substr(lastpoint, lastpoint + iDivided);
						lastpoint = lastpoint + iDivided;
						//alert(element);
					}
					iElementcount++;
				}
			}
			else
			{
				alert('No place to put it');
			}
		}
	}
// -->
</script>
<div id="textdata" style="display:none">
The quick brown fox jumped over the lazy dog...
</div>
</body>
<table width="100%" border="1">
	<tr>
		<td><span id="col"></span></td>
		<td><span id="col"></span></td>
	</tr>
</table>
</html>