#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0

    Div tag inside td tag of table not working


    Hii.. i am new to html programming. i want to ask if I can place div tags inside td tags of table..
    actually i want to assign a different colour to every cell at runtime using javascript..

    like this:
    HTML code snippet:
    <tr>
    <td ><div id="bm16" style='width:"58";background-color:#999933;height:"60";'/></td>
    </tr>

    Js code:
    document.getElementById(bm16).style.background = '#999933';

    please help!!!
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    Welcome to DevShed.

    Yes you can place a DIV element inside a TD element. Was that the only query you had?
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0
    Hey thanks!!!

    I am doing it this way..but it is not filling the cells with background colour at runtime..donno why??
  6. #4
  7. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    This is a Javascript question, not an HTML one, for future reference.

    If you do not encapsulate the element name of "bm16", then your Javascript function will go looking for a variable by that name, not a string. Put quotation marks or apostrophes around "bm16" and your problem should go away.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, dev_ss.

    To add to what Winters said, most CSS properties don't use quoted values. Also most properties require units. Thirdly, I doubt you're really serving your page with an XML mime-type, so you should not use self-closing start tags for elements that aren't empty by definition.
    Code:
    <div id="bm16" style='width:58px;background-color:#999933;height:60px;'></div>
    Out of curiosity, do you have a particular reason for not applying those styles directly to the table cell?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    5
    Rep Power
    0
    Hello dev_ss,

    I tried to use your original code, and it does not work, as you said. Here are a couple of things that may help:

    1) div tags have both an opening and closing tag <div> </div>
    2) In the style, you used width:"58" and height:"60". The correct syntax for that, using pixels, is: width:58px and height:60px
    3) You may have a reason for using the <div> inside the <td>, but if you are using inline style anyway, you may want to put it in the <td> tag.

    I got it to work by using the code below without issue:
    Code:
    <td id="bm16" style='width: 58px; background-color: #999933; height: 60px;'></td>
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    also putting divs in td tags messes up positioning and can play tricks on you while trying to position it via css
  14. #8
  15. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Ludhiana
    Posts
    33
    Rep Power
    0
    <tr>
    <td ><div id="bm16" style='width:"58";background-color:#999933;height:"60";'/></td>
    </tr>

    Firstly, you do not need to use a <div></div> tag in a <td></td> tag as you can directly apply the style on the <td></td> tag.

    Secondly, if you DO intend to use the <div></div> tag, please note that it is a paired tag and cannot work in a self closing way as you have done above.

    Thirdly the correct method of defining an inline style is: style="background:#999933;width:58px;height:60px;"

    You won't need to define it in javascript
  16. #9
  17. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    I think the user has their answer now, shelly, as it was asked a month ago.
    There is nothing wrong with using white space in X/HTML attributes, in fact I would recommend it for ease of reading. Unless you are google and are trying to save every, single bit for your bandwidth, then it really has zero effect.
    I would not recommend inline styling though but that is something else altogether.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.

IMN logo majestic logo threadwatch logo seochat tools logo