Topic: Variable number of columns with fixed widths using CSS? Pages that link to <a href="https://ozoneasylum.com/backlink?for=11138" title="Pages that link to Topic: Variable number of columns with fixed widths using CSS?" rel="nofollow" >Topic: Variable number of columns with fixed widths using CSS?\

 
Author Thread
PaulBM
Nervous Wreck (II) Inmate

From:
Insane since: Sep 2003

IP logged posted posted 01-23-2004 21:00 Edit Quote

I've read a lot about using CSS to control page layouts. I've experiemented a bit, and I may have found a tough job for it.
I've been labouring with a page top display the results of a knockout sports competition using tables and it's driving me mad, because of the rowspan hassles.

Is the layout below possible with CSS?

BTW, I want the page to be a fixed size, all columns to be equal.

Paste the code below to see the layout I need to achieve.

code:
<HTML>
<BODY>
<table border=1>
<tr><td colspan=6>Cup Competition</td></tr>
<tr><td>1st Round</td><td>2nd Round</td><td>Quarter Finals</td><td>Semi Finals</td>
<td>Final</td><td>Winner</td></tr>
<tr><td>Game 1</td><td rowspan=2>Game 1</td><td rowspan=4>Game 1</td>
<td rowspan=8>Game 1</td><td rowspan=16>Final</td><td rowspan=16>Winner</td></tr>
<tr><td>Game 2</td></tr>
<tr><td>Game 3</td><td rowspan=2>Game 2</td></tr>
<tr><td>Game 4</td></tr>
<tr><td>Game 5</td><td rowspan=2>Game 3</td><td rowspan=4>Game 2</td></tr>
<tr><td>Game 6</td></tr>
<tr><td>Game 7</td><td rowspan=2>Game 4</td></tr>
<tr><td>Game 8</td></tr>
<tr><td>Game 9</td><td rowspan=2>Game 5</td><td rowspan=4>Game 3</td>
<td rowspan=8>Game 2</td></tr>
<tr><td>Game 10</td></tr>
<tr><td>Game 11</td><td rowspan=2>Game 6</td></tr>
<tr><td>Game 12</td></tr>
<tr><td>Game 13</td><td rowspan=2>Game 7</td><td rowspan=4>Game 4</td></tr>
<tr><td>Game 14</td></tr>
<tr><td>Game 15</td><td rowspan=2>Game 8</td></tr>
<tr><td>Game 16</td></tr>
</table>
</BODY>
</HTML>






[This message has been edited by PaulBM (edited 01-23-2004).]

skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

IP logged posted posted 01-23-2004 21:27 Edit Quote

Yes it can be done:
LISTS..vertical horizontal..or DIVS across and lists down..Or..it is easy!
There is a quirky tweak shown on
http://www.skyetyger.com/kewl.html

It is funny little quirk that is unstable if centered..the resize is an overlay ..not an actual change in the size of the horizontal inline elements..BUT lists work..I was attempting to copy a large table when I created skyetyger.com/graphics.html ...that can be done several different ways..

[This message has been edited by skyetyger (edited 01-23-2004).]

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 01-23-2004 21:34 Edit Quote

uh, I'd keep that in table man, what's the problem with it?

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 01-23-2004 21:54 Edit Quote

You know, that is tabular data, just what tables should be used for.
"Cup Competition" should be in the <caption> element instead though.



[This message has been edited by HZR (edited 01-23-2004).]

viol
Maniac (V) Inmate

From: Charles River
Insane since: May 2002

IP logged posted posted 01-23-2004 23:06 Edit Quote

I don't understand why people hate tables that much.

skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

IP logged posted posted 01-24-2004 00:53 Edit Quote

I can write tables..very complex nested expanding tables..I can do anything with tables and CSS has been hard to learn, slow to be implemented,
frustrated by IE5 hacks and diverse browser implementions..BUT I want control over the text..I write poetry..good bad indifferent..I write metered lines and from the very first web page..I wanted control over the text...the kind of control a pencil and paper provides..Many artists scan or use wacom tablets because mousing in Corel Draw or Photoshop is ...like eating with shoes on your hands..So it is with tables and trying to format text..for absolute control of text..CSS Promises..and I emphasize that.."promises" to provide that.

[This message has been edited by skyetyger (edited 01-24-2004).]

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 01-24-2004 04:36 Edit Quote

I'm fighting off a golf clap. You can style text in a table you know. (x)html and css are seperate things

As HZR said you could use a caption, and thead/foot/body th's and bust the border out of the markup and put it in the stylesheet and you'd be semantacular. Is there a *reason* you're trying to make this out of divs? Or is it just 'the thing to do these days'?

Sorry if I sound a bit like an ass hat today, I like to play the antagonist in this matter of fashion, someone's gotta do it. I don't disagree with the standards but the fashion (especially, and ironically, at the expense of function) gets my panties in a twist.



skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

IP logged posted posted 01-24-2004 17:38 Edit Quote

I agree with you Mabry..The material Paul posted can be done a variety of ways..the selected method should be based on ease of use, compactness of code and the author's preference..but it can be done in CSS. It is Extremely Difficult to control text in tables. Tables block large areas of infinite cyberspace quickly. People can insert text and images in those Tables/boxes..but what is placed in the table is extremely difficult to format...witness the nbsp  , br, spacer gif..all hacks...accepted, familiar but hacks nonetheless. CSS has two problems unresolved..embedded fonts and bratty browsers interpreting the same code two different ways. It is the future and declaring "this is CSS because it is in a style sheet but it is really a table" is ..a bit ..of a waffle..

[This message has been edited by skyetyger (edited 01-24-2004).]

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 01-24-2004 19:49 Edit Quote

You couldn't illustrate my point more clearly if had been trying. I really think you're missing an understanding of some fundamentals, you've been studying hard on how to do things because everyone else is doing them, but you really demonstrate no understanding of why you are doing them.

quote:
Difficult to control text in tables. Tables block large areas of infinite cyberspace quickly. People can insert text and images in those Tables/boxes..but what is placed in the table is extremely difficult to format...witness the nbsp , br, spacer gif..all hacks...accepted, familiar but hacks nonetheless



I'm really not sure what your point here is but I do fell the need to tell you that text formatting is just as easy whether it be in a table cell or a div. There is no difference. You must be saying something and I'm not catching the meaning? And I'm assuming that the hacks you're talking about are the ones to keep table cells open, or open to a certain size for pixel perfect graphical layouts; if that's indeed the case then it really has nothing to do with text formatting.

quote:
"this is CSS because it is in a style sheet but it is really a table" is ..a bit ..of a waffle..



Do you understand what you're saying here? You are aware that CSS is an acronym for Cascading Style Sheets right? If it's in the stylesheet it is indeed, by definition, CSS

You understand why you've lost me and I suspect you need to check into the fundamentals?

This dialog may be entirely about semantics, in more ways than one

skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

IP logged posted posted 01-24-2004 22:29 Edit Quote

Semantics exactly..Anyone who has ever tried to format a haiku, or the poems of ee cummins can tell you..Formatting text in tables in extremely difficult..requiring space gifs, nbsp, br, br , br and it will still break the minute the browser is resized a fraction..

Fundamentals: Notice the lack of tabular indents, the bland sameness of text as most people who place text on a web page are perfectly happy with the fundamentals of having a Margin..and text wrap.. but a line that is indented, the next line margined, then a line indented to a different value..and to hold those values with browser resize and resolution changes..And if I put a dog in a box, place the box in the refrigerator ..the dog is not by definition..hotdog.

Semantics? Yes..It may be that I define tables as html strictly.... inline style/style sheet as CSS..and as I said "it is what is easiest, compact and preferred by the author..there isn't any 'right" way other than the most efficient..*I deleted an innocuous remark from this post ..a questioning of "your credentials.* I avoid personal, and even that small remark bothered me. This is a discussion for mutual benefit, and I learn from the arguments as much as any other form of debate..Happy to argue with you...lol


[This message has been edited by skyetyger (edited 01-25-2004).]

[This message has been edited by skyetyger (edited 01-25-2004).]

[This message has been edited by skyetyger (edited 01-25-2004).]

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 01-26-2004 01:10 Edit Quote

If you're trying to say, in a way that I'm admittedly not following, that it's semantically incorrect to put content such as poetry in a table, you'll get no argument from me, but it appears you're saying it's impossible to format text in a table the same way you would in a div. That's simply not true.

quote:
Formatting text in tables in extremely difficult..requiring space gifs, nbsp, br, br , br and it will still break the minute the browser is resized a fraction..



Taken as written, that is simply untrue as well.

Your second and third paragraphs.. I understandeth not. Woosh, got me stumped like a mutha there pal. Except for the sly removal of a credential question, but oop, nope, there it is. I thought you took that out?! I'm a third degree Dang Fu master if you must know. Top that cool guy. Thanks for refraining from personal attacks.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu