SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Background color for table

    How do I add a background color to the following:

    <table>
    <tr>
    <td style="border: 1px solid black;">
    <br>
    <p><font size="5"><i><b>"I hope you all have a great Thanksgiving, with all the trimmings. Take the time to spend it with loved ones, and remember they are the real treasures in your life...."</p>
    <br>
    </td>
    </tr>
    </table>

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To keep with your code:
    Code:
    <table>
    <tr>
    <td style="border: 1px solid black; background: #def;"> 
    <br>
    <p><font size="5"><i><b>"I hope you all have a great Thanksgiving, with all the trimmings. Take the time to spend it with loved ones, and remember they are the real treasures in your life...."</p>
    <br>
    </td>
    </tr>
    </table>
    Though you should not use inline style.

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a complete example to play with. It'll show you how to achieve the same result, using different approaches... and even w/o using tables You'll notice in the right way and w/o tables I've added a little left and right padding.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en"><head>
    
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Form</title>
    
      <style type="text/css">
    
        #thanks {
          border:1px solid black;
          font-size:1.5em;
          font-style:italic;
          font-weight:bold;
          background:#def; 
          padding: 1.5em .5em;
        }
    
      </style>
    
    </head><body>
    
      <h1>Tables style</h1>
      <h2>The right way</h2>
      <table id="thanks">
        <tr>
          <td cellpadding="0">"I hope you all have a great Thanksgiving, with all the trimmings. Take the time to spend it with loved ones, and remember they are the real treasures in your life...."
        </td>
        </tr>
      </table>
    
      <h2>The old way</h2>
      <table>
    <tr>
    <td style="border: 1px solid black; background: #def;"> 
    <br>
    <p><font size="5"><i><b>"I hope you all have a great Thanksgiving, with all the trimmings. Take the time to spend it with loved ones, and remember they are the real treasures in your life...."</p>
    <br>
    </td>
    </tr>
    </table>
    
    <h2>W/o Tables</h2>
    <p id="thanks">"I hope you all have a great Thanksgiving, with all the trimmings. Take the time to spend it with loved ones, and remember they are the real treasures in your life...."</p>
    </body></html>

  4. #4
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, as usual...it worked. Appreciate it.

  5. #5
    Non-Member
    Join Date
    Aug 2010
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and if you want to add the background color to the whole table then just use
    <table width="200" border="1" bgcolor="#00FF00">
    <tr><td></td>
    </tr>
    </table>

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Timmytell View Post
    and if you want to add the background color to the whole table then just use
    <table width="200" border="1" bgcolor="#00FF00">
    <tr><td></td>
    </tr>
    </table>
    Or you could join the 21st century
    How about table#whatever {width:200px; border:1px solid; background-color:#0f0;}?


Bookmarks

Posting Permissions

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