Css Table with Header

by Kyle Mitofsky

HTML

First row with <b>T</b>able<b>D</b>ata element
<table class='blueTable' id='topRowTD'>
    <tr>
        <td style="width:40px">A</td>
        <td style="width:40px">B</td>
        <td style="width:40px">C</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Do</td>
        <td>Re</td>
        <td>Me</td>
    </tr>
</table>
<br/>
First row with <b>T</b>able<b>H</b>eader element
<table class='blueTable' id='topRowTH'>
    <tr>
        <th style="width:40px">A</th>
        <th style="width:40px">B</th>
        <th style="width:40px">C</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Do</td>
        <td>Re</td>
        <td>Me</td>
    </tr>
</table>








<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    Find documentation: <a href='http://www.w3schools.com/cssref/sel_firstchild.asp'>CSS :first-child Selector</a><br/>
    Find documentation: <a href='http://www.w3schools.com/html/html_tables.asp'>HTML Table</a>
<div>

CSS

.blueTable {
    border: blue 1px solid;
    border-collapse: collapse;
}
.blueTable td {
    border: blue 1px solid;
}
#topRowTD tr:first-child td {
    background-color: #CCFFFF;
}
#topRowTH th {
    background-color: #CCFFFF;
    border: blue 1px solid;
}