PHP+CSS+DIV Boxes to print data like <table>

halojoy

It is often recommended we should avoid <table><tr><td>
and use CSS and DIV Boxes for page layout.
Now, <table> is a very easy way to line up rows and columns of data.
It works. And works well.
But I want to make a try to use No tables.
And still get things to work as good .. in rows and columns.

Here is my first try. It looks like it could work.
But I already know there are things that can go out of line.
If there are <br /> in data, then table can endup in a big mess :mad:
The rows will no longer be in line.
And what happens if data are very long strings?
Can I wordwrap maybe?

My question is, if there is something that can be done.
I have only test some simple data rows.
Are there any more bugs I need to fix?

Of course, I am intrested to know if somebody else have tried this .. Succesfully?
I know we have very clever programmers here.
Or maybe there are some script to download for this?
Thanks.

<?php
// DISPLAY Result ROWS in a <table> using DIV BOXES
//include mysql_connect
$sql = "SELECT * FROM table";
$result = mysql_query($sql);

$textbox=array(); $gethead=true;
while($row = mysql_fetch_assoc($result)){
	foreach($row as $key=>$value){
		if($gethead)
			$textbox[$key] = '<div class="textbox">'."\n".
				'<div class="header">'.$key.'</div>'."\n";
		$textbox[$key] .= $value.'<br />';
	}
	$gethead = false;
}
$output = '';
foreach($textbox as $text)
	$output .= $text."\n</div>\n";

// THE DISPLAY
?>
<style type="text/css">
	div.textbox {
		float:left;
		padding:2px;
		border-left:1px solid black;}
	div.header {
		font-weight:bold;
		border-bottom:1px solid black;}
</style>
<?php 
echo $output; 
exit();
?>

johanafm

If you are displaying a table (e.g. energy cost for varying outdoors and indoors temperature), use the table element. It's what it is there for.
If the data you want to display is an (un)ordered list of items, use the ul/ol element.

But if you are dealing with layout only and the data has no meaning as table or list, you should not use table or list elements, but rather the neutral div together with css to achieve your layout. The reason is that html is supposed to be semantic.

The first thing to realize when using float or absolute positioning is that the containing box will not be resized to fit the content. This may or may not present a problem. When using absolute positioning for table cell equivalents, the "row" must be relatively positioned, not static as is the default. Wether or not you need equal height columns, the two following approaches ought to teach you a bit about what you need to know.
The one true layout
faux columns

Another option is using table, table-row and table-cell display. Sounds nifty in theory, but there are still things to deal with since IE (surprise) has crap support for css tables, at least prior to IE8.
Example of display: table, table-row, table-cell

halojoy

What's New for Windows Internet Explorer 8

The IHTMLStyle::display property now supports the
full range of table layout values
from the W3C Cascading Style Sheets Level 2.1 Specification

http://msdn.microsoft.com/en-us/library/aa768766%28VS.85%29.aspx

The bad thing about using <div>boxes</div> with CSS Style
display: table
display: table-row
display: table-cell
is that still now many use IE7 and even IE6.

But as time goes by and most start to use IE8 it will be easy to use
DIV tables with only CSS display:table properties.

I am trying to put together a data rows table script using only CSS+DIV. No <table>!!!
I will debug some more and then I will post my code here.
Script will dump out the SQL result of SELECT from MySQL in table.

The only browser without support for css div tables
I have found so far is IE7 (and of course IE6, IE5).

These are all tested good by me:

- Firefox
- Opera
- Apple Safari
- K-Meleon
- SRWare Iron
- (I refuse to use Google Chrome, but I think it is good with CSS)

johanafm

First ask yourself if you need to make your site work in IE7. If yes, then ask yourself if you need to make it work in IE6. If you ask me, it's ridiculous catering to a browser that came out 9 years ago and whose successor came out 3.5 years ago.
but if you're building the site for profit, it may of course be smart to support those crap browsers. However, it may also be a waste of cash/time to do so.
And if it's not for profit, I'd say it's a smart thing make sure it does NOT work in IE6 & 7. And if you please, make it not work in 8 while you're at it 🙂

And for educational purposes, I wouldn't sweat it either. 6 and 7 will continue to drop in market shares, so if you don't really need to support them right now, I'd hold off learning to do so until you really do. Hopefully, that will be never.

But if you do, it may be easier to go with floating content & follow up element with clear: left/right/both or using a mix of relative positioning for "rows" and absolute for "cells".

halojoy

[QUOTE=johanafm;10942810]First ask yourself if you need to make your site work in IE7.

I'd say it's a smart thing make sure it does NOT work in IE6 & 7.
And if you please, make it not work in 8 while you're at it 🙂[/QUOTE]
Naturligtvis, du är rätt, johanafm 🙂
Of course, you are right, johanafm 🙂

Why should we make life easier for those making off-standard browsers?
And so make people go on using those bad applications?

The only right thing to do is to write our code by accepted world standards.
And dont give a shiit about what MS IE decides to do.

/halojoy