Adding background to the rows/cols of a simple table

liunx · Jan 10, 2008

Now, below is my code for creating a small and simple table with rows and columns : 
 
<HTML> 
<BODY> 
<TABLE BORDER=1> 
 
<tr> 
<td>Name</td> 
<td>Notes</td></tr> 
 
<tr> 
<td>Abraham Lincoln</td> 
<td>Honest Abe : The Best</td> 
</tr> 
 
<tr> 
<td>Franklin D' Roosevelt</td> 
<td>Did a lot for America</td> 
</tr> 
 
<tr> 
<td>George Washington</td> 
<td>The Father of all Presidents</td> 
</tr> 
 
<tr> 
<td>Ronald Reagan</td> 
<td>A nice President for America</td> 
</tr> 
 
<tr> 
<td>Jimmy Carter</td> 
<td>Peace-loving man. Won the Nobel Peace Award.</td> 
</tr> 
 
<tr> 
<td>George W. Bush</td> 
<td>Err....for him...I've no comments.</td> 
</tr> 
 
</TABLE> 
</BODY> 
</HTML> 
 
 
If you copy, paste and view the code in a HTML file and view it in a browser, you'll see a table with several rows and 2 columns. 
 
My questions are : 
 
1) How do I make the background of the first row(Name, Notes) a different color other than white? 
For example, I want grey to be the background color for the 1st row. 
 
2) As you can see, the borders of this table is kind of indented and sunken. How do I make it totally flat, with just a 1 pixel flat black border? 
 
Thanks!

In order to change the background color of either a row, or a cell, you can do this: 
 
<tr style="background-color: green"> 
 
or you can do the same thing for the individual table cells if you don't want the whole row that color. 
 
And for your second question, you want to do is change the border color/width? This can be done using the same method as above: 
 
style="border-width: 1px; border-color: black" 
 
Hope that's what your looking for

.Thanks a lot, Daerus!

The only problem now is that the border thing doesn't seem to show up. 
 
I coded : 
 
<HTML> 
<BODY> 
<TABLE> 
<tr style="border-width: 1px; border-color: black"> 
<td>Name</td> 
<td>Notes</td> 
</tr> 
 
<tr style="background-color: green"> 
<td>Abraham Lincoln</td> 
<td>Honest Abe : The Best</td> 
</tr> 
 
</TABLE> 
</BODY> 
</HTML> 
 
1) But there isn't any border!

I'm sure I coded wrongly somewhere. 
 
2) Lastly, regarding : 
 
<tr style="background-color: green"> 
 
Can I specify a custom color like light blue? I tried replacing 'green' with #000FFC but there seems to be no effect. 
 
Please pardon me for my total foolishness and unchallenged stupidity. Thanks!

Hey there, glad I could help you a bit Xeon

. 
 
Now let's see.. the border thing.. did you want a border around every table cell/row(just as it appears with border="1" only in a different color?)? 
 
If that's what your looking for, I guess you could just go like so: 
 
<table border="1" bordercolor="black"> 
 
The style="border-width: 1px; border-color: black" should go in the <table> tag, but maybe this wasn't what you were looking for, this would put a single border around the whole table(not through-out it, if that makes sense). 
 
Now about the color thing.. the color you chose (#000FFC) would not be considered a 'web safe' color(according to photoshop

), which is why I suspect that it doesn't work with your tables. If you have a program like Photoshop(what I use), or maybe Paint Shop Pro can do this as well.. but they can show you which colors are 'web safe', or if your choosing a color that isn't. Maybe try this one: 0000FF instead of your other one. 
 
Hope this helps

.From Daerus: 
 
Now let's see.. the border thing.. did you want a border around every table cell/row(just as it appears with border="1" only in a different color?)? 
 
If that's what your looking for, I guess you could just go like so: 
 
<table border="1" bordercolor="black"> 
 
The style="border-width: 1px; border-color: black" should go in the <table> tag, but maybe this wasn't what you were looking for, this would put a single border around the whole table(not through-out it, if that makes sense). 
 
Hi there and thanks a lot, Daerus! Things are much closer to what I want now, although it's still not exactly the same. 
I've attached a screenshot to this post to illustrate the border I need.

The code you gave me draws a flat black border around the table, and that's good!

But it also draws borders around each cell. 
 
Thanks, Daerus! U rule!

Xeon!Ah, ok. I see what you need. This is easily done with the cellspacing and cellpadding tags. Add this to the <table> tag: 
 
cellspacing="0" cellpadding="0" 
 
This will set the table spacing and padding between each of the cells/rows to 0 (if you don't specify the cellspacing or padding, it will be a default of 3 I believe). That should get you the result that you want. 
 
Feel free to ask if you have any other questions

.From Daerus: 
 
Ah, ok. I see what you need. This is easily done with the cellspacing and cellpadding tags. Add this to the <table> tag: 
cellspacing="0" cellpadding="0" 
This will set the table spacing and padding between each of the cells/rows to 0 (if you don't specify the cellspacing or padding, it will be a default of 3 I believe). That should get you the result that you want. 
Feel free to ask if you have any other questions 
 
Thanks a lot, Daerus! It's much much better than before, and everything looks fine. The only thing left is that the style of the border seems to be kinda "raised"/embossed, and the kind of border I want is a flat, single line, like when you draw on a paper with a ruler and a pencil : the kinda flat, 1 line border.

I remember seeing this kinda border before, but if it requires time and lots of thinking, then I guess you can forget about it.

Thanks, Daerus!

Xeon.hey Xeon

! 
 
you can also make a background image using Background, I believe!Hi there MorrowWasted!

How have you been? U really should participate more in the CodeGuru forums.

Adding background to the rows/cols of a simple table

liunx

Guest