Skip to main content
Inspiring
November 7, 2016
Answered

Table Border

  • November 7, 2016
  • 1 reply
  • 2503 views

I'm trying to have a border only on the top and bottom of a table. I used this code to create the styles:

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

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

Then used it in my border thus (I assume TD stands for table definition):

<table width="100%" align="center" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td style="border-bottom: 3px solid #000000;border-top: 3px solid #000000;" >

      <td width="15%" height="45" align="left" nowrap="nowrap" bgcolor="#99CC66" class="style1"> </td>

      <td width="85%" align="left" nowrap="nowrap" bgcolor="#99CC66" class="style1"><a href="http://www/test/index.html" class="stylelinks">HOME</a> | <span class="style4"><span class="style5"><a href="http://www/test/stories.html"" class="stylelinks">STORIES</a></span></span>| <span class="style4"><span class="style5"><a a href="http://www/test/stories.html"" class="stylelinks">CONTACT ME</a> | <a href="a href="http://www/test/donate.html"" class="stylelinks">DONATE </a></span></span></td>

    </tr>

  </tbody>

</table>

But it didn't add any borders. Have I coded it wrong as I couldn't find any where else to set the table border properties?
Thanks

Alan

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Nancy

    I must be doing something wrong. I added the link to my style sheet at the top of the page after <head>

    <link rel="stylesheet" href="my_styles_default.css">

    I moved all my font styles to the style sheet e.g.

    /* font characteristics*/

    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed|PT+Sans+Narrow' rel='stylesheet' type='text/css'>

    <style> 

      body { 

      font-family: 'Open Sans Condensed'; 

      font-size: 16px; 

      text-align: left; 

      }

    I added to my story template where the story text goes:

    <table width="100%" height="261" border="0" align="center">

      <tbody>

        <tr>

          <td width="13%"> </td>

          <td width="62%" align="left" valign="top"><p> </p>

               <p class="body">

         ALL OF YOUR STORY GOES HERE....

         </div>

          <td width="25%"> </td>

        </tr>

      </tbody>

    </table>

    But in my template ALL OF YOUR STORY GOES HERE.... is in Times New Roman font.

    Thanks

    Alan


    Remvoe the <style> tag.  It does not belong in a CSS file because it's HTML code.

    When things don't work, fix your code errors.

         CSS - http://jigsaw.w3.org/css-validator/

         HTML5 - https://validator.w3.org/nu/

    Review HTML and CSS code basics.  You can't build web pages without coding skills.

    W3Schools Online Web Tutorials

    Good luck!

    Nancy O.

    1 reply

    Nancy OShea
    Community Expert
    Community Expert
    November 7, 2016

    First of all, is this for an HTML email or a web site?  Web sites should not use table layouts or inline CSS styles.   It's not good practice. 

    On web sites, CSS for table borders goes in your stylesheet.

    table {

         border: 1px solid #000;

         border-left: none;

         border-right: none;

         width: 90%;

         margin: 0 auto; /**centers it**/

    }

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    Inspiring
    November 7, 2016

    Nancy

    I have not graduated to the school of CSS yet so I'm trying to do it on an HTML page. Also I only want to add top and bottom borders on one table only.

    Thanks

    Alan

    Inspiring
    November 8, 2016

    Same answer as above except add an ID *unique identifyer* to your <table> tag.

    <table id="myTable">

         blah, blah, blah...

    </table>

    And this goes inside your document's  <head> tag.  It's called an embedded stylesheet because it's inside the HTML document.  Never use inline styles.  Nothing good will come from it.

    <style>

    #myTable {

         border: 1px solid #000;

         border-left: none;

         border-right: none;

         width: 90%;

         margin: 0 auto; /**centers it**/

    }

    </style>


    Nancy

    My document already has my_styles_default.css If I add a that code inside the <style> </style> will that add that code to the default style sheet?

    Also should I put all my font styles inside the <style> </style> such as

    .stylestory {

      font-family: Arial Narrow;

      color: #2B2B2B;

      font-size: 16px;

    }


    Thanks

    Alan