Anyone want to argue CSS vs TABLES for this?

[Jakez]

Let's say you want to GENERATE the following type of structure from 12 rows of MySQL data using PHP and a horizontal columns number that can be changed by the webmaster (set to 4 here):



CSS
1: As far as I know, you'd need to know the exact px width of the 'container' and then divide that by the amount of box's (columns) that are set, as well as subtracting paddings, borders, etc., which sounds really messy IMO. Uh oh, what if the person set it to 5 instead of 4? Do a bunch of math in PHP to figure out the new correct width? But then how do you set the 'container' width in your .css file to match the new width?

2: Don't use a 'container' and just spit out 12 <div>'s one after another, use PHP to put a <br> after every 4 columns, or 5, whatever is set? But you have to eventually place this into some kind of 'container' in your layout which is going to have a set width. Fuck.

Tables
1: First lay down <table><tr>, then loop through the 12 rows of MySQL data placing </tr><tr> after every 4 or 5, then put </tr></table> after all that is done. Except if you check the source of the page you will have an empty <tr></tr> at the end.

And then both of these become a LOT more confusing when you try to implement a template system. How do you know whether to use <br> or </tr><tr> since you don't know whether the persons page is created with CSS or Tables?

[JD]

for containing/displaying data, tables are a proper way to do it. That's what tables are for.

CSS is more of site/page structure and tables are for data containers (name/address/colors/shapes/etc)

[Jakez]

Originally Posted by JD

for containing/displaying data, tables are a proper way to do it. That's what tables are for.

CSS is more of site/page structure and tables are for data containers (name/address/colors/shapes/etc)

Aren't all of your designs done in tableless CSS? What do you think would be the best or most valid method for displaying columns like this dynamically in CSS?

For example: http://www.monstersofblog.com/port/adulttube.jpg

What kind of structure do you use to place 4 in each row? Does it just push them into a new row because 4 of them reaches the exact width of the container?

[webboy21]

I agree with the first assesment that tables can and should be used to display data.....now for the second question: you float the video boxes and clear the float after 4 boxes.....

[potter]

Originally Posted by Jakez

<div class="yourcontainerdiv">

  <div style="width:XXX;height:XXX;float:left;"></div>
  <div style="width:XXX;height:XXX;float:left;"></div>
  <div style="width:XXX;height:XXX;float:left;"></div>
  <div style="width:XXX;height:XXX;float:left;"></div>
  <div style="width:XXX;height:XXX;float:left;"></div>
  <div style="width:XXX;height:XXX;float:left;"></div>
  <div style="width:XXX;height:XXX;float:left;"></div>
  <div style="width:XXX;height:XXX;float:left;"></div>
  <div style="width:XXX;height:XXX;float:left;"></div>
  <div style="width:XXX;height:XXX;float:left;"></div>
  <div style="width:XXX;height:XXX;float:left;"></div>
  <div style="width:XXX;height:XXX;float:left;"></div>

</div>

Why won't that work?

[potter]

Originally Posted by Jakez

What kind of structure do you use to place 4 in each row? Does it just push them into a new row because 4 of them reaches the exact width of the container?

Yes. 5678

[Babaganoosh]

That's a job for tables. Tables are for containing data, CSS is for layouts. Generating tables on the fly is easy.

[react]

Tabular data, tables. Done/done.

[harvey]

Originally Posted by Jakez

Let's say you want to GENERATE the following type of structure from 12 rows of MySQL data using PHP and a horizontal columns number that can be changed by the webmaster (set to 4 here):



CSS
1: As far as I know, you'd need to know the exact px width of the 'container' and then divide that by the amount of box's (columns) that are set, as well as subtracting paddings, borders, etc., which sounds really messy IMO. Uh oh, what if the person set it to 5 instead of 4? Do a bunch of math in PHP to figure out the new correct width? But then how do you set the 'container' width in your .css file to match the new width?

2: Don't use a 'container' and just spit out 12 <div>'s one after another, use PHP to put a <br> after every 4 columns, or 5, whatever is set? But you have to eventually place this into some kind of 'container' in your layout which is going to have a set width. Fuck.

Tables
1: First lay down <table><tr>, then loop through the 12 rows of MySQL data placing </tr><tr> after every 4 or 5, then put </tr></table> after all that is done. Except if you check the source of the page you will have an empty <tr></tr> at the end.

And then both of these become a LOT more confusing when you try to implement a template system. How do you know whether to use <br> or </tr><tr> since you don't know whether the persons page is created with CSS or Tables?

you're giving the answer yourself. Even though tables are meant for tabular data, if you need flexibility, CSS is the way to go. It's not a coincidence any serious developer is using CSS for almost anything. Even tabular data. Just modify 1 number or variable and you can have more columns. Or rows. Or whatever.

Plus, something many people seems to ignore is that YOU CAN HAVE TABLES WITH CSS. Just use display:table (or display:table-cell, or table-row, or table-column or whatever). Thus, you can have tables and all the power of CSS at the same time. Or you can use table-layout property (although in IE8 you'll need to set auto or fixed, not inherit, which I never use, so what do I care)

Seriously, there's not even an argument here

[AlCapone]

CSS:

ul {
	margin:0px;
	padding:0px;
	list-style:none;
	width: 410px;
	height: 410px;
}
ul>li {
	width: 100px;
	height: 100px;
	text-indent: 0px;
	float:left;
}
.c1 {border-right: 2px solid black; border-left: 2px solid black; border-top: 2px solid black;}
.c2 {border-right: 2px solid black; border-top: 2px solid black;}
.c3 {border-bottom: 2px solid black;}

MARKUP:

<ul>

	<li class="c1"></li>
	<li class="c2"></li>
	<li class="c2"></li>
	<li class="c2"></li>

	<li class="c1"></li>
	<li class="c2"></li>
	<li class="c2"></li>
	<li class="c2"></li>

	<li class="c1"></li>
	<li class="c2"></li>
	<li class="c2"></li>
	<li class="c2"></li>

	<li class="c1 c3"></li>
	<li class="c2 c3"></li>
	<li class="c2 c3"></li>
	<li class="c2 c3"></li>

</ul>

[Jakez]

Another big problem I have with css is image paths.

Let's say you have this:

#header {
background-image:url("bg.jpg");
}

No problem there, unless you have your .css file in a folder such as /css/. So you change it to this:

#header {
background-image:url("/bg.jpg");
}

That will jump out of the /css/ folder and back into the main folder where the image is. But if your site isn't in the home directory (site.com/) because you're using a sub domain or something then this isn't going to work. So you specify the path:

#header {
background-image:url("/subdir/bg.jpg");
}

OR

#header {
background-image:url("http://www.site.com/subdir/bg.jpg");
}

It works again. But this dangerous because if you ever wanted to move the site or copy this layout for use on another site (such as is done in a script) you would have to go through the .css file and replace all kinds of paths! Unacceptable.

This is one of the areas I think the whole CSS layout thing fails, if the layout were done in Tables then you could easily have the sites URL placed into a PHP variable and then when you move the site you simply change this variable and all of the images will still work.

Example:

<?php
$site_url = "http://www.site.com/subdir";
?>
<table>
<tr>
<td style="background-image:url(<?=$site_url?>/bg.jpg);">blah</td>
</tr>
</table>

[fatfoo]

Would you like to buy a vowel?

[Jakez]

Bump for ideas on the image path problem.

[psili]

Originally Posted by Jakez

Bump for ideas on the image path problem.

Have you tried the following structure

/index.php
/css/styles.css
/img/image.jpg

and in your styles.css, that's referenced in index.php your background would be:

background: url('../img/image.jpg');

[candyflip]

It's not even a question. As has been pointing out, tables are for data.

[Jakez]

Originally Posted by psili

Have you tried the following structure

/index.php
/css/styles.css
/img/image.jpg

and in your styles.css, that's referenced in index.php your background would be:

background: url('../img/image.jpg');

Ah! I tried ./ and it didn't work, I forgot it was ../