Skip to main content
E
English100
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
    Nancy OSheaCommunity 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
    E
    English100Author
    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

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 9, 2016

    Nancy

    Okay thanks for sticking with me on this journey. So in my_styles_default.CSS file I add this:

    /* font characteristics*/

    <style>

      .storybody {

      font-family: Arial;

      color: #2B2B2B;

      font-size: 16px;

      background-color: #EDFCD9;

    }

    And in Code window of my story file I add this to make all of the text in the main body (the center cell of a table) be what my .storybody has defined in the CSS file?

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

      <tbody>

        <tr>

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

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

            <div id="storybody">

         ALL OF YOUR STORY GOES HERE....

         </div>

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

        </tr>

      </tbody>

    </table>

    Thanks

    Alan


    You don't need tables for any of this.

    You can simplify this a lot with a basic CSS layout.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Unique Page Title</title>

    <style>

    /**MOVE THIS CSS CODE TO YOUR STYLESHEET**/

    body {

        width: 85%;

        margin: 0 auto;

        background-color: #EDFCD9;

        font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;

        color: #2B2B2B;

        font-size: 16px;

    }

    .center { text-align: center; }

    .right { text-align: right }

    .justify { text-align: justify }

    </style>

    </head>

    <body>

    <h1 class="center">Heading 1</h1>

    <h2 class="center">Heading 2</h2>

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim.</p>

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim.</p>

    </body>

    </html>

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices