Tableless layout problem - please help!

[Richard Lissimore]

Hi,

I'm a newbie, and I'm trying to recreate the table below in CSS:

<table border="1" width="100%" id="table1">
<tr>
<td width="145">Player Name::</td>
<td>Pele</td>
</tr>
<tr>
<td width="145">Nationality::</td>
<td>Brazil</td>
</tr>
<tr>
<td width="145">World Cup Debut:</td>
<td>1956</td>
</tr>
<tr>
<td width="145" valign="top">Highlight:</td>
<td>For many, Pele is the greatest player ever to have
kicked a
football. Winning his first World Cup winner's medal
aged 16 in 1956, he
later went on to be a member of the Brazil 1970 team,
the greatest world
cup team ever, and the most recognisable ambassador
for Football in the
world.</td>
</tr>
</table>
I need it so that it resizes then wraps the second column, whilst the
first column stays fixed, like in the table, and the text from the
second column doesn't appear beneath the first column text.

The information really isn't suited to go in a table, as IMHO its not
tabular data, just headings and related text.

Any assistance is greatly appreciated.

Cheers,

Richard Lissimore.

[Andrew Thompson]

On Tue, 31 Aug 2004 21:51:15 +0100, Richard Lissimore wrote:

<td>Pele</td>
So this is the 'Player' column,..
<td>Brazil</td>
'Team/Nationality' column,..
<td>1956</td>
'Year' column,..
<td width="145" valign="top">Highlight:</td>
(this should be a column header,) for the..
<td>For many, Pele is the greatest player ever to have

'Highlight' column of this..
*TABLE* of information, fer chrissake!

Do not use tables for *presentation*.

*Use* tables for columns and rows of
data, ..*exactly* like you have.

HTH

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[Brian]

Richard Lissimore wrote:

I'm a newbie, and I'm trying to recreate the table below in CSS:
Following up on A. Thompson: You cannot recreate an HTML element in
CSS, even if you might be able to recreate some of the visual layout
aspects of an element as many browsers display it. What you have is a
table, so use table markup for it. It is remarkable that "Don't use
tables for layout" has become "Don't use tables" period.
<table border="1" width="100%" id="table1">
Feel free to move the border and width attributes out of the page and
use css instead. Consider using an id that is more meaningful, too.

<table id="playerstats">

table#playerstats {
width: 100%;
}

table#playerstats th, table#playerstats td {
border: 1px solid #000;
}
<tr>
<td width="145">Player Name::</td>
<td>Pele</td>
</tr>
It looks like the first column contains headers for the second
column. So change the markup slightly.

<tr>
<th>Player Name::</th>
<td>Pele</td>
</tr>

Then change the presentation with css. Note, though, that pixels are
the wrong choice for setting widths on screen, where you don't know
the display medium's properties. Either use percentages, or go with em
units.

table#playerstats th {
width: 145px; /* bad, use something more flexible */
}

Note that th is often displayed bold and centered. If you don't
want that, and want to use em units for width, try this:

table#playerstats th {
width: 15em; /* change 15 to whatever number works best */
font-weight: normal;
text-align: left;
}
The information really isn't suited to go in a table,
! It looks like tabular data to me.
as IMHO its not tabular data, just headings and related text.

Erm, isn't that what tabular data *is*?

--
Brian