I'm an idiot - Re: tables and external css

Discussion in 'Web Design and Development' started by brianellisrules, Feb 10, 2006.

  1. macrumors regular

    Joined:
    Oct 17, 2003
    #1
    Hi, I'm trying to do probably the most simple thing in the world... format a table using an external stylesheet.

    Code:
    <table class="blah">
    <tr>
    <td>data1</td>
    <td>data2</td>
    </tr>
    <tr>
    <td>data3</td>
    <td>data4</td>
    </tr>
    </table>
    And my stylesheet would look something like:
    Code:
    .blah {border: 2px solid black; font-family: arial; }
    .blah td {text-align: center; }
    I've tried this and about a gozillion variations of this, but to no avail. I've tried wrapping the table in div's, but that didn't work either. I've been fighting with this for a while and I even searched the web but my idiotness must be carrying over to general internet use because I couldn't find anything to help.

    And I was able to get some php to work, but I guess some simple CSS is out of my league... :rolleyes:
     
  2. macrumors 6502a

    steelphantom

    Joined:
    Oct 15, 2005
    #2
    I'm pretty sure you have to do this:

    Code:
    <table>
    <tr>
    <td class="blah"></td>
    </td>
    </tr>
    </table>
    
    Basically, apply the classes to each individual cell, not the entire table. That should work.
     
  3. macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #3
    Try:

    td {text-align: center; }

    No need to declare the class in the td tags.
     
  4. macrumors 6502

    londonweb

    Joined:
    Sep 14, 2005
    Location:
    london
    #4
    If all your tables are going to be the same, you could redefine your td styles, like this:

    td {text-align: center;
    border: 2px solid black;
    font-family: arial;}

    That way, every time you have a td the same style is applied, and if you want different text styles within each cell, just use a div.

    Edit - The phone rang while i was writing this and Mr Smith beat me to it!
     
  5. macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #5
    Rather than use a div where you want a different style in a particular cell, surely it's easier to use an in-line style:

    <td style='text-align: right'>
     
  6. macrumors 6502

    londonweb

    Joined:
    Sep 14, 2005
    Location:
    london
    #6
    Yes, that would work. More than one way to skin a cat, as they say:)
     
  7. macrumors newbie

    Joined:
    Nov 22, 2005
    Location:
    UK
    #7
    I know this might sound obvious, but you are linking to the external stylesheet correctly?
     
  8. thread starter macrumors regular

    Joined:
    Oct 17, 2003
    #8
    Hey everyone, thanks for the responses. A couple of things:

    Yeah, the stylesheet is linked correctly. Other parts of the page are formatted correctly, just not the table.

    I thought of using the generic td {text-align: center} type of option, but I have more than one table on my site and I don't want to start mucking things up.

    I also thought about using an in-line style declaration, but that could get messy as the table gets bigger if I'm going to have to go by hand and change 30-something td tags...

    I'll try applying the class to just the td tag and see how that works.

    Thanks for the help everyone.
     
  9. macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #9
    Of course a purist would say the idea of styles is to replace things like tables ;)

    But moving on...in your case I would probably set a default syle for the most common scenario, eg:

    td {text-align: center;
    border: 2px solid black;
    font-family: arial;}

    then set up styles for the other cases:

    td.onestyle {blah blah;}
    td.anotherstyle {blah blah;}

    and declare as necessary in those td cells:

    <td class="onestyle">

    Then every kind of td style can be changed in your external style sheet.
     
  10. macrumors regular

    Salasm

    Joined:
    Feb 1, 2006
    Location:
    surrounded by mods
    #10
    Did you try:

    table.blah {border: 2px solid black; font-family: arial; }?

    Classes need a parent.
     
  11. macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #11
    Huh? You can set a class as '.class' and declare it in any element. Using 'table.class' merely restricts the declaration of that class to the table element. It isn't a requirement.
     
  12. thread starter macrumors regular

    Joined:
    Oct 17, 2003
    #12
    Tables are still used to display tabular data though... right? ;)

    After some searching and some experimenting, I can get the table formatted correctly using CSS that's placed in the header of the document, but when I put it in an external stylesheet, it craps out on me. Weird.

    And I know the stylesheet is linked correctly because there are other elements on the page which reference the stylesheet that are formatted correctly.

    http://www.brianellisrules.com/milkshakes/index2.php > style in the header (good)
    http://www.brianellisrules.com/milkshakes/index3.php > style in a separate sheet (bad)

    The idea is to pull data from a mysql database and display it in a table. Seems simple enough... and I can get the php/mysql portion to work. It's just the formatting that's hosing me now.

    As far as I can tell, my html and css is valid.
     
  13. macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #13
    Not important, but I always link my external stylesheets with the relative address rather than the absolute. Also there's no reason the body style can't go in the external as well.

    But more to the point, I notice in your external file you still have the likes of:

    .milkshake td { font-size: .75em; vertical-align: top; }

    This should be:

    td.milkshake {...}

    There could be others. It's a whopper of a style sheet and I can't find the energy to check it all :D
     
  14. thread starter macrumors regular

    Joined:
    Oct 17, 2003
    #14
    C'mon, 10KB stylesheets aren't *that* big, are they? ;)

    Thanks for taking a look. The group of 5 milkshake-related ones towards the top are what's giving me a problem. And I'm not doubting the correctness of your suggestion, but it worked that way for the internal CSS... does it need to be changed for an external sheet? I'll give it a shot and see what happens.

    Edit: no change :\
     
  15. macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #15
    I can still see this in your external sheet :confused:

    /*Milkshake Table! /*
    .mcenter { text-align: center; padding: 15px 0 0 0; }
    .mcenter table { margin: 0 auto; width: 70%; }
    .milkshake { text-align: center; font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;}
    .milkshake th { font-size: .8em; font-weight: bold; border: 1px solid black; }
    .milkshake td { font-size: .75em; vertical-align: top; }
     
  16. thread starter macrumors regular

    Joined:
    Oct 17, 2003
    #16
    Yeah, I tried changing it and it didn't make a difference so I switched it back. It works that way when it's in the header so I don't see how that could be the problem.

    Also, I checked my CSS with the w3c validator and it didn't flag that as an error.
     
  17. macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #17
    Have you tried deleting everything from the external style sheet except the milkshake bit? There could be something else in the cascade interferring. The external sheet is a lot bigger than the styles in the head...
     
  18. thread starter macrumors regular

    Joined:
    Oct 17, 2003
    #18
    Those 5 lines of CSS are now the only thing in the stylesheet and still no dice.

    Edit: I changed it back because that's the sheet for the rest of my site and it looks like garbage without it.
     
  19. macrumors 6502a

    Benjamin

    Joined:
    Oct 27, 2003
    Location:
    Portland, OR
    #19
    your problem is that this line...

    /*Milkshake Table! /*

    should be...

    /*Milkshake Table! */

    you have commented out of all of your Milkshake Table! stuff when you used /* to close your comments. you should get yourself a colorized syntax editor... like Smultron or BBedit.
     
  20. thread starter macrumors regular

    Joined:
    Oct 17, 2003
    #20
    You sir, are a genius. And I am an idiot, just like the thread title implies.

    As far as an editor goes... Right now I'm using Davor's PHP Editor which is colorized for php stuff, but not css. I'm also on a PC, so I'm guessing that Smultron and BBEdit are for Mac's...?

    Anyhoo, thanks a million for helping me out. That was driving me insane.
     
  21. macrumors 6502a

    Benjamin

    Joined:
    Oct 27, 2003
    Location:
    Portland, OR
    #21
    Ah a PC editor, not sure, but yeah colorized for CSS editor would help, and it does help a lot. You aren't really an idiot, a comment error like that won't show up in validating it, which is what I tried first but the error wasn't picked up. Anyway NP, glad I could help.
     

Share This Page