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

**Dez** · Dec 2, 2009 07:51

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.

**AutisticCuckoo** · Dec 2, 2009 07:58

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>

**Dez** · Dec 2, 2009 09:01

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.

**dogFang** · Dec 2, 2009 09:23

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.

**Dez** · Dec 2, 2009 09:42

Originally Posted by dogFang

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.

**Dez** · Dec 2, 2009 10:05

Originally Posted by AutisticCuckoo

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.

**AutisticCuckoo** · Dec 2, 2009 23:30

Originally Posted by Dez

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.

Originally Posted by Dez

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.

Originally Posted by Dez

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

.

Originally Posted by Dez

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".

Originally Posted by Dez

(Is it possible for a thumbsup code, to somehow, show as an actual thumbsup like you can on some other message boards ? ?)

Yes, use :tup: for a

icon.

**Dez** · Dec 3, 2009 03:45

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!).

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions