PDA

View Full Version : How do I apply CSS to one particular table?


likegluelikecrew
10-18-2005, 05:12 PM
I have my layout done in tables, and I want to add cell padding to just one particular table on the page. How do create a CSS style for just that particular table? Do I have to surround it with a div tag or id it somehow? I'm not used to doing this so if someone could let me know I'd appreciate it, thanks...

We Are 138

gmcrone
10-18-2005, 11:43 PM
No, just name your table.

CSS
table.myname {
css properties
}

HTML

<table class="myname"> etc

Mike...

likegluelikecrew
10-19-2005, 02:33 PM
Ok, I created a new CSS style with the advanced selecter called #tabledefault and under the box category I applied 10 pixels of padding and clicked ok. I have a table as a library item and I ID'd it tabledefault with the properties inspector, then I dragged it onto a page that has my style sheet attached and detached the table from the library. The problem is it still has no cell padding. Even when I create a table not as a library item but directly on the page and ID it as tabledefault, still there's no cell padding. I tried editing the #tabledefault style and applied a 10 pixel margin, and it seems to work (it made the table 20 pixels wider though, is it supposed to do that? I'm just trying to indent the text inside of all cells of the table 10 pixels from the edge of the cell, not make the table any wider). What am I doing wrong? Here's the CSS code...

}
#tabledefault {
padding: 10px;
}

Also, how would you apply cell spacing with CSS, since there doesn't seem to be that option inside of the edit CSS dialog box? Any help would be greatly appreciated, thanks!

We Are 138

davidj
10-19-2005, 02:35 PM
do you mean cell spacing defined within the <td>

e.g...


<td width="90"></td>


???? the size of the cell

likegluelikecrew
10-19-2005, 07:41 PM
No, the cell padding, like in the properties inspector, that puts space between the content of the cell and the cell's border...

By the way, how do I center an ID'd table using CSS?

We Are 138

likegluelikecrew
10-19-2005, 07:47 PM
Also, I noticed when I applied the cell padding to my table that I ID'd as tabledefault, the table that I had nested within it also got the cell padding applied to it, which I don't want. How do I get around that? Thanks big time!

We Are 138

gmcrone
10-19-2005, 10:34 PM
What you are trying to do is add a left margin to each cell and not padding to the table itself then, right?

Padding adds your specified size to all sides equally.

Adding 10px padding adds 10px left AND right

If I read what you want correctly, you want to increase the left margin of each cell

If so then you add the CSS

td {
margin-left: 5px; (or 2em or 5% or whatever you need)
}

Then you remove the properties you gave to the table itself. Just use the CSS on the td tag

Mike....