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):