Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to set table border color for top, sides, and bottom

    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.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    table {
    border-right: solid 1px #000;
    }

    tr, td {
    border: none;
    }

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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>
    does not work because the stuff in red should be this
    Code:
    style="border-right:1px solid #000000;"

  • #5
    Regular Coder
    Join Date
    Jan 2005
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by techgearfree
    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:
    Code:
    <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...

  • #8
    Regular Coder
    Join Date
    Jan 2005
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! It all works!

  • #9
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what if i only want to apply a color border to one table and not all of them?

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    then you would use an id to select it:

    Code:
    #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
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.

  • #11
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    .whatever {
    border-right: solid 1px #000;
    }

    tr, td {
    border: none;
    }

    in your HTML

    <table class="whatever">


  •  

    Posting Permissions

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