Using CSS, how do I set the formatting of just a single cell or a single column?
views:
131answers:
7
+4
A:
Give the cell a class name and style the class.
<td class="cellClass">test</td>
.cellClass { color: #a9a9a9 }
rahul
2009-08-19 12:56:35
The CSS standard defines a pseudo class called **first-child** that would solve thid without specifically using a custom css class, but no browsers support it...
awe
2009-08-19 13:03:44
That CSS declaration will apply to more than one element.
random
2009-08-19 13:04:19
In the question it was mentioned 'just a single cell' and not 'the first cell'.
rahul
2009-08-19 13:05:27
@awe: All modern browsers support it, even IE8.
Cory Larson
2009-08-19 13:05:43
A:
give the cell/column a class or id and use css to apply the formatting to that
Flo
2009-08-19 12:56:40
A:
For table cells, you'll need to give it some sort of identifier such that you can refer to it. Depending on your needs, this will be either a class or an id.
<td class="specialCell">...</td>
In your CSS you can then apply different formatting:
.specialCell { color: red; }
If you want to apply different styles to a column, there is the <col> tag, but browser support is limited. You're probably better to apply that class to all elements manually (or by using Javascript)
nickf
2009-08-19 12:57:58
+4
A:
Use the ID selector to target just that one element of the page, in this case, a table cell:
<tr>
<td id="foo"></td>
</tr>
Then in the CSS:
#foo
{
//-- CSS styling goes here just for this element only
}
That hash symbol (#) marks that name selector as belonging to an id. You can further lock it down in the stylesheet to apply only to a TD cell with that ID like so:
td#foo
{
//-- CSS styling goes here just for this element only
}
If you add in the rowspan attribute into the TD, you'll be able to turn that into a column and keep the styling you may have set out.
<td id="foo" rowspan="3"></td>
If you mark the CSS selector name with a preceding period (.), like this:
.foo
{
//-- CSS styles
}
that will target class selectors in the HTML and you can style more than one matching element if you apply the CSS class attribute to the tag, like so:
<tr>
<td class="foo"></td>
<td class="foo"></td>
<td class="foo"></td>
</tr>
Don't use CLASS unless it will appear more than once on the page.
random
2009-08-19 12:58:01
Frameworks like ASP.NET alter the ids applied to elements. I'm certain others do the same. If you're going to recommend against ids, it would be best to note this.
krdluzni
2009-08-19 13:04:54
Answer written based on HTML/CSS only as question doesn't seem to mention use of any other frameworks.
random
2009-08-19 13:06:30
@krdluzni: The example specifies id for a div tag, which is a html tag. ASP.NET never alter id's of html tags, but the ID for a .NET tag (Example: **asp:Button**) can result in a different id on the generated html tag.
awe
2009-08-19 13:14:58
+1
A:
Check out the HTML <col> and <colgroup> tags, which allow you to apply formatting to entire columns or adjacent groups of columns at once.
cpharmston
2009-08-19 13:00:18
+1
A:
You can style the COLGROUP that applies:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#special { background:yellow }
</style>
</head>
<body>
<table>
<colgroup></colgroup>
<colgroup id="special"></colgroup>
<tr>
<td>a</td>
<td>1</td>
</tr>
<tr>
<td>b</td>
<td>2</td>
</tr>
</table>
</body>
</html>
Sinan Ünür
2009-08-19 13:04:21
A:
you can assign two names to a column. ex
<div class="foo"></div>
<div class="foo bar"></div>
<div class="foo"></div>
div.foo { color: #fff; }
div.bar { background-color: green; }
perhaps that could solve your problem?
Carl Bergquist
2009-08-19 13:09:42