Table - Date Picker Pattern

by prasun_sultania

HTML

<table class="cal" summary="A calendar style date picker">
    <!-- describe caption or table heading-->
    <caption>
        <a href="cal.php?month=dec08" rel="prev">&lt;</a> January 2008 􀂫
        <a href="cal.php?month=feb09" rel="next">&gt;</a>
    </caption>   
    
    <!-- table header-->
    <thead>
        <tr>
            <th scope="col">Sun</th>
            <th scope="col">Mon</th>
            <th scope="col">Tue</th>
            <th scope="col">Wed</th>
            <th scope="col">Tur</th>
            <th scope="col">Fri</th>
            <th scope="col">Sat</th>
        </tr>
    </thead>
    
    <!-- table body-->
    <tbody>
        <tr>
            <td class="null">30</td>
            <td class="null">31</td>
            <td><a href="#">1</a></td>
            <td><a href="#">2</a></td>
            <td><a href="#">3</a></td>
            <td><a href="#">4</a></td>
            <td><a href="#">5</a></td>
        </tr>
        <tr>
            <td><a href="#">6</a></td>
            <td><a href="#">7</a></td>
            <td class="selected"><a href="#">8</a></td>
            <td><a href="#">9</a></td>
            <td><a href="#">10</a></td>
            <td><a href="#">11</a></td>
            <td><a href="#">12</a></td>
        </tr>
    </tbody>
</table>

CSS

table.cal {
    border-collapse: seperate;
    border-spacing: 0;
    text-align: center;
    color: #333;
}

.cal th, .cal td {
    margin: 0;
    padding: 0;
}

/*style the table caption, to look like one*/
.cal caption {
font-size:1.25em;
padding-top: 0.692em;
padding-bottom: 0.692em;
background-color: #d4dde6;
}

/*float the less than*/
.cal caption [rel="prev"] {
float: left;
margin-left: 0.2em;
}

/*float the greater than*/
.cal caption [rel="next"] {
float: right;
margin-right: 0.2em;
}

/*remove link style from less than and greater than*/
.cal caption a:link, .cal caption a:visited {
text-decoration: none;
color: #333;
padding: 0 0.2em;
}

/*style it better*/
.cal caption a:hover, .cal caption a:active, .cal caption a:focus {
background-color: #6d8ab7;
}

/* style the header row in better way*/
.cal thead th {
background-color: #d4dde6;
border-bottom: 1px solid #a9bacb;
font-size:0.875em;
}

/*gray the default texts, anchors will not be grayed out
* adding shadow give it an embedded cooler look
*/
.cal tbody {
color: #a4a4a4; /*gray color*/
text-shadow: 1px 1px 1px white;
background-color: #d0d9e2;
}

/*give each elements a cool border*/
.cal tbody td {
border-top: 1px solid #e0e0e1;
border-right: 1px solid #9f9fa1;
border-bottom: 1px solid #acacad;
border-left: 1px solid #dfdfe0;
}

/* style the anchors better*/
.cal tbody a {
display: block;
text-decoration: none;
color: #333;
background-color: #c0c8d2;
font-weight: bold;
padding: 0.385em 0.692em 0.308em 0.692em;
}

/* On hover, selection and focus make it recognizable */
.cal tbody a:hover, .cal tbody a:focus,
.cal tbody a:active, .cal tbody .selected a:link,
.cal tbody .selected a:visited, .cal tbody .selected a:hover,
.cal tbody .selected a:focus, .cal tbody .selected a:active {
background-color: #6d8ab7;
color: white;
text-shadow: 1px 1px 2px #22456b;
}

/*selector for column*/
table td:nth-child(1) a{
    color: red;        
}

/*column slector*/
table td:nth-child(1){
    color: red;
}

/*column...