WEB Do <table>s have to go inside or outside of <div>s?

Discussion in 'OT Technology' started by Falconer, Feb 17, 2009.

  1. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    Sorry if this is a dumb question, I'm absolutely horrible at CSS.

    I have a huge table of data I need to display so I'm gonna use a <table>. Now I still want that table to have properties assigned to it through CSS.

    My CSS looks like this:
    Code:
    div#main p {color: #000000;
    text-align: right;
    padding-left: 10px;
    padding-right: 10px;}
    I know that's right cuz I copied it from another site of mine where it works.

    As for the html, first I tried this:
    Code:
    <div id="main">
        <table>
           [table data]
        </table>
    </div>
    That correctly displayed in Dreamweaver, but while previewing in IE and FF it completely ignored the CSS.

    So then I tried this:
    Code:
    <table>
        <div id="main">
           [table data]
        </div>
    </table>
    That also correctly displayed in Dreamweaver, but while previewing in IE and FF it completely ignored the CSS again.

    I know this can't be that hard. What am I missing?

    As a side question, how do you guys not get super pissed while developing with CSS? It seems like it's working in Dreamweaver, but then it doesn't work when you preview it in FF. So you finally get it to look right in FF, but then it doesn't look right in IE. Doesn't that infuriate you??
     
  2. intrktevo

    intrktevo New Member

    Joined:
    Oct 18, 2004
    Messages:
    5,781
    Likes Received:
    0
    Location:
    UCF
    <table id="main">
     
  3. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    ^ srsly?

    Well that didn't work either.
     
  4. Mikenotmike

    Mikenotmike

    Joined:
    Jun 1, 2001
    Messages:
    6,244
    Likes Received:
    0
    Location:
    USA
    this

    #main {
    width: 200px;
    }



    #main p {
    color: #000000;
    text-align: right;
    padding-left: 10px;
    padding-right: 10px;
    }



    <table id="main">
    <tr>
    <td><p>Content</p></td>
    </tr>
    </table>


    *edited
     
  5. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    ^ I will try it with that modification to my CSS file.

    Why won't <div>s work?

    I swear I feel like such a retard when it comes to CSS syntax. I understand CSS conceptually, but I cannot actually use it to save my life.
     
  6. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    ^ that doesn't work either. It's still ignoring the CSS file (altho it's still rendering correctly in Dreamweaver).
     
  7. Mikenotmike

    Mikenotmike

    Joined:
    Jun 1, 2001
    Messages:
    6,244
    Likes Received:
    0
    Location:
    USA
    use the edited version, i just updated it...

    divs could go either way..

    #container {
    width: 200px;
    }



    #main p {
    color: #000000;
    text-align: right;
    padding-left: 10px;
    padding-right: 10px;
    }


    <div id="container">
    <table id="main">
    <tr>
    <td><p>Content</p></td>
    </tr>
    </table>
    </div>


    not positive these work :o
     
  8. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    what does adding "width: 200px" do? Well what I'm asking is how would adding that cause it to recognize the CSS file vs. not having it?

    And why does everything work perfectly in Dreamweaver but not in IE or FF?

    CSS is the hardest thing I have ever done. Ever. I learned Japanese to the point of being conversational and that was a piece of freaking cake compared to doing the most simple CSS thing.

    I thought everything between <div id="main"> and </div> tags would take all the characteristics of whatever was called div#main in the CSS file? That's how it works in Dreamweaver, but not in real life.
     
  9. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    the first thing I would do is make sure the the page is linking to the CSS page correctly. Are you using any other styles and are they working correctly other than the table?
     
  10. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    It's correctly linked to the page and yes, all the styles are correctly applying outside of the table.
     
  11. fishbulb

    fishbulb Active Member

    Joined:
    Oct 29, 2001
    Messages:
    6,848
    Likes Received:
    4
    Location:
    md
    Tables have default styling that you need to override:
    http://www.w3.org/TR/CSS21/sample.html

    the old school way to do it was
    Code:
    <table cellpadding="0" cellspacing="0" border="0">
    but that didn't address fonts/colors etc
     
  12. intrktevo

    intrktevo New Member

    Joined:
    Oct 18, 2004
    Messages:
    5,781
    Likes Received:
    0
    Location:
    UCF
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Test</title>
    	<style type="text/css">
    	#main {
    		width: 500px;
    		margin: 0 auto;
    		border: 1px solid black;
    	}
    	#main p {
    		color: #FF0000;
    		text-align: right;
    		padding-left: 10px;
    		padding-right: 10px;
    	}
    	</style>
    </head>
    <body>
    	<table cellpadding="0" cellspacing="0" border="0" id="main">
    		<tr>
    			<td><p>Testing</p></td>
    		</tr>
    	</table>
    </body>
    </html>
    
     
  13. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    ^ That seems to work :o Thanks :bowdown:

    I do have a question, tho (sorry I have to describe this as my sys resourses are full right now and it's not letting me paste a screen shot).

    With that code, in IE the table looks correct, like this basically:

    Code:
    _________________
    |_________[COLOR=Red][U]testing[/U][COLOR=Black]|[/COLOR][/COLOR]
    
    
    But in FF it's got a ton of space above and below it in the cell, and it looks like this:

    Code:
    _________________
    |               |
    |        [COLOR=Red]testing[/COLOR]|
    |_______________|
    
    is there something else somewhere i have to specify?
     
  14. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    padding: 0px?
     
  15. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    Nope. That sounded like a good suggestion tho :dunno:
     
  16. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    in your table
     
  17. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    so <table cellpadding=0>
     
  18. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    already had cellpadding = 0 from the beginning :dunno:

     
  19. intrktevo

    intrktevo New Member

    Joined:
    Oct 18, 2004
    Messages:
    5,781
    Likes Received:
    0
    Location:
    UCF
    you have to reset your margin.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Test</title>
    	<style type="text/css">
    	#main {
    		width: 500px;
    		margin: 0 auto;
    		border: 1px solid black;
    	}
    	#main p {
    		color: #FF0000;
    		text-align: right;
    		padding: 0 10px;
    		margin: 0;
    	}
    	</style>
    </head>
    <body>
    	<table cellpadding="0" cellspacing="0" border="0" id="main">
    		<tr>
    			<td><p>Testing</p></td>
    		</tr>
    	</table>
    </body>
    </html>
    
     
  20. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    im guessing its the <p></p> giving you those margins then
     
  21. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    :bowdown: that worked +rep

    thanks!
     
  22. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    can I have two different IDs in the same table? like if i need to change colors or something?
     
  23. intrktevo

    intrktevo New Member

    Joined:
    Oct 18, 2004
    Messages:
    5,781
    Likes Received:
    0
    Location:
    UCF
    yeah you can just do <element id="id1 id2"> most times however, you will be dealing with multiple classes (<element class="class1 class2">), because an id is a unique identifier so that should suffice
     

Share This Page