Colors in tables

Talk about HTML resources, styles etc.
Post Reply
musafir
Human Abacus
Posts: 233
Joined: Tue Nov 09, 2004 5:35 pm
Location: CA,USA
Contact:

Tables (HTML Design)

Post by musafir » Sun Jul 09, 2006 10:56 pm

Jim Bb

Came across your March 6,2005, post while browsing the forum.

It is a treasure for me (a HTML challenged person). Have been tinkering with it and slowly getting the hang of the codes. Perhaps I missed it, how do I add a background (shaded) for
a table. I have been showing contents from other sources within quotation marks (at the beginniong and end) in my blog. Would like to created a table with shaded background to place such
contents.
:?:

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Using colors in tables

Post by JimBb » Mon Jul 10, 2006 2:20 pm

musafir wrote:Perhaps I missed it, how do I add a background (shaded) for a table.
You have, it's here. But that is pure HTML, and with CSS there is more you can do with it. That's why I have split your question from the original thread, I think it deserves its own thread.

So, first, a copy from that other post:

Colors! Ah jeez, I haven't said anything about colors yet! Let's fix that her and now!

Code: Select all

<table border="3" bordercolor="#FF1111">
  <tr>
    <td width="225">
      Here is your first cell
    </td>
    <td>
      Here is your second cell
    </td>
  </tr>
</table>
I guess you can imagine that bordercolor="color" gives you a colored border around your table. I guess you also know that you can use two ways of indicating a color: by name ("red", "blue", black",...), or by hexadecimal number, of hex number, or hex code, like in the example (which will be a reddish color).
What I guess many of you didn't know is that Internet Explorer and Mozilla/Firefox produce a different result.
Based on the example, ...:
Internet Explorer will put a 3 pixel green reddish line around the table, and a 1 pixel redish line around every cell.
Mozilla and Firefox will put a 3 pixel 3D-stule reddish border around the table, and not color the individual table cells.
(If anyone has info about how other browsers react I'd love to hear about it)

Okay, next step...:

Code: Select all

<table border="3" bordercolor="#FF1111">
  <tr>
    <td width="225" bgcolor="red">
      Here is your first cell
    </td>
    <td>
      Here is your second cell
    </td>
  </tr>
</table>
bgcolor="color" is, as you can see, used for individual cells, not for the entire table. Guess what: this will set the backgroundcolor for this particular cell to red. And of course in stead of the word "red" I could have used it's hex value as well ("#ff0000") - or any other hex value of course.

While on the subject of backgrounds...:

Code: Select all

<table border="3" bordercolor="#FF1111" background="../images/roses.jpg">
  <tr>
    <td width="225" bgcolor="red">
      Here is your first cell
    </td>
    <td>
      Here is your second cell
    </td>
  </tr>
</table>
background="URL of picture" shows, as you guessed, a background. Since it is in the table tag it is for the entire table, it cannot be used for individual cells.
Mind you: it really is a background. In the example the read background-color for the first cell will be on top of that background-picture.

Just a word of warning: I read somewhere (though haven't experienced it with modern browsers) that the background argument may have different results in different browsers.

Now this was pure HTML, as I said at the beginning of this post. CSS allows for more, a lot more, but that is for the next post.

Jim

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

CSS Basics

Post by JimBb » Mon Jul 10, 2006 2:47 pm

Okay, CSS. First the basics: what on Earth is CSS?

CSS stands for Cascading Style Sheet. Well, that still doesn't say much, does it?
  • Cascading indicates that the styles you define build on top of other styles. I you define that the HTML tag <p> has a font-size of 10 pixels, a font-weight of "normal" (so not bold), and the color black, then you don't have to repeat all that on anything that builds on that. Suppose you have a "special" <p> tag then it would be enough to define that this special one has red in stead of black for the fonts, all the rest is taken from the "ordinary" one.
  • Stylesheet indicates that where you define the styles depends on where it fits you best. In each HTML tag, once for an entire HTML page, or in a external file once for an entire site, or a part of it.
Now I reckon this still doesn't make much sense for a lot of people - never mind. Learn how to use it, and the "definition" will become more clear.

So, there are three methods for telling a browser that there are CSS styles that may adjust the standard HTML tags:
  • In an HTML tag: <td style="border-width: 1;"> shows you the syntax. The indigo part is the ordinary HTML tag. Yes, using CSS means you still use ordinary HTML, you just extend it with additional features. And you guessed it: the green part is the CSS inside the HTML tag. Notice the syntax: style="property: value;". If you need more arguments you just repeat this syntax: style="property: value; property: value; property: value;". Just use a semicolon to end everything, and the whole shebang goes between quotes.
  • At the beginning of an HTML page. In the Head-section of your HTML page you add something like the following:

    Code: Select all

    <style type="text/css">
    td {border-width: 1}
    </style>
    Put this block of code in an ordinary HTML page, and every TD-tag will have a border of 1 pixel.
  • In an external textfile:

    Code: Select all

    <link rel="stylesheet" type="text/css" href="/myfile.css" />
    This tells your browser to look in the root of your site for a file called myfile.css. The content of that file is like in the previous option:

    Code: Select all

    img { border-width: 0; }
    font { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; letter-spacing: normal; }
    body { color: #000000; background-color: #ffffff; }
    (That's a part of my own CSS file)
Okay, to avoid confusion, and to properly show which CSS style applies to which HTML element precisely I'll use only the first method in this thread. Just remember that you can put the code elsewhere too, if you like.

Ready, or does this need some sinking in? ;)

Jim
Last edited by JimBb on Fri Aug 11, 2006 5:32 pm, edited 1 time in total.

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Post by JimBb » Mon Jul 10, 2006 3:06 pm

Q: So, how do you use CSS then to add a wee bit of color?
A: Which color, and where exactly?

You'll notice that CSS allows for the most colorful table you can imagine. Let's begin with the beginning:

Code: Select all

<table border="1" style="background-color: red;">
  <tr>
    <th>
      Column Header
    </th>
  </tr>
  <tr>
    <td>
      Here is your first cell
    </td>
  </tr>
</table>
background-color: red; is the same as background-color: #FF0000;, as you probably guessed. It gives the indicated background color to the HTML tag. In the example I added it to the <TABLE>tag, so this would produce a red table, including borders.

Code: Select all

<table border="1">
  <tr>
    <th>
      Column Header
    </th>
  </tr>
  <tr>
    <td style="background-color: red;">
      Here is your first cell
    </td>
  </tr>
</table>
Same code, different place. Now only the one cell will have a red background, nothing else, not even the border around it.

Code: Select all

<table border="1">
  <tr>
    <th>
      Column Header
    </th>
  </tr>
  <tr style="background-color: green;">
    <td style="background-color: red;">
      Here is your first cell
    </td>
  </tr>
</table>
This has a bit of a special effect: the red cell (<td>)is on top of the green that is the background of the row (<tr>). The result is that there is a slight green "shadow" in the 3D-effect the borders create.

Code: Select all

<table border="1" style="background-color: green;">
  <tr>
    <th>
      Column Header
    </th>
  </tr>
  <tr>
    <td style="background-color: red;">
      Here is your first cell
    </td>
  </tr>
</table>
And this combination gives a green table with green borders, and one red cell.

One property (background-color), four different effects, depending on where you use it. Not bad, eh?
By the way, WebMonkey has a nice overview of colorcodes for you.

And these are the tables from this example.

Jim

musafir
Human Abacus
Posts: 233
Joined: Tue Nov 09, 2004 5:35 pm
Location: CA,USA
Contact:

Tables (HTML Design)

Post by musafir » Tue Jul 11, 2006 11:47 am

Many thanks for detailed response. :D

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Re: Tables (HTML Design)

Post by JimBb » Tue Jul 11, 2006 2:53 pm

musafir wrote:Many thanks for detailed response. :D
Who said I was finished? There's more!

Background-colors are just the boring part of decorating tables. You have control over each and every line of that table, we'll discuss that now.

Code: Select all

<table border="6" style="border: 1px solid red;">
  <tr>
    <th>
      Column Header
    </th>
  </tr>
  <tr>
    <td>
      Here is your first cell
    </td>
  </tr>
</table>
Simple, isn't it? Now what would the result be: a 6 pixel border (as the HTML argument indicates) or a 1 pixel border (as CSS indicates)?
CSS overrides HTML. What you will see is a solid 1 pixel border around the entire table, because we added the CSS to the <TABLE> tag.

Look what happens in the next example:

Code: Select all

<table border="6">
  <tr>
    <th>
      Column Header
    </th>
  </tr>
  <tr>
    <td style="border: 1px solid red;">
      Here is your first cell
    </td>
  </tr>
</table>
Now you do have a 6 pixel border around your entire table, since there is no CSS to override it, and a 1 pixel solid red border around that one cell.

Now why do I say "solid"? Does that mean there is more?
You betcha!

Code: Select all

<table border="1" style="border: 1px dotted green;">
  <tr>
    <th style="border: 5px ridge silver; background-color: #dddddd;">
      Column Header
    </th>
    <th style="border: 5px dashed grey; background-color: #dddddd;">
      Another header
    </th>
  </tr>
  <tr>
    <td style="border: 3px double red; background-color: #dddddd;">
      Here is your first cell
    </td>
    <td style="border: 3px groove blue; background-color: #dddddd;">
      And a second cell
    </td>
  </tr>
</table>
Okay, you probably wouldn't do this in a real site, except to shock people, this table just shows a few of the possibilities. I added the background-color property (from the previous post) to show exactly what the relation is to the border and its effects.

So... 4px means the line you're defining is 4 pixels thick.
solid or any other valid style defines the appearance of the line. Valid styles are:
-none
-hidden
-solid
-double (you need a thickness of at least 3px for this) shows a double line with 1 pixel between them
-dotted (Internet Explorer can't do this)
-dashed
-groove (The border looks as though it were carved into the canvas.)
-ridge (The opposite of 'groove': the border looks as though it were coming out of the canvas.)
-inset (makes the cell look "sunken")
-outset (makes the cell look "raised")
blue (or red or green or yellow or ...) or#0000BB (or any other valid hexadecimal RGB code) indicate the base color of the line.

Looks like fun, eh? And wait, we're not there yet!
Unlike with HTML you can define each line in stead of an entire rectangle. Yes, you can make the left line of a cell look different from the top, the right, and the bottom line:

Code: Select all

<table border="6" style="border-top: 1px solid red;">
  <tr>
    <th>
      Column Header
    </th>
  </tr>
  <tr>
    <td style="border: 3px double red; border-top: 1px solid red; border-right: 1px dashed red;">
      Here is your first cell
    </td>
  </tr>
</table>
What this does is show the ordinary 6 pixel border around the table, except at the top.
And the one cell there has a 3 pixel (well, actually 1px + 1px + a space in between) double red line around it, except at the top (where it is solid) and at the right (where it is dashed).
Mind you: the order in which you write these properties is important: the last one overrides the previous ones! That's why the "general" one is first, then the exceptions.

If you want to see the result of all of these tables, click here. And make sure you view them in different browsers, as you'll notice that some browsers are more or less correct than others ;)

Jim

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Re: Tables (HTML Design)

Post by JimBb » Wed Jul 12, 2006 3:48 pm

JimBb wrote:Who said I was finished? There's more!
And we're still not there yet :wink:

Pure HTML allows you to use backgrounds, plain and simple, and in a limited way. CSS can do a lot more:

Code: Select all

<table border="1" align="left" style="background-image: url('image.png');">
  <tr>
    <th>
      First Table
    </th>
  </tr>
  <tr>
    <td width="100" height="100" style="background-color: red;">
      Here is your first cell
    </td>
  </tr>
</table>
This is the same old table. The only difference is that the alignment is set, but that is only to put all the tables in one row in the example. The width and the heigth of the first cell is just to make the background image more visible. In other words: just concentrate on the background image and the CSS code associated with it.

By the way, the background image used is this: Image (it's called image.png). Nothing special, it's just partly transparant to show you what happens if you combine a few things.

So, what is so special about this first example? background-image: url('image.png');. It's added to the <TABLE> tag, so the entire table, borders included, now has a background image. The entire table? No, not that one <TD> tag, since we've defined that it should have a red background-color, and that comes "on top" of the <TABLE> tag, hence the red is on top of the background-image.

So, what happens if we combine a background-color ànd a background-image in one tag?

Code: Select all

<table border="1" align="left">
  <tr>
    <th>
      Second Table
    </th>
  </tr>
  <tr>
    <td width="100" height="100" style="background-color: red; background-image: url('image.png');">
      Here is your first cell
    </td>
  </tr>
</table>
Nothing new, no new parameters, but the effect is different. The image is on top of the color, and since the image is partly transparant, you can see the red through the image.

Yes, ugly, I know, but it's just an example. And it emphasizes that you should thoroughly check if the combination you intend to use really has the effect you want: are you sure everyone can still read the text in your table?

Let's play a little with that code:

Code: Select all

<table border="1" align="left">
  <tr>
    <th>
      Third Table
    </th>
  </tr>
  <tr>
    <td width="100" height="100" style="background-color: red; background-image: url('image.png'); background-repeat: repeat-x;">
      Here is your first cell
    </td>
  </tr>
</table>
background-repeat: repeat-method; indicates how the background image should be tiled. By default it's tiled both horizontally and vertically, but with this property you can control that:
  • repeat is the same as omitting this property: images are tiled horizontally and vertically.
  • repeat-x makes the image tile only horizontally.
  • repeat-y: guess what: it tiles only vertically.
  • no-repeat doesn't tile, it shows the background-image only once.
In other words: you could have a background image that doesn't tile:

Code: Select all

<table border="1" align="left">
  <tr>
    <th>
      Fourth Table
    </th>
  </tr>
  <tr>
    <td width="100" height="100" style="background-color: red; background-image: url('image.png'); background-repeat: no-repeat;">
      Here is your first cell
    </td>
  </tr>
</table>
That may look nice if you have like a flower-decoration in the corner, but with the image we're using it might be better if that background-image is nicely in the middle.
Guess what:

Code: Select all

<table border="1" align="left">
  <tr>
    <th>
      Fifth Table
    </th>
  </tr>
  <tr>
    <td width="100" height="100" style="background-color: red; background-image: url('image.png'); background-repeat: no-repeat; background-position: 50% 50%;">
      Here is your first cell
    </td>
  </tr>
</table>
background-position: coordinates;. The coordinates are calculated from the upper left corner. So the example, 50% 50%, means at 50% of the width (starting from the left hand side), and at 50% of the heigth (starting from the top). Or smack in the middle.
Sooo...:
0% 100% is in the lower left corner.
50% 0% is in the middle, against the top.
50% 100% is in the middle, against the bottom.
And so on.
But, also possible:
10px 20px is, counting from the upper left, 10 pixels to the right, 20 pixels down.
1cm 2 cm is, counting from the upper left, 1cm to the right, 2cm down. Careful here, a cm may be interpreted slightly differently depending on the media you use (print/screen), the resolution, and so on.

And, also possible:
top center = 50% 0% = in the middle against the top.
left center = 0% 50% = against the left side in the middle.
You can use any combination of top, left, bottom and right.

You didn't believe me when I said earlier that with CSS you can create the most colorful table you can imagine, did you?
I hope I have changed your mind a little ;)

(again, the a link to the examples used in this post)

Jim

musafir
Human Abacus
Posts: 233
Joined: Tue Nov 09, 2004 5:35 pm
Location: CA,USA
Contact:

Post by musafir » Mon Jul 24, 2006 3:04 pm

Jim Bb

Had been working on this and today I published my first blog with a table using your tutorial. I'm a klutz when it comes to HTML codes and things of that sort. Found your instructions much more helpful than the books which I had previously consulted.

Expect to improve and add embellishments as I go along.

Thank you. :)

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Post by JimBb » Fri Aug 11, 2006 5:48 pm

musafir wrote:Expect to improve and add embellishments as I go along.
May I offer a bit of feedback? Try <table celpadding="3"> (you may want to experiment a little with that number). that leaves just a bit of colored space around the quoted text, it gives the text some "air"
musafir wrote:Thank you. :)
You're welcome :)

Jim

musafir
Human Abacus
Posts: 233
Joined: Tue Nov 09, 2004 5:35 pm
Location: CA,USA
Contact:

Post by musafir » Mon Aug 14, 2006 5:07 pm

When I began a few weeks back I was successful in creating a simple table based on your tutorial. Now, when I create a table using the same codes, the table looks OK but one of two things happen. (1) The published post does not show the table, or (2) when I
return to a "saved draft" it no longer shows the table.
The code undergoes a change (see below).

Code used: <table>
<tbody>
<tr>
<td width="620" bgcolor="azure">

It becomes:<table><tbody>
<tr>
<td bg="" width="620" style="color:azure;">

What is the possible explanation? :?
Regards

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Post by JimBb » Mon Aug 14, 2006 5:16 pm

Most likely the online editor you're using, or something that's done by default by something running on the server every time you update, some kind of a "validator" to avoid that you make mistakes that mess up a page.

Oddly enough it makes a mistake, since your "bgcolor" HTML tag is not the same as the CSS property "color". To have the same effect it ought to be "style=background-color: azure;"

Maybe try replacing...:
<td width="620" bgcolor="azure">
by
<td width="620" style="background-color:azure;">
or
<td width="620" style="background-color:#F0FFFF;">

I don't know what this "validator" exactly does, but maybe it interprets this code more correctly.

Jim

musafir
Human Abacus
Posts: 233
Joined: Tue Nov 09, 2004 5:35 pm
Location: CA,USA
Contact:

Post by musafir » Wed Aug 23, 2006 7:35 pm

Re: your message Aug.14th

Was away for a week. Followed your suggestion (replaced the code)and it worked. Shall keep my fingers crossed and work on improving the look of the page.

Many thanks. :)

Post Reply