SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast snorky's Avatar
    Join Date
    Jul 2003
    Location
    Great Northwet
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    An oopsie in my CSS? - Table attributes

    On this page the border and padding commands are not working in the table. What am I doing wrong?

    CSS:
    .table-bordered {
    background-color : #FFFFCC;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size : 9pt;
    color : Black;
    text-align : center;
    vertical-align : middle;
    padding : 10px;
    border : thin;
    border-color : purple;
    }

    HTML:
    <table class="table-bordered">
    <tr>
    <td><strong>Grades</strong></td>
    <td><strong>Content</strong></td>
    <td><strong>School Board<br>Approval</strong></td>
    <td><strong>Implementation</strong></td>
    <td><strong>Last<br>Adoption</strong></td>
    </tr>
    <tr>
    <td>K-12</td>
    <td>Social Studies</td>
    <td>Spring 2002</td>
    <td>Fall 2002</td>
    <td>1990</td>
    </tr>
    <tr>
    <td>K-12</td>
    <td>Science</td>
    <td>Spring 2003</td>
    <td>Fall 2003</td>
    <td>1987-<br>1999</td>
    </tr>
    ....
    Snorky
    Bless the little children while they're still too young to hate.
    - Tom T. Hall

  2. #2
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change:
    border : thin;
    border-color : purple;
    to
    HTML Code:
    border : thin solid purple;
    And I get the feeling the padding you really want on the <td> instead of the <table> itself. Use:
    HTML Code:
    .table-bordered td {
      padding : 10px;
    }
    (If you want borders between cells you should put them in here as well.)

  3. #3
    SitePoint Enthusiast snorky's Avatar
    Join Date
    Jul 2003
    Location
    Great Northwet
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! great answer, Paul. Thanks.

    You showed me how to fix the immediate problem plus demonstrated a new technique that I hadn't used (or even heard of...)

    Let's see if I have this right:

    Here's how that part of the style sheet looks now -
    .table-bordered {
    background-color : #FFFFCC;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size : 9pt;
    color : Black;
    text-align : center;
    vertical-align : middle;
    padding : 10px;
    border : thick solid purple;
    }

    .table-bordered td {
    padding : 10px;
    border : thin solid purple;
    }

    -- Is this correct? (it does work...)

    -- Is there a better way to declare those rules for td border & padding?

    -- I infer that any time that I use the class "table-bordered" AND use a "<TD> </TD>", then those border and padding rules will be applied. Is that a correct inference?

    Is there a name for this technique or for a rule that is created in this fashion?

    Using a table to display such data is my tried-and-true, warm-and-fuzzy way; however, it's quickly becoming apparent that tables are far too often a crutch. Opening a new can of worms: is there a better way to display this data?

    Thanks, again.
    Snorky
    Bless the little children while they're still too young to hate.
    - Tom T. Hall

  4. #4
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by snorky
    -- Is this correct? (it does work...)
    Looks good to me. If it works and it passes w3c css validation then you're in good shape.
    Quote Originally Posted by snorky
    -- Is there a better way to declare those rules for td border & padding?
    There are other ways to do it, but this looks like the best in this case (e.g. you don't need to add class attributes to all of your <td>s in the markup.)
    Quote Originally Posted by snorky
    -- I infer that any time that I use the class "table-bordered" AND use a "<TD> </TD>", then those border and padding rules will be applied. Is that a correct inference?
    Correct.
    Quote Originally Posted by snorky
    Is there a name for this technique or for a rule that is created in this fashion?
    It uses a descendant selector.
    Quote Originally Posted by snorky
    Using a table to display such data is my tried-and-true, warm-and-fuzzy way; however, it's quickly becoming apparent that tables are far too often a crutch. Opening a new can of worms: is there a better way to display this data?
    Nope, tables are perfect for displaying tabular data like this. (It's the whole point of them really.)
    Quote Originally Posted by snorky
    Thanks, again.
    You're welcome


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
  •