How to loop all rows into a two column table

[Carbon14]

Hi All,

I need to ouptut an ordered list into a simple table something like this:

<table>
<tr>
<td><ul><li>data</li></ul></td>
<td><ul><li>...more of the same data</li></ul></td>
</tr>
</table>

The code I currently use (which works well) creates a nice two column table. But, the format does not accomodate a series of ordered lists which can vary in depth from one line to twenty lines. So, if a single item is in the same table row next to a cell which now contains several lines, an unwanted area of whitespace spearates the single line from the next line.

So how do I adapt this to fill all the available data rows into two table cells rather than create a new table row for each data row?

$columns =2;
$rows = ceil($num_rows / $columns);

$data[] = "$heading_1" ;
$data2[] = "$heading_2" ;

}

#this creates the columns

echo "<table border=\"1\">\n";

for($i = 0; $i < $rows; $i++) {

echo "<tr>\n";

for($j = 0; $j <$columns; $j++) {

	if(isset($data[$i + ($j * $rows)])) { 

		echo "<td width=\"350\" valign=\"top\">\n" . $data[$i + ($j * $rows)] . "\n";

		echo "<ul>\n"  . $data2[$i + ($j * $rows)] . "</ul></td>\n";
	}

}

echo"</tr>\n";


} #end else

echo " </table>\n ";

Any help would be appreciated.

Thanks in advance,

Marc

[BeastRider]

The actual business of getting multiple cells in a row is done with ROWSPAN, as doumented at the URL below.

http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/tables-4.html

But, the bigger problem is that you need to look into the data array to see how big a cell you need to display it.

If you want two table cells (a 1 x 2 table), then you have to split data into two arrays, or access the data array at a second point with a second index. But again, you have to figure out how big each element is in order to decide how many elements to put into each cell.

[Carbon14]

Ok, I think I see where you are going, but I have no clue how to get there. Also, it seems that if the number of ROWSPAN's can be calculated then the data could be distibuted evenly into two cells or DIV's for that matter. I really don't know how to adapt my current code to accomplish this.

Marc

[BeastRider]

What is in the data arrary elements? Are they all lists? For example, if each data element was a list and you have the html list formatting characters stored in the array, then you could count to see how many lines in the list.

[leatherback]

Of course, you SHOULD use CSS for this sort of problems. Avoid tables for layout (That is not what they are for, although I do it myself too: It is ofter easier..) and create a box item from your <ul></ul> section, make them free-flowing, with a specific width & alignment.

Have a look at box formatting using css at www.w3c.org

J.

[Carbon14]

Yes, all the data are formatted with tags like so:

$h2cTag= "<li>&nbsp;&nbsp;$h2c</li>\n";

and like this:

$heading_3c = " <ul>\n
					$h3c1Tag
					$h3c2Tag
					$h3c3Tag
					$h3c4Tag
					$h3c5Tag
				</ul>\n";

And finally the variable in the array looks like this:

$heading_2= "		$h2aTag
						$heading_3a	

				$h2bTag
					$heading_3b	

				$h2cTag
					$heading_3c

				$h2dTag
					$heading_3d

				$h2eTag
					$heading_3e		
				";

All the data come from a single data table with 65 columns. The variable above represents the third available slot for a child of the third h2 level item. Since the lower items on the list are more likely to be empty(at any level), counting becomes a challenge since its all fed from one data row. I know this is not very elegant, but the data entry aspect of this arrangement is manageable.

[Carbon14]

Leatherback,

Yes, this is exactly what I need. I suppose the table tags could be swapped out for CSS elements, but making the data flow from one element to the next is the root of the problem. At some point, the data has to be distributed evenly to both columns whether its a table cell or a div class. Got any suggestions?

Marc

[leatherback]

Try something like:

<span style="width: 300px; border: solid;">

<p style="width: 120px; border: solid; float: left">
block 1</p>

<p style="width: 120px; border: solid; float: left">
block 2
</p>
</span>

</body>
</html>

(This is untested though)

[Carbon14]

leatherback,

Thanks. But I'm still not sure how this works. So, how does the data get distrubuted evenly form block1 to block2? I use multiple column layouts with CSS quite often using separate queries, but never have been able to make data folow from a column of unspecified height flow to the next column with one query. I'll give this a try, but I don't understand how the data flow works. Could you explain?

Marc

[leatherback]

Hi Carbon,

The general idea is that you define individual 'blocks" (in your case the outputted lists) on your pages, and you define the area which they can occupy. By defining a containing box (the span width=300) and creating the boxes small enough to fit in there twice,you biscally force the boxes to fit next to eachother first, and when you have the second box fitted, the go to the next line.

There may however be a problem with the <ul><li> tags however. If I am correct they are at the same coding level as the <span> tags, and might overrule the containing box size. You might have to define the list anew.

Have a look at

http://www.w3.org/TR/REC-CSS2/box.html
http://www.w3.org/TR/REC-CSS2/visuren.html
and
http://www.w3.org/TR/REC-CSS2/generate.html

to see how different elements are treated.

The example I posted works, you can safe it as a HTML file, to see the idea I came up with. You might want to create your own list items without using the offical <ul> tags, since they have pre-defined styles which can breack the "natural flow" of the page.

J.

[Carbon14]

Hi Leatherback,

I see how the CSS works, but not how to to evenly distribute the data--which has been the problem all along. Half the data needs to be placed in block1 and the other half in block2, but how?

Carbon14