...

View Full Version : How to set table border color for top, sides, and bottom



techgearfree
02-22-2005, 04:15 AM
1.) Instead of just setting the entire table to one color, is there a way to only set one side as a color?

2.) Also, if my table has columns and rows, and I set a border, it makes all the column and row lines colored too. It makes it look like a grid. How do I make the columns and rows in the table not have a border, so the border just applies to the outline of the table?

Thank you very much.

rmedek
02-22-2005, 04:55 AM
table {
border-right: solid 1px #000;
}

tr, td {
border: none;
}

techgearfree
02-23-2005, 02:32 AM
I tried giving the table only a border on the right with this code:


<table width="760" height="40" cellpadding="0" cellspacing="0" bgcolor="#00FF00" border-right: solid 1px "#000000";>
<tr>
<td height="38"><div align="center">
<p> {SITE_TITLE} {YEAR}, All Rights Reserved. <br>
<a href="terms.php">Terms</a> - <a href="privacy.php">Privacy Policy</a>
</p>
</div></td>
</tr>
</table>

But it does not work.

When I give the entire table a border it works. The first line looks like this with the entire border:

<table width="760" height="83" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="F4F4F4">
<tr>

Thank you VERY much

_Aerospace_Eng_
02-23-2005, 02:39 AM
this

<table width="760" height="40" cellpadding="0" cellspacing="0" bgcolor="#00FF00" border-right: solid 1px "#000000";>
<tr>
<td height="38"><div align="center">
<p> {SITE_TITLE} {YEAR}, All Rights Reserved. <br>
<a href="terms.php">Terms</a> - <a href="privacy.php">Privacy Policy</a>
</p>
</div></td>
</tr>
</table>
does not work because the stuff in red should be this

style="border-right:1px solid #000000;"

techgearfree
02-23-2005, 02:46 AM
Thanks! And I assume I can change right to be left, bottom, top?

Also, the following is the code for a table with 1 column in the middle.
Now, the first helper posted that I use tr, td {border: none;} I tried to just put {style= "border: none;"} in the code after the first tr, but it just reads it as text. What do I do to make the out line of the box have a border, but not the inside column/seperater?

<table width="760" height="83" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="F4F4F4">
<tr>
<td width="380" height="81"><img src="../My%20Pictures/Free%20Tech/rightcol.gif" width="380" height="72" border="0"></td>
<td width="374">
<blockquote>
<blockquote>
<p align="center">{REFERRAL_EMAIL} <br />
Your E-Mail:
<input type="text" class="input" name="email22" size="25">
<br />
<input type=hidden value="{REFERRAL}" name=referral22>
<input name="Submit2" type="submit" class="input" value="Register">
</p>
</blockquote>
</blockquote>
</blockquote></td>
</tr>
</table>

Thanks

_Aerospace_Eng_
02-23-2005, 02:53 AM
the first poster is referring to CSS, you can do the same by adding style="border:0px;" inside the open td tag for more info on CSS you can go here http://www.w3schools.com/css/default.asp

rmedek
02-23-2005, 11:01 AM
Now, the first helper posted that I use tr, td {border: none;} I tried to just put {style= "border: none;"} in the code after the first tr, but it just reads it as text. What do I do to make the out line of the box have a border, but not the inside column/seperater?

Sorry... I thought you knew some CSS basics. My example was to be put in your CSS.

A simple way to add this to your page would to wrap it in <style> tags and put it in the head section of your document:


<head>
<title>...</title>, etc...

<style type="text/css">
table {
border-right: solid 1px #000;
}

tr, td {
border: none;
}
</style>
</head>


Now every table and td in that document will be affected by the rules you've assigned to it.

http://www.htmldog.com
http://www.w3schools.com

Good tutorials on the basics. Hope this helps...

techgearfree
02-23-2005, 01:36 PM
Thanks! It all works!

burningwheel
03-24-2005, 03:00 AM
what if i only want to apply a color border to one table and not all of them?

Jalenack
03-24-2005, 03:17 AM
then you would use an id to select it:




#borderedtable {
border-right: solid 1px #000;
}

and your html:

<table id="borderedtable">
......
</table>



For more on ID selectors in CSS,

http://www.htmldog.com/guides/cssintermediate/classid/

will get you going

harbingerOTV
03-24-2005, 03:17 AM
.whatever {
border-right: solid 1px #000;
}

tr, td {
border: none;
}

in your HTML

<table class="whatever">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum