I figured this is a CSS question since I would rather this be handled in the css than the html. http://teamnextstep.com/bluesky/ I want the features column text to be left aligned but the rest to be centered like they are. How do I only select that column in css? Note: the checkmark image will not look that bad.
Well one thing you could do is set your alignmnet for the whole table to left align. Then in the CSS tell it to align just the images in the center. Like this: /* features table ID */ #features { text-align: left; } /* this will center any image inside the table */ #features img { display: block; margin: 0 auto; } Code (markup): I *think* that should work, if not something very similar. It's a little late..... cheers
that does not work. #features is a ID designation and features is not an ID. Is there a way to ID a column or apply a class to it?
Now, I'm a little disappointed in your table : ) You are using images to convey information, and you are using a class on what should be td's with a scope of row (so that the other td's who come afterwards are known to all as belonging under the far left Features column as if it were a sort of header). But that said, it's lucky for you that you have a class on those td's, cause you can use them. table td { text-align: center; vertical-align: middle; } table td.lcol { text-align: left; } I think this is easier than setting the whole table left-aligned first as Jared suggested, simply because of all the columns you have, only one is left and the rest are centered... so, we make less code usually by only listing the exceptions. The td with the class of lcol should also have scope="row" too, just to be more accessible. Also, take a look at your table with images turned off (inless this is an internal application and everyone has images on and aren't blind or listening to this page-- in which case, ignore what I said). *edit is seems that it is already left- aligned. So maybe you did that witht he class already. If you wanted to remove the class but still do the left-aligned, your choice would be (except for IE6, which doesn't understand) to use scope as it needs to be there anyway, and then use an attribute selector: <td scope="row">blah blah</td> td[scope=row] { text-align: left; } But IE6 doesn't understand this, so classes are still safer. There is a "col" available for styling, except it doesn't work cross-browser in all manners and doesn't do text-align... http://www.quirksmode.org/css/columns.html
Yes, I did add the td classes after my last post. I am going to look into your other suggestion so please check back. I also am wondering how to modify just the upper left th, the one with text in it that says Features. I want to change the colors. Thanks
For IE6, you'll need a class. And, there may be a few other browsers who haven't caught up yet, but there's always first-child. th { normal styles; } th:first-child { the th which is the first child of its parent which I'm guessing here is the tr and not the table special style; } Or tr+th { first child of tr which is a th, or, the th who comes directly after the tr special styles; } CSS2 selectors: http://www.w3.org/TR/REC-CSS2/selector.html SOme browsers accept CSS3 selectors: http://www.w3.org/TR/css3-selectors/ which is what I used earlier for the td[scope="row"]. FF2 and 3, Opera, IE7, Saffy3 and 4 understand most of these. There's a list somewhere of who understands what with CSS3 selectors, maybe search google for combinators css3 browser or something.