CSS for tables

Maljonic

Can't get enough of FH
Joined
Dec 22, 2003
Messages
1,297
I was going to put this on the table of lies thread but I thought I may as well start a new topic, seeing as the other one's getting a bit long.

Anyway, is it possible to attach a style sheet to a table so it only affects that particular table; I know you can do just the text formatting, but can you do link text formatting, background images and such that will only affect that table and not the rest of the page? Like say give the table an id then make a style sheet that only refers to that id :)
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
Hi Maljonic

You can indeed :) Just give the element in question an id or class attribute, e.g. <table id="abc"> or <table class="xyz">. IDs are unique for one particular element, classes can be applied to multiple elements to style them all the same.

To target one particular table, just add an id then use the following CSS code to style table ...

Code:
/* Format the table */
#idname
{
  ...
}

/* Format every row of that table */

#idname tr
{
  ...
}

/* Format every heading of that table */

#idname tr th
{
  ...
}

/* Format every cell of that table */

#idname tr td
{
  ...
}
This style of CSS code is called descendant selectors, as each group of elements is a descendant of the other (i.e. inside), e.g.

Code:
<table>
  <tr>
    <td>Hello!</td>
  </tr>
</table>
In this example, <td> is a descendant of <table> and <tr>, just as <tr> is a descendant of <table>. To select the <td>s in this example we'd use the following CSS code:

Code:
table tr td
{
  ...
}
N.B. this would effect every <td> cell in every <table> in that page, as we specified no specific table id.

Naturally you need only include the CSS code you need. Some things, like font styles etc., can be set for the table and then apply to all the elements inside it (<tr>, <th>, <td> etc.). Mostly, though, you'll need to style each elements separately.

Hope this helps

Kind Regards
 

Maljonic

Can't get enough of FH
Joined
Dec 22, 2003
Messages
1,297
Okay I'm a bit lost; I'm trying to format a table with 17 rows all with the same background image to use at my navigation buttons. Just using HTML to put the text in... I'm sure it's only something silly but can you tell me what's wrong with this:

#buttons tr
{
a:link {Color=gold; font-family: verdana, helvetica, sans-serif;text-decoration: none;
a:visited {Color=#FFCC33; font-family: verdana, helvetica, sans-serif; text-decoration: none;
a:active {Color=#FFCC33; font-family: verdana, helvetica, sans-serif; text-decoration: none;
a:hover {Color=#FFFF00; font-family: verdana, helvetica, sans-serif; text-decoration: underline;


background: url(http://www.maljonicsdreams.com/buttons/single_button/one_button.jpg);
background-repeat: no-repeat;

}


Thank you. :)
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
Hi Maljonic

Try this:

Code:
/* Change the ... in the url, vBulletin has abbreviated it */
#buttons tr
{
  background-image:url(http://www.maljonicsdreams.com/butt.../one_button.jpg);
  background-repeat:no-repeat;
}

/* Style properties common to all 'button' table links can be set here, not inside the table CSS above */
#buttons tr td a
{
  font-family:verdana, helvetica, sans-serif;
  text-decoration:none;
}

/* Specific link states are styled below, overriding any of the above settings where necessary */
#buttons tr td a:link
{
  color:gold;
}

#buttons tr td a:visited
{
  color:#FFCC33;
}

#buttons tr td a:hover
{
  color:#FFFF00;
  text-decoration:underline; /* This will override the general no underline setting above */
}

#buttons tr td a:active
{
  color:#FFCC33;
}
Just shout if you have any questions, in can take a while to get used to. Try W3Schools' CSS Tutorials is you have a mo,

Kind Regards
 

Maljonic

Can't get enough of FH
Joined
Dec 22, 2003
Messages
1,297
Thanks, it works: http://www.maljonicsdreams.com/test.htm I will have to get to know CSS properly - I'm sort of doing the rounds with the books in the book store; I've read a book on Javascript; I read a book on Flash; I'm now reading a book on PHP; I've still got CSS, ASP and Java to read about yet. :)
 

fatbusinessman

Fledgling Freddie
Joined
Dec 22, 2003
Messages
810
Just a brief note: if you're only writing web pages, then don't bother with the book on Java. Despite the name it's got no relation whatsoever to JavaScript, and it's designed for programming applications rather than anything web page related.
 

Maljonic

Can't get enough of FH
Joined
Dec 22, 2003
Messages
1,297
I know it has nothing to do with Javascript, I just want to have a go at some Java applications; might leave that one till last though if it's not so useful, I really just wanted to make some nice scrolling text, images and links in boxes etc - live data thingies and such, everywhere seems to charge money for them so i thought I'd figure out how to make them myself. :)
 

Maljonic

Can't get enough of FH
Joined
Dec 22, 2003
Messages
1,297
wyrd_fish said:
... in adition to this you could replace all that JS image swapping, in the menu, with 1 background image and CSS to change the text on top of it
I just wanted to say thanks to wyrd_fish and Jonty for prodding me into getting this done, and helping me to make it work - it's made so much difference already; all that JS image swapping in the code made the site update really slowly in Dreamweaver, whenever I changed anything site-wide I used to go away and leave it running for like half an hour or more, since I got rid of it the site updates in like 20 seconds. And of course, now the buttons are part of my main style sheet, I can change them whenever I want in an instant.

Thanks! :)
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
No problem, Maljonic, glad it's having some benefits for you already :) If you do want to say thanks, try clicking on the ...



... icon next to somebody's post and follow the instructions. This boosts their reputation and lets others know they can be trusted when they dish out advice :)

Keep up the good work!

Kind Regards
 

Shovel

Part of the furniture
Joined
Dec 22, 2003
Messages
1,350
Wow, Jonty's reputation text has actually changed. I fear how much he must have...

Also along the book recommendations line Maljonic, while reading the ASP book will do you no harm at all, you should be aware that as a language ASP is somewhat depreciated and any hosting you get will more likely support PHP (very much like ASP, but free and so more popular with small hosting providers). ASP itself (which is a Microsoft product) has been superceded by Microsoft's ASP.NET technology, which is actually completely different...

You can't really go wrong if you're just trying to learn to program - IIS (which supports ASP) is installed into Windows easily enough (if it's not already there) and is sufficient for local testing. Just bear in mind that you probably wont find much, if any, use for ASP itself in the 'real world'.

Gotta love the speed of technology, eh?
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
Good post, Ben :)

As for my rep, wow, I hadn't noticed that, thanks for pointing it out :D

Kind Regards
 

wyrd_fish

Fledgling Freddie
Joined
Dec 27, 2003
Messages
537
Maljonic said:
I just wanted to say thanks to wyrd_fish and Jonty for prodding me into getting this done, and helping me to make it work - it's made so much difference already; all that JS image swapping in the code made the site update really slowly in Dreamweaver, whenever I changed anything site-wide I used to go away and leave it running for like half an hour or more, since I got rid of it the site updates in like 20 seconds. And of course, now the buttons are part of my main style sheet, I can change them whenever I want in an instant.

Thanks! :)
just glad to help, i'm on holiday atm and bored out of my face
 

wyrd_fish

Fledgling Freddie
Joined
Dec 27, 2003
Messages
537
(stupid edit rule :rolleyes: )

i wrote that page in XHTML btw MJ.

this means that it's alot stricter than HTML, it doesn't for example allow formatting tags such as <font color="red">, it all has to be done via the style sheet to validate, though it'll still display propperly

and all tags ahve to be closed, eg in HTML you could jus put <p> for an indent, XHTML won't allow this, you must put </p> at the end

even single tag elements, such ar <br> neeed to be closed, this is done with a forward slash at the end of the tag, eg <br /> or <hr />. if you miss these it won't validate

(if i think of anything else i'll let you know)
 

MKJ

Fledgling Freddie
Joined
Jun 5, 2004
Messages
1,196
Oh well since I get me a 403 error every time I want to play the game I gonna mess about else-where.

I ain't a coder (yet) but I tend to be good at altering already made code or finding something that will do as I want. The javascript that is used to create background changes on a complete table without having to do much coding is off Dynamicdrive. For simple background changes this script is ideal.

Demo of table background colour changing.

Script can be installed in just minutes and one line of code will convert whole tables. To stop the script from altering the table cell just use 'id="ignore" as in the example.

Me
My site
 

Maljonic

Can't get enough of FH
Joined
Dec 22, 2003
Messages
1,297
That's interesting, the cell backgrounds. :)
 

Jonty

Fledgling Freddie
Joined
Dec 22, 2003
Messages
1,411
Hi guys

For non-IE browsers, the same effect can be achieved using pure CSS, e.g.

Code:
/* Normal cell background colour */

td
{
  background-color:yellow;
}

/* Hover cell background colour */

td:hover
{
  background-color:red;
}
Note that Internet Explorer doesn't support this, so if it's vital you need the effect, you'll need to supplement the above with some Javascript akin to MKJ's example.

Kind Regards

Jonty

P.S. If you use more than one 'ignore' id the page won't validate. Use classes instead which can be assigned to multiple items (the script would need to be changed accordingly).
 

JingleBells

FH is my second home
Joined
Mar 25, 2004
Messages
2,224
:) Jonty posted before I remembered too.

I never trust Dynamic Drive scripts as they generally don't degrade too well and are mostly full of shitty browser detection, use at least a v4 browser people!!!!!!

As for the javascript to make Jonty's CSS work in the abhorrence that is IE, you need to modify the script from A List Apart so your table cell hovers work.
 

Users who are viewing this thread

Top Bottom