Div and CSS vs. Tables (large table)

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Div and CSS vs. Tables (large table)

Post by johnperkins21 »

Ok, I've got a real world issue. I'm looking at doing a site re-design in all CSS, but I have one issue with getting rid of my tables. I have a stats page that that will have a lot of info in a pretty big table. Right now it's a mess just because I don't want to fix it until I change everything, so I just threw together a very ugly table, but it works. What I'm wondering is if there is an easy way to set it up using divs and avoiding tables altogether.

Here is the code:

Code: Select all

<!--- Body --->
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr valign=top><td bgcolor=#8e8e8e>
<br><br>

	<table width=95% align=center border=1 cellpadding=0 cellspacing=0>
	<tr><td>
		<table width=100% align=center border=0 cellpadding=0 cellspacing=0 bgcolor=#efefef>
		<tr>
		<td colspan=2 style="border-right-width: 1px; border-top-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-style: solid; border-color: #ffffff; border-color: #ffffff;">&nbsp;</td>
		<td colspan=5 align="center" style="border-right-width: 1px; border-top-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#B1C9EA>Offensive</td>
		<td colspan=5 align="center" style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#AEC1AF>Defensive</td>
		</font></div>
		</tr>
		<tr>
		<td align="center" bgcolor=#efefef style=" font-size: 11px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;">Player</td>
		<td align="center" style=" font-size: 11px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#dedede>Team</td>
		<td align="center" style=" font-size: 11px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#efefef><a href="stats.php?sort=RushYdFor">Rush</a></td>
		<td align="center" style=" font-size: 11px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#e0e0e0><a href="stats.php?sort=PassYdFor">Pass</a></td>
		<td align="center" style=" font-size: 11px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#efefef>Spec.<br />Teams</td>
		<td align="center" style=" font-size: 11px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#e0e0e0><a href="stats.php?sort=TotalYdFor">Total</a></td>
		<td align="center" style=" font-size: 11px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#efefef><a href="stats.php?sort=PointsFor">Points</a></td>
		<td align="center" style=" font-size: 11px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#e0e0e0>Rush</td>
		<td align="center" style=" font-size: 11px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#efefef>Pass</td>
		<td align="center" style=" font-size: 11px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#e0e0e0>Spec.</br>Teams</td>
		<td align="center" style=" font-size: 11px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#efefef>Total</td>
		<td align="center" style=" font-size: 11px; border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#e0e0e0>Points</td>
		</tr>
		<tr height=2 bgcolor=#8f8f8f><td colspan="12"></td></tr>
		
		<?
		$sort = $_GET['sort'];
		if ((empty($sort)) && ($sort != "RushYdFor") && ($sort != "PassYdFor") && ($sort != "TotalYdFor") && ($sort != "PointsFor")) {
			$sort = "PointsFor";
		}
		
		
		$stats_query = mysql_query("SELECT * FROM Stats ORDER BY $sort DESC");
		while ($stats = mysql_fetch_array($stats_query)) {
			$team_query = mysql_query("SELECT TeamName, PlayerID FROM Teams WHERE TeamID = '$stats[0]'");
			$team = mysql_fetch_array($team_query);
			$player_query = mysql_query("SELECT FirstName FROM Players WHERE PlayerID = '$team[1]'");
			$player = mysql_fetch_array($player_query);
			?>
			<tr>
			<td align="center" bgcolor=#efefef style=" font-size: 12px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;"><? echo $player[0]; ?></td>
			<td align="center" style=" font-size: 12px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#dedede><? echo $team[0]; ?></td>
			<td align="center" style=" font-size: 12px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#efefef><? echo $stats[2]; ?></td>
			<td align="center" style=" font-size: 12px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#e0e0e0><? echo $stats[3]; ?></td>
			<td align="center" style=" font-size: 12px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#efefef><? echo $stats[4] - ($stats[2] + $stats[3]); ?></td>
			<td align="center" style=" font-size: 12px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#e0e0e0><? echo $stats[4]; ?></td>
			<td align="center" style=" font-size: 12px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#efefef><? echo $stats[1]; ?></td>
			<td align="center" style=" font-size: 12px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#e0e0e0><? echo $stats[6]; ?></td>
			<td align="center" style=" font-size: 12px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#efefef><? echo $stats[7]; ?></td>
			<td align="center" style=" font-size: 12px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#e0e0e0><? echo $stats[8] - ($stats[6] + $stats[7]); ?></td>
			<td align="center" style=" font-size: 12px; border-right-width: 1px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#efefef><? echo $stats[8]; ?></td>
			<td align="center" style=" font-size: 12px; border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #ffffff;" bgcolor=#e0e0e0><? echo $stats[5]; ?></td>
			</tr>
			<tr height=1 bgcolor=#ffffff><td colspan="12"></td></tr>
		<?
		}
		
		
		?>
		
		
		
		</table>	


	</td>
	</tr>
	</table>
	<br><br>
You can check out the output here:
http://www.10yardfight.com/stats.php

If anyone has any ideas on how I can get the divs to line up like my tables, I'm open to suggestions.

Thanks,
John

p.s.
I know that the tables are really, really poorly planned... it's a concession I've made because the original site design limits my use of css (I planned poorly), which is one of the main reasons for the re-desisgn.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

that appears to be the type of data where you want/need tables. About the only major thing I can suggest at this point is pull all those style attributes out into CSS classes.
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post by johnperkins21 »

That's kind of what I thought, but I was reading Draco's topic and he said that anything done in tables could be done easier and better in divs. I figured this was an instance where he was wrong, but I thought I'd put it out there.

I plan on putting all the styles into CSS classes, but that's coming later.

I figure I could create a class for each cell with all the attributes including the location, and use div's that way, but it doesn't seem much easier that way.
crabyars
Forum Commoner
Posts: 37
Joined: Thu Jun 17, 2004 8:24 pm

Post by crabyars »

I recently did a massive redesign and site update, and moved everything over to CSS divs. Well.. almost everything..

After spending an hour trying to figure out how to replicate the table structure I needed, I realized I was totally off track.

Tables are great for doing what they were built for... making tables.. data, forms, whatever.

So I would throw a vote for tables for tables, CSS for layout.
Post Reply