Can you format table contents from an outer DIV tag?

Discussion in 'HTML' started by bradsalmon, Oct 13, 2006.

  1. bradsalmon

    bradsalmon Guest

    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
    bradsalmon, Oct 13, 2006
    #1
    1. Advertising

  2. bradsalmon

    Andy Dingley Guest

    bradsalmon wrote:

    > 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.
    Andy Dingley, Oct 13, 2006
    #2
    1. Advertising

  3. bradsalmon

    Toby Inkster Guest

    bradsalmon wrote:

    > <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.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Oct 13, 2006
    #3
  4. bradsalmon

    richard Guest

    "bradsalmon" <> wrote in message
    news:...
    > 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">
    richard, Oct 13, 2006
    #4
  5. bradsalmon

    jojo Guest

    richard wrote:

    > 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.
    jojo, Oct 13, 2006
    #5
  6. bradsalmon

    bradsalmon Guest

    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.
    bradsalmon, Oct 13, 2006
    #6
  7. bradsalmon

    richard Guest

    "bradsalmon" <> wrote in message
    news:...
    >
    > 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.
    richard, Oct 13, 2006
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mc Lauren Series
    Replies:
    3
    Views:
    1,271
    Neredbojias
    Feb 13, 2010
  2. M Wells
    Replies:
    0
    Views:
    131
    M Wells
    Oct 6, 2004
  3. visu
    Replies:
    4
    Views:
    279
  4. Spadar Programmer

    How to determine outer DIV tag

    Spadar Programmer, Jun 20, 2007, in forum: Javascript
    Replies:
    1
    Views:
    88
    Martin Honnen
    Jun 20, 2007
  5. Tom Y
    Replies:
    1
    Views:
    216
    Elegie
    Jul 12, 2011
Loading...

Share This Page