SitePoint Sponsor

User Tag List

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

    Padding in table

    I am using the following code...

    <table border="0"cellpadding="40" cellspacing="20" width="80%" span style="font-family: Comic Sans MS;">


    <tr>

    <td style="border: 1px solid black; background: #FEF1B5">

    </tr>
    </table>


    It works great when I check it out in IE, but when I upload it the padding does not work. I need to add space between text and border of table.....??

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not clear - Are you talking about space between text (outside of the table) and the table OR text (with a cell) and the cell border.

    Could really do with knowing the context in which the html snippet you have given resides. That is the whole HTML code of the page that holds the snippet.

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The text INSIDE the table butts up against the border, and I want spacing between it and the border. I had it okay and did something to affect it.

    This is link....see my post from today.... http://www.stoutstandards.com/Latest.html

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything looked OK when I viewed it in Chrome but viewing the source I notice there is no space before cellpadding. I wouldn't of though this was a problem but it might just be the source of the problem.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,803
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    All those HTML attributes have been replaced with CSS.

    The CSS that most affects the appearance of table cells is border-collapse which can be either separate or collapse
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Barnum, this would be a good time to use some basic CSS to save yourself some work. Firstly, change this:

    Code:
    <table border="0" cellpadding="40" cellspacing="20" width="80%" span style="font-family: Comic Sans MS;">
    to this

    Code:
    <table class="box">
    Then add something like this to your style sheet, which you can use over and over just by adding that class to the table:

    Code:
    .box {border:none;
      width: 80%;
      border-collapse:collapse;
      font: "comic Sans MS";
    }
    
    .box td {
      padding: 40px;
    }
    In your original code, you have the word "span" (in red) which doesn't belong there, and may be causing a problem in some browsers.

  7. #7
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Lucknow
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should add px after giving the number in the table attributes. e.g <table cellpadding="40px"></table>

  8. #8
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,263
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Gifts View Post
    You should add px after giving the number in the table attributes. e.g <table cellpadding="40px"></table>
    Incorrect. px should not be put into attributes like this. px should only be put into the style attribute.

    That being said, the answer provided by ralph.m is the better response. Remove visual display elements out of the HTML, and put it into css.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse


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
  •