1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS equivalents of cellpadding and cellspacing

Discussion in 'CSS' started by cma6, Jun 19, 2013.

  1. #1
    When I changed doctype to HTLM5, I was told that the HTML table attributes "cellpadding" and "cellspacing", set to "0", were obsolete.
    How would I do them in CSS?
     
    cma6, Jun 19, 2013 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    The equivalent to cellpadding is simply to set padding on the TD and/or TH. (If it's actually tabular data, you should probably have both!)

    Cellspacing is a bit trickier -- one of the best ways to get the 'zero' behavior is to simply set the table to "border-collapse:collapse;" -- which will also make borders on TD and TH overlap/combine to whichever is largest. The actual equivalent though is "border-spacing", but you need to be aware that Firefox can STILL make a right mess of it (like all it's other endless table bugs dating back a decade and a half), so you're often better off going back to STRICT and using cellspacing anyways...

    Which is typical of most all the idiotic garbage that goes with the steaming pile of manure masquerading as a HTML specification known as 5 says. (can you tell I'm a fan?) and just another reason I see no legitimate reason to migrate past HTML 4 Strict / XHTML 1.0 Strict apart from Apple being complete pricks about video formats; The vast majority of HTML 5 offering ZERO real world improvements so far as actually creating markup is concerned -- which of course is why all the cool stuff that has/should have nothing to do with markup (Canvas, local storage, CSS3) are constantly slapped under it's bannerhead, as without them it's just pointless garbage that pisses on accessibility, simplicity, all in the name of "ooh, shiny"
     
    deathshadow, Jun 19, 2013 IP
  3. cma6

    cma6 Member

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3

    Thank you for the detailed reply. I took a guess and tried this:
    #itemtable{
    width:100%;
    border:0;
    table-layout:fixed;
    border-spacing: 0;
    padding: 0;}
    where that is the styling of the table.
    At least in Dreamweaver, the tables looked good in IE 10 and the latest FF.
    The current HTML 4.01 Strict version can be seen here:
    http://www.vintagetextile.com/early.htm
    Since I don't understand anything about border-collapse, and I want to use a style sheet to set padding on the table, rather than on TDs, what do you think of my solution?
     
    cma6, Jun 19, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    It would be fine except for one thing -- what the devil makes that tabular data? You're not using row/columnar relationships in a meaningful fashion there, so NONE of that has any business in a table. What you have there is a perfect example of tables for layout -- and that's a bad thing.

    ... along with the H1 that should probably be a H2, the IMG that has no business in the markup and should probably be the H1, the run-on sentence masquerading as a menu, the non-breaking spaces doing padding's job, the H2 that's not even around a structural heading, paragraphs around non-paragraph content, overstuffed and useless keyword META, even LESS useful description META, etc, etc...

    Though it is everything I've come to expect from Dreamweaver... and no, that's not a good thing either.

    IF that was tabular data or being presented as tabular data it would be a fine solution -- unfortunately that's ALL the wrong markup/style for that type of content.
     
    deathshadow, Jun 19, 2013 IP