Table type Data with CSS

[Al Neri]

I have a bunch of data charts to display, they're actually baseball standings and I want them displayed as such with X representing the chart of data, so it would look something like what i displayed like:

AL EAST.................................AL WEST........................AL CENTRAL
TEAM WINS LOSSES PCT.....TEAM WINS LOSSES PCT....TEAM WINS LOSSES PCT
TEAM WINS LOSSES PCT.....TEAM WINS LOSSES PCT....TEAM WINS LOSSES PCT
TEAM WINS LOSSES PCT.....TEAM WINS LOSSES PCT....TEAM WINS LOSSES PCT
TEAM WINS LOSSES PCT.....TEAM WINS LOSSES PCT....TEAM WINS LOSSES PCT
TEAM WINS LOSSES PCT.....TEAM WINS LOSSES PCT....TEAM WINS LOSSES PCT


Is there any way I can do this with CSS (i.e. make div's a set size, like the <td> would in the case of a table)

The reason I don't want to use tables is because I have a ton of loops (determine the league, division, etc.) and where to put the <TR>, </TR>, <TD>, and </TD>'s got a bit out of control.

Any help is appreciated!

Thanks!

Don R

 

[skrilla]

Sure you could use divs for something like that, but if it was one thing tables were meant to be for, it is something like this. I think having too many loops has more to do with however you are coding your back-end/what language you are using (php, asp...) etc.

But if you really want to, you could give the divs a width, float them all left, and clear them when you want a new line. It just seems that tables are begging to be used here.

 

[George P Burdell]

This is perhaps one of the few cases in web design where you should use a table. Take a look at all the options for <table> and related tags: I'm sure you'll find something to help customize the table to your requirements.

 

[Crusty]

Tables should be used to display tabular data. Tables should not be used to control the layout of your document.

 

[brikis98]

As others have said, you really should use a table for this. Loops getting out of control is YOUR fault and not the fault of the tables or HTML syntax. Learn to setup your code properly to handle it and you should have no issues. You can make it fairly easy to track the HTML tags with code like:

makeTable()
{
write("<table>");
for each row
addRow(row);
write("</table>");
}

addRow(row)
{
write("<tr>");
for each column
addColumn(column);
write("</tr>");
}

addColumn(column)
{
write("<td>");
write(column data);
write("</td>");

You can make the functions call each other as necessary, but with this setup, your tags will still nest properly.

EDIT --> blah, the attach code feature strips out new lines and is useless 🙁