Table Border Color - Need help with deprecated tags/values

Get Started
1

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:

<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

Hi thricipio. Welcome to the forums. :slight_smile:

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:



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

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

[font=verdana]

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![/font]

5

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. :slight_smile:

—Thri
¯¯¯¯¯¯¯¯

6

No probs. Glad we could help. :slight_smile:

7

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

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

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):

<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.