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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    tables - different borders for cells

    i want to put different borders in each cell and i'm having some trouble.

    In the “main title cell” I wanted to put a grey border at the bottom (between “main title” and “in the news”).

    In the “article one cell” I wanted to put a grey border to the right of this cell (between “article one cell” and “in the news”)

    The rest of the table i'll leave the black borders as they are now.

    Help would be appreciated!
    Here is my code:

    my code:
    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body,td,th {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 14px;
    }
    h1 {
       font-size: 24px;
       color: #FFF;
    }
    .headingborder {
       border-bottom-style: none;
       border: 0;
    }
    .bottomborder {
       border-bottom-width: medium;
       border-top-style: none;
       border-right-style: none;
       border-bottom-style: solid;
       border-left-style: none;
       border-bottom-color: #999;
    }
    
    .right {
       border-bottom-width: medium;
       border-top-style: none;
       border-right-style: none;
       border-bottom-style: solid;
       border-left-style: none;
       border-bottom-color: #999;
    }   
    </style>
    </head>
    
    <body>
    <table width="743" border="12" bordercolor= solid grey cellspacing="0" cellpadding="5">
      <tr>
        <td width="348"></td>
        <td width="347" valign="middle" bgcolor="#1F497D"><h1><bottomborder>main title</bottomborder></h1></td>
      </tr>
      <tr>
      
      </tr>
      
        <td valign="middle" bgcolor="#1F497D"><h1><right>article one</right></h1></td>
        <td valign="middle" bgcolor="#1F497D"><h1>In the News</h1></td>
      </tr>
      <tr>
        <td rowspan="5" valign="top"><p><a href="#Alberta"> </a>this is the article goes here</p>
        <p>&nbsp;</p></td>
        <td><p>news also goes here</p></td>
      </tr>
      <tr>
        <td valign="middle" bgcolor="#1F497D"><h1>Contact Us </h1></td>
      </tr>
      <tr>
        <td><p>></a>ws also goes here</p></td>
      </tr>
      <tr>
        <td valign="middle" bgcolor="#1F497D"><h1>Keep in touch!</h1></td>
      </tr>
      <tr>
        <td><p>Twitter</p>
          <p>facebook</p>
        <p>Linkedin</p></td>
      </tr>
      <tr>
        <td colspan="2" bgcolor="#999999"><p>footter</p>
        <strong>list of cities...</strong></td>
      </tr>
    </table>
    </body>
    </html>
    Last edited by VIPStephan; 07-23-2013 at 08:44 PM. Reason: added code BB tags

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    It will be much easier to do if you get rid of the unnecessary table code and wrap the various "cells" inside divs. Then you can style the borders of the divs differently.

    It is easy to do with HTML 4 and CSS but not with the HTML 3.2 you are currently using.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you show me an example?

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Look for any web page with an HTML 4 strict doctype for an example of how to write web pages for web browsers since 1997.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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