A Table, some text and CSS Pseudo Classes
I really want to thank the IE7 team for building in more
Support for CSS. It allows us web developers to do some
pretty cool things with CSS without the use of javaScript.
Unfortunately not all the goodies work with IE7 (:after
:before) but a lot do.
This post is a quick
glance at using CSS Pseudo Classes with Tables. In this
example I will use a regular HTML table, however this will
work with any ASP.NET control that outputs an html
<table>.
First, if you have no idea what a
Pseudo class is please look at
this page by W3Schools.
Let's start with some CSS:
#MyTable
{
width:460px;
}
#MyTable td
{
width:150px;
}
#MyTable td:hover
{
background-color:Black;
color:Yellow;
}
#MyTable tr:hover
{
border: solid 1px green;
background-color:Yellow;
color:Maroon;
}
#MyTable thead tr:hover
{
background-color:ThreeDShadow;
color:White;
}
#MyTable td span:hover:after
{
content: "\00BB";
}
#MyTable td span:hover:before
{
content:"\00AB";
}
#MyTable .row1
{
border:solid 1px white;
}
#MyTable .row1:hover
{
background-color:Aqua;
color:Navy;
}
#Mytable .column1:hover
{
background-color: #1b1b1b;
color: Yellow;
}
#MyTable .column2:hover
{
background-color: #545454;
color: Yellow;
}
#MyTable .column3:hover
{
background-color: #8c8c8c;
color: Yellow;
}
#MyTable .row1 td:hover:before
{
content:open-quote;
}
#MyTable .row1 td:hover:after
{
content:close-quote;
}
You'll notice that the #MyTable is the only declared item that I'm using. This is because CSS can traverse my DOM and apply it's styles to the children based on how I declare it.
Let's look at my HTML Markup:
<table id="MyTable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</thead>
<tr>
<td>Column 1 Row 1</td>
<td>Column 2 Row 1</td>
<td>Column 3 Row 1</td>
</tr>
<tr>
<td>Column 1 Row 2</td>
<td>Column 2 Row 2</td>
<td>Column 3 Row 2</td>
</tr>
<tr>
<td>Column 1 Row 3</td>
<td>Column 2 Row 3</td>
<td>Column 3 Row 3</td>
</tr>
<tr>
<td>Column 1 Row 4</td>
<td>Column 2 Row 4</td>
<td>Column 3 Row 4</td>
</tr>
<tr class="row1">
<td class="column1">Column 1 Row 4</td>
<td class="column2">Column 2 Row 4</td>
<td class="column3">Column 3 Row 4</td>
</tr>
<tr>
<td><span>Text in Span</span></td>
<td><span>Text in Span</span></td>
<td><span>Text in Span</span></td>
</tr>
</table>
This is a very simple Table. The last row contains
text in "span" tags, and the 2nd to last row has class names
on the <td> and <tr> elements. Also notice I do
not declare those classes in CSS, I don't need to.
To
See this in a
working environment
please check out my projects at :
bicnet Projects.
(*Note I don't have time right now to fix a few
issues in my projects section. I'll be updating it and
fixing a few issues later this week... if my baby isn't born
)
Like I said, this is a quick example that shows some
cool things you can do with CSS. Sometimes you don't need to
purchase those kick ass controls from Telerik, all you need
to do is put your head down, look at some cool
examples of sites
and
tables and then pilfer what you need.
Here's a list for those that wish to learn more about
Design and CSS (because I am no expert at design):