SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table Border Color - Need help with deprecated tags/values

    For a little background on how I arrived at realizing I have a problem, see this forum/post.

    So, here's my situation . . .

    I have some production webpages out there using a now deprecated table attribute: bordercolor="‹·value·›" and below is a sample tag showing the attribute in question:
    Code:
    <table width="100%" cellpadding="9" cellspacing="0" border="1" bordercolor="#ffffff" bgcolor="#dfdfdf">
    All the other attributes seem to still work fine (though I wonder how many are living on borrowed time).

    On any given page, I may have more than one table, each with different attribute values for bordercolor.

    I believe if achieving the same result is doable, then I need to accomplish it using CSS, about which I know almost nothing. I also realize there's a lot to learn when it comes to CSS, and that I need to learn about it in earnest. However for now, I just need some quick help on how to get my tables looking again, the way they're supposed to.

    I'm hoping someone can show me how to incorporate the correct CSS statements within my HTML document. I expect I'll need a separate statement for each uniquely styled table within that document. And then I'll need to know how to modify the tag (see above code), to link it to the applicable CSS statement.

    I expect the code involved will be pretty brief and readily comprehensible, once demonstrated. But I think figuring it out by reading through CSS instructional materials will just take more time than I want to let go by before I can restore my tables to their proper appearance.

    So . . .

    If anyone can help me out with this, I'll be very, very grateful.

    Thanks.
    —Thri

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi thricipio. Welcome to the forums.

    Yes, the way to do this nowadays is with CSS, although browsers aren't going to drop support for those old attributes any time soon, so they will continue to work. CSS is much better, though, as you can change the styles in one place, rather than having to edit every table if you want to change styles.

    With CSS, you'd do something like this:

    Code:
    table {
      border-collapse: collapse;
      background: #dfdfdf;
    }
    
    td {
      border: 1px solid #fff;
    }
    You would ideally put this (and any other CSS rules) in an external .css file and link to it from all pages.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi thricipio. Welcome to the forums.

    Yes, the way to do this nowadays is with CSS, although browsers aren't going to drop support for those old attributes any time soon, so they will continue to work. CSS is much better, though, as you can change the styles in one place, rather than having to edit every table if you want to change styles.
    ·
    · [snip]
    ·
    You would ideally put this (and any other CSS rules) in an external .css file and link to it from all pages.
    Thanks for the reply, ralph.m. This gets me started.

    I have no clue about how to link a *.html doc to a *.css doc. And although I realize that's the more elegant and efficient way to proceed once one has a significant number of CSS statements in play, for now I'm just trying to go for a temporary patch to a problematic situation.

    So, I'm looking to putting the CSS statements at the top of my *.html docs. And then have a particular instance of a table somehow link to or reference the appropriate CSS statement. I don't know how to do that either.

    Since a given HTML doc will have more than one table, each with a different border color, I'm going to have to have more than one set of CSS statements: one for each table within that document. I assume this can be done, but I don't know how to do that either.

    So . . .

    The quest continues.

    In any case, I appreciate you taking the time to reply.

    —Thri

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by thricipio View Post
    I have no clue about how to link a *.html doc to a *.css doc.
    It's dead easy. Within the <head> section of your HTML page, you need a line something like
    <link href="style.css" rel="stylesheet">

    So, I'm looking to putting the CSS statements at the top of my *.html docs. And then have a particular instance of a table somehow link to or reference the appropriate CSS statement. I don't know how to do that either.

    Since a given HTML doc will have more than one table, each with a different border color, I'm going to have to have more than one set of CSS statements: one for each table within that document. I assume this can be done, but I don't know how to do that either.
    Again, piece of cake. Give tables that you want to appear with one particular colour a class, eg
    <table class="type1">
    then in the CSS, you target those tables thusly:
    table.type1 {border:1px solid #123;}

    Of course, if you can find a more descriptive name than 'type1' it will make it easier for you to work with!

  5. #5
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph & Stevie-

    Sorry to have taken so long to respond to your replies. I just want to say that your posts were quite helpful and thank you. You've gotten me across the threshold into the land of CSS.

    Maybe (probably!) more follow-up questions later (soon?)... but for now, thanks again.
    ________
    —Thri
    ¯¯¯¯¯¯¯¯

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by thricipio View Post
    Maybe (probably!) more follow-up questions later (soon?)
    No probs. Glad we could help.

  7. #7
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Since I don't routinely mix and match I don't know the answer to this - if an HTML 3 attribute and a css declaration conflict, who wins?

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I don't think it is so much "who wins" though the CSS styling will obviously be applied after the HTML is loaded and thus effect the final presentational layout in most cases.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Any styling applied via CSS will override any styling applied via HTML even where the HTML styling reference comes last.

    If you try to apply HTML styling via JavaScript after the page has loaded then the CSS styling will still win even though the HTML styling is applied after the CSS.

    For example a page coded as follows will have a white background (as defined by the CSS) and not a black background (as applied via updating the HTML attribute from JavaScript):

    Code:
    <head>
    <style type="text/css">
    body {background-color: #fff;}
    </style>
    </head>
    <body>
    ...
    <script type="text/javascript">
    document.body.bgcolor = '#000000';;
    </script>
    </body>
    The HTML attributes can be considered to be at a level below the lowest level of relevance that can be defined in the CSS so a body background-color reference in the CSS takes precedence over a body bgcolor HTML reference regardless of which order they get defined in.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •