Connecting Tech Pros Worldwide Forums | Help | Site Map

Positioning table elements with CSS <div> tags

Herbman
Guest
 
Posts: n/a
#1: Jul 20 '05
Hi,

I'm trying to position a <tr> ("row") element with CSS.
The table itself is positioned with <div> tags. The problem is when I
use <div> tags to position the rows within the table nothing happens.

In the following example, I want to position two table rows relative
to the table itself.

Can anyone tell me what I am doing wrong? Please provide sample code.

Thanks

Here is the code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
<!--
..questionText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
-->
</style>
<style type="text/css">
<!--
..instructionText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
}
-->
</style>
<style type="text/css">
<!--
..tableDefault {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000033;
border: 1px solid;
}
-->
</style>
</head>

<body>

<div style="position: absolute; left: 74px; top: 58px; width: 492px;
height: 71px;">
<table width="469" cellpadding="0" cellspacing="1"
class="tableDefault">
<div style="position: relative; left: 100px;">
<tr class="questionText">
<td height="16" colspan="10" valign="top">How satisfied are
you with
the following: </td>
<td width="26"></td>
</tr>
</div>
<div style="position: relative; left: 50px;">
<tr class="instructionText">
<td height="16" colspan="10" valign="top">(fill out
completey)</td>
</tr>
</div>
</table>
</div>

</body>
</html>

Christoph Paeper
Guest
 
Posts: n/a
#2: Jul 20 '05

re: Positioning table elements with CSS <div> tags


*Herbman* <hramos67@yahoo.com>:[color=blue]
>
> The table itself is positioned with <div> tags.[/color]

How do you do that? Usually one would use CSS for that. ;)
[color=blue]
> when I use <div> tags to position the rows within the table nothing happens.[/color]

'Div' isn't allowed inside 'table' nor 'tbody', but 'tr' is. OTOH you can
position /any/ box with CSS, e.g. one generated by an 'tr' element. Your
HTML resp. CSS teachers / books / tutorials should have told you that.
[color=blue]
> In the following example, I want to position two table rows relative
> to the table itself.[/color]

Don't margin or padding work better?
[color=blue]
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px; font-weight: bold;[/color]

font: bold 1em sans-serif;
[color=blue]
> <style type="text/css">[/color]

Why do you use a style element for each ruleset? The 'media' attribute is
useful, but not required.
[color=blue]
> <div style="position: absolute; left: 74px; top: 58px; width: 492px; height: 71px;">[/color]

Better use an ID instead of the 'style' attribute; and on the 'table', not
an extra 'div'.
[color=blue]
> <table width="469" cellpadding="0" cellspacing="1" class="tableDefault">[/color]

Mixing presentational HTML attributes with CSS is hazardous.
These here translate to

table.tableDefault {width: 449px; border-spacing: 1px}
table.tableDefault td {padding: 0}.

--
Useless Fact #5:
'Dreamt' is the only English word that ends in the letters 'mt'.
'I am.' is the shortest complete sentence in the English language.
The longest one-syllable word in the English language is 'screeched.'
David Graham
Guest
 
Posts: n/a
#3: Jul 20 '05

re: Positioning table elements with CSS <div> tags



"Christoph Paeper" <crissov2003Q4@gmx.net> wrote in message
news:bo1sf8$erh$1@ariadne.rz.tu-clausthal.de...[color=blue]
> *Herbman* <hramos67@yahoo.com>:[color=green]
> >
> > The table itself is positioned with <div> tags.[/color]
>
> How do you do that? Usually one would use CSS for that. ;)
>[color=green]
> > when I use <div> tags to position the rows within the table nothing[/color][/color]
happens.[color=blue]
>
> 'Div' isn't allowed inside 'table' nor 'tbody',is 'screeched.'[/color]

What is wrong with tbody being in a table? Are you sure about that?
If your correct then I'd better not be using thead and tfoot as well!
Can you clarify please
David


Andrew Thompson
Guest
 
Posts: n/a
#4: Jul 20 '05

re: Positioning table elements with CSS <div> tags


"David Graham" <david.graham18@ntlworld.com> wrote in message
news:Rr3pb.164$wY2.88@newsfep1-gui.server.ntli.net...[color=blue]
>
> "Christoph Paeper" <crissov2003Q4@gmx.net> wrote in message
> news:bo1sf8$erh$1@ariadne.rz.tu-clausthal.de...[color=green]
> > *Herbman* <hramos67@yahoo.com>:[/color][/color]
[color=blue][color=green]
> > 'Div' isn't allowed inside 'table' nor 'tbody',....[/color]
>
> What is wrong with tbody being in a table?[/color]

I read that as..
'Div' isn't allowed inside 'table' and
'div' isn't allowed inside 'tbody'..

--
Andrew Thompson
http://www.AThompson.info/
http://www.PhySci.org/
http://www.1point1C.org/


Lauri Raittila
Guest
 
Posts: n/a
#5: Jul 20 '05

re: Positioning table elements with CSS <div> tags


In article David Graham wrote:
[color=blue][color=green]
> > 'Div' isn't allowed inside ('table' nor 'tbody'),is 'screeched.'[/color][/color]

Added parenthesis to group words. Notice that there is no "is" between
"nor" and tbody.
[color=blue]
> What is wrong with tbody being in a table? Are you sure about that?
> Can you clarify please
> David[/color]


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Alan J. Flavell
Guest
 
Posts: n/a
#6: Jul 20 '05

re: Positioning table elements with CSS <div> tags


On Sun, 2 Nov 2003, Andrew Thompson wrote:
[color=blue]
> "David Graham" <david.graham18@ntlworld.com> wrote in message[color=green]
> >
> > "Christoph Paeper" <crissov2003Q4@gmx.net> wrote in message[/color]
>[color=green][color=darkred]
> > > *Herbman* <hramos67@yahoo.com>:[/color][/color][/color]
[nothing that you quoted]
[color=blue][color=green][color=darkred]
> > > 'Div' isn't allowed inside 'table' nor 'tbody',....[/color]
> >
> > What is wrong with tbody being in a table?[/color]
>
> I read that as..
> 'Div' isn't allowed inside 'table' and
> 'div' isn't allowed inside 'tbody'..[/color]

Indeed. More accurately, it "isn't allowed as the immediate
descendent of ...". Wrapped in a table cell, which in turn is wrapped
in a table row, div would be fine.

Kris
Guest
 
Posts: n/a
#7: Jul 20 '05

re: Positioning table elements with CSS <div> tags


In article <Pine.LNX.4.53.0311021103310.14438@ppepc56.ph.gla. ac.uk>,
"Alan J. Flavell" <flavell@ph.gla.ac.uk> wrote:
[color=blue]
> On Sun, 2 Nov 2003, Andrew Thompson wrote:
>[color=green]
> > "David Graham" <david.graham18@ntlworld.com> wrote in message[color=darkred]
> > >
> > > "Christoph Paeper" <crissov2003Q4@gmx.net> wrote in message[/color]
> >[color=darkred]
> > > > *Herbman* <hramos67@yahoo.com>:[/color][/color]
> [nothing that you quoted]
>[color=green][color=darkred]
> > > > 'Div' isn't allowed inside 'table' nor 'tbody',....
> > >
> > > What is wrong with tbody being in a table?[/color]
> >
> > I read that as..
> > 'Div' isn't allowed inside 'table' and
> > 'div' isn't allowed inside 'tbody'..[/color]
>
> Indeed. More accurately, it "isn't allowed as the immediate
> descendent of ...". Wrapped in a table cell, which in turn is wrapped
> in a table row, div would be fine.[/color]

"The DIV element in a table is only allowed inside a table cell (TD ot
TH).", that would sum it all up.

--
Kris
kristiaan@xs4all.netherlands (nl)
Christoph Paeper
Guest
 
Posts: n/a
#8: Jul 20 '05

re: Positioning table elements with CSS <div> tags


*Andrew Thompson* <andrew64@bigNOSPAMpond.com>:[color=blue]
> "David Graham" <david.graham18@ntlworld.com> wrote in message[color=green]
>> "Christoph Paeper" <crissov2003Q4@gmx.net> wrote in message[/color]
>[color=green][color=darkred]
>>> 'Div' isn't allowed inside 'table' nor 'tbody',....[/color]
>>
>> What is wrong with tbody being in a table?[/color]
>
> I read that as..
> 'Div' isn't allowed inside 'table' and
> 'div' isn't allowed inside 'tbody'..[/color]

That's how the sentence was meant. The intention to add 'tbody' to the
statement was, that the element is implied in HTML4 (but not in XHTML), i.e.

<table><tr><td>foo</table>

is equal to

<table><tbody><tr><td>foo</td></tr></table>

-- therefore the selector "table>tr" will never match anything in an HTML4
document.

<table><div><tr><td>foo</td></tr></div></table>

could be either

<table><tbody><div><tr><td>foo</td></tr></div></tbody></table>

or

<table><div><tbody><tr><td>foo</td></tr></tbody></div></table>

if it was valid, which it is not.

--
My god lives -- sorry for yours!
Closed Thread