SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Is it possible to style a table, differently to the default css ? ?

    If you have a default class in your external css for all tables, that says :

    Code:
    table {
    width:100%;
    color:#000;
    background-color:#fff;
    border-collapse:collapse;
    margin:auto;
    }
    but, there's one table in your website, that you want to be just 200px wide and it had to be styled within the table, (the table code will be used by others, who would have different style sheets), how would you style the relevant table please ?

    I did try :

    Code:
    table css <table width="20px" border="1" border-color="#000" border-style="ridge">
    But that didn't work ?

    Any help appreciated.

    Dez.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Option #1: Use a unique ID for the table and provide alternative CSS rules for that ID in your style sheet:
    Code HTML4Strict:
    <table id="special">...</table>
    Code CSS:
    #special {
      width:200px;
      border:6px ridge #000;
    }

    Option #2: Override the default CSS with a style attribute in your markup:
    Code HTML4Strict:
    <table style="width:200px; border:6px ridge #000">...</table>
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tommy (you sure you're not my Guardian angel in disguise - you keep coming to my rescue over the last few days ;-))

    I had :

    Code:
    <table width="20px" border="1" border-color="#000" border-style="ridge">
    But doing what you suggested :

    Code:
    <table style="width:200px; border:6px ridge #000">
    worked, because I forgot to do the 'style' part !

    One last bit, is it possible to give each cell certain padding, just by giving the table (as opposed to each tr or each td), a style please ? I've googled around, but can't seem to find a way - have tried the code below :

    Code:
    <table style="width:230px; border: 1px #000; margin:4px; cellpadding:4px; cellspacing:4px">
    Which didn't seem to work either ?

    I took off the ridge when I found that IE, doesn't show ridges on borders ? Unless anyone knows of a way to make borders look better, when seen in IE and FF ?

    Dez.

  4. #4
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox uses the highest color contrast when using ridge. Changing other properties of the table can reduce the visual difference.
    Try playing with this table styler, it shows the css used and it's effect.

  5. #5
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dogFang View Post
    Firefox uses the highest color contrast when using ridge. Changing other properties of the table can reduce the visual difference.
    Try playing with this table styler, it shows the css used and it's effect.
    That's an excellent bit of kit, dogFang - that will be very handy.

    Thanks for sharing that with us.

  6. #6
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by AutisticCuckoo View Post
    Option #1: Use a unique ID for the table and provide alternative CSS rules for that ID in your style sheet:
    Code HTML4Strict:
    <table id="special">...</table>
    Code CSS:
    #special {
      width:200px;
      border:6px ridge #000;
    }

    Option #2: Override the default CSS with a style attribute in your markup:
    Code HTML4Strict:
    <table style="width:200px; border:6px ridge #000">...</table>
    Problem solved :

    Code:
    <table cellpadding="4px" cellspacing="4px" style="width:246px; border:solid 1px #000; margin:4px">
    Thanks for all your help Tommy [:thumbsup:] (Is it possible for a thumbsup code, to somehow, show as an actual thumbsup like you can on some other message boards ? ?)

    Dez.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dez View Post
    Thanks Tommy (you sure you're not my Guardian angel in disguise - you keep coming to my rescue over the last few days ;-))
    If so, it's a very heavy disguise.

    Quote Originally Posted by Dez View Post
    One last bit, is it possible to give each cell certain padding, just by giving the table (as opposed to each tr or each td), a style please ?
    No. Inline styles affect only the element for which they are specified. Some properties are inherited by descendant elements, but padding is not one of those.

    You'd need either an external CSS file (recommended) or an internal style sheet (a <style> element within the <head>). Then you could specify generic rules for all table cells – or just the ones in your special table.

    Quote Originally Posted by Dez View Post
    I took off the ridge when I found that IE, doesn't show ridges on borders
    Yes it does, but it computes the shades different from most other browsers. You'll need to use a fairly light colour for the effect to show up in IE, e.g.,
    Code:
    border:6px ridge #ccc
    .

    Quote Originally Posted by Dez View Post
    Problem solved
    Not quite; that's not correct. You cannot specify units for the presentational attributes cellpadding and cellspacing. They are always in pixels unless you specify a '%' character after the number. So use cellpadding="4" cellspacing="4".

    Quote Originally Posted by Dez View Post
    (Is it possible for a thumbsup code, to somehow, show as an actual thumbsup like you can on some other message boards ? ?)
    Yes, use &#58;tup&#58; for a icon.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Many thanks Tommy, have applied the style and taken off the px's - now all happy. The helps been much appreciated.

    Dez.

    (ps. is there anything you don't know ? I may ask you who's gonna win the horse racing at the weekend!).



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
  •