Can you format table contents from an outer DIV tag?

bradsalmon · Oct 13, 2006

Hi all,

I've been digging around all morning and still can't find a definate
answer to this. So hoping someone can tell me that it can't be done or
point me the right way.

Basically because of issues out of my control I have to try and style
the contents of a table from an outer DIV tag. Actually it doesn't have
to be a div tag but I thought it was the only one that could do it.

So something like -

<DIV style="table row1{inner margin-left:3.0pt;font-size:10.0pt;};">
<table bordercolor="#000000" width="100%" border="0" cellpadding="0"
cellspacing="0">
<tr><td bgcolor="#00008b">My Header</td></tr>
<tr><td>All my info</td></tr>
</table>
</DIV>

Is this possible?

FYI: The main browser in use here is IE6 which isn't helping me.

Thanks in advance for any suggestions,

Brad

Andy Dingley · Oct 13, 2006

bradsalmon said:
Basically because of issues out of my control I have to try and style
the contents of a table from an outer DIV tag.

You style things with CSS, not with HTML (any tags). To apply the CSS
you need some way of identifying where it should be applied, known as a
"selector". You _might_ be able to set some properties from the <div>,
but only if the stylesheet applied to the table is already inheriting
them (and for lots of them it won't be).

Now assuming your problem is like that of a server-side include where
there's some boilerplate in the <table> that you can't modify, but you
can modify the page outside this, then this is easy in CSS.

Add a CSS stylesheet to the <head> of the HTML page

<style type="text/css" >
div.foo table td {
margin-left: 3pt;
font-size: 10pt;
}
</style>

Then wrap your table up like this

<div class="foo" >
<table>
[...]
</table>
</div>

Adjust the actual CSS to taste.

If you can address the table itself (maybe add an class attribute to it
itself, or if you can guarantee that it's the only table on the page)
then you might be able to skip the <div> and simplify the selector.

If you don't have access to the <head>, then you can try plcing the
<style> element in the <body> of the HTML. It's not valid, but it does
usually work and can sometimes get you out of a hole.

Toby Inkster · Oct 13, 2006

bradsalmon said:
<DIV style="table row1{inner margin-left:3.0pt;font-size:10.0pt;};">

There is a draft spec somewhere on w3.org which does allow this syntax.
(The HTML and CSS specs don't actually specify exactly which syntax should
be used within the style="" attribute -- are selectors allowed? are
@import rules allowed?)

However, given that there's no official (non-draft) statement that tells
us the syntax to use, the best idea is to use the syntax that is supported
by common browsers, which is:

<div style="property: value; property: value;">

No selectors, @import, @media and so on, as there are no browsers that
support that (yet).

Which leaves you in somewhat of a quandary.

richard · Oct 13, 2006

bradsalmon said:
Hi all,

I've been digging around all morning and still can't find a definate
answer to this. So hoping someone can tell me that it can't be done or
point me the right way.

Basically because of issues out of my control I have to try and style
the contents of a table from an outer DIV tag. Actually it doesn't have
to be a div tag but I thought it was the only one that could do it.

Do your styling via class attributes in the <style> area.
Give each table cell certain styles according to the class name.
One class style can be repeated as needed.
Each cell can have several class names as desired.

<table class="atable">
<tr class="arow">
<td class="adata">
<td class="bdata" class="cdata">

jojo · Oct 13, 2006

richard said:
Each cell can have several class names as desired.

<td class="bdata" class="cdata">

make it <td class="bdata cdata">. There is no need to specify a second
class-attribute for the second class.

bradsalmon · Oct 13, 2006

Thanks to all that replied.

At least I know I'm not going mad and you're suggestions have pointed
me in the necessary direction.

richard · Oct 13, 2006

bradsalmon said:
Thanks to all that replied.

At least I know I'm not going mad and you're suggestions have pointed
me in the necessary direction.

You're not mad. It's the rest of the world that's mad.

Need help with <rowspan> in an HTML table	1	Nov 6, 2024
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Can someone pls help me with a little algorithm script	1	Nov 28, 2024
Help with Visual Lightbox: Scripts	2	May 3, 2023
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
Hiding part of table dynamically with javascript - IE6 does notsupport div inside table.	10	Jun 29, 2009
row bottom border in inner table not matching up with row border in outer table	1	Jun 7, 2006
Removing Extra Table Cell	22	Feb 27, 2011

Can you format table contents from an outer DIV tag?

bradsalmon

Andy Dingley

Toby Inkster

richard

jojo

bradsalmon

richard

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads