Sample Tables with CSS

Examples of How to Modify Tables with CSS

A Standard Table with Head and Body

Uses this HTML:

<table>
<thead>
<tr><th>Name</th><th>Alias</th></tr>
</thead>
<tbody>
<tr><td>Jennifer Kyrnin</td><td>Web Design / HTML Guide</td></tr>
<tr><td>Mark Kyrnin</td><td>PC Hardware / Reviews Guide</td></tr>
<tr><td>Shasta</td><td>Moe</td></tr>
<tr><td>McKinley</td><td>Kinkin</td></tr>
</tbody>
</table>

And this CSS:

table { margin: 1em; }
td, th { padding: .3em; }

Return to article

A Standard Table with a CSS Border

Uses the same HTML as above and this CSS:

table { margin: 1em; border: 1px solid #ccc; }
td, th { padding: .3em; }

Return to article

Borders on the Cells

Uses the same basic HTML (see above) and this CSS:

table { margin: 1em; }
td, th { padding: .3em; border: 1px #ccc solid; }

Return to article

Pushing the Cells Together

Uses the same basic HTML (see above) and this CSS:

table { margin: 1em; border-collapse: collapse; }
td, th { padding: .3em; border: 1px #ccc solid; }

Return to article

Color on the Header

Uses the same basic HTML (see above) and this CSS:

table { margin: 1em; border-collapse: collapse; }
td, th { padding: .3em; border: 1px #ccc solid; }
thead { background: #fc9; }

Return to article

Color on the Body

Uses the same basic HTML (see above) and this CSS:

table { margin: 1em; border-collapse: collapse; }
td, th { padding: .3em; border: 1px #ccc solid; }
thead { background: #fc9; }
tbody { background: #9cf; }

Return to article

Highlight Rows

Uses this HTML:

<table class="hilite" id="highlight">
<thead>
<tr><th>Name</th><th>Alias</th></tr>
</thead>
<tbody>
<tr><td>Jennifer Kyrnin</td><td>Web Design / HTML Guide</td></tr>
<tr><td>Mark Kyrnin</td><td>PC Hardware / Reviews Guide</td></tr>
<tr><td>Shasta</td><td>Moe</td></tr>
<tr><td>McKinley</td><td>Kinkin</td></tr>
</tbody>
</table>

Uses this CSS:

table { margin: 1em; border-collapse: collapse; }
td, th { padding: .3em; border: 1px #ccc solid; }
thead { background: #fc9; }
tbody { background: #9cf; }
#highlight tr.hilight { background: #c9f; }

Uses this JavaScript:

function tableHighlightRow() {
  if (document.getElementById && document.createTextNode) {
    var tables=document.getElementsByTagName('table');
    for (var i=0;i<tables.length;i++)
    {
      if(tables[i].className=='hilite') {
        var trs=tables[i].getElementsByTagName('tr');
        for(var j=0;j<trs.length;j++)
{
          if(trs[j].parentNode.nodeName=='TBODY') {
            trs[j].onmouseover=function(){this.className='hilight';return false}
            trs[j].onmouseout=function(){this.className='';return false}
          }
        }
      }
    }
  }
}
window.onload=function(){tableHighlightRow();}

Return to article

Highlight a Row by Clicking on It

Double click on the same row to turn off the highlight.

Uses this HTML:

<table class="clickon" id="clickme">
<thead>
<tr><th>Name</th><th>Alias</th></tr>
</thead>
<tbody>
<tr><td>Jennifer Kyrnin</td><td>Web Design / HTML Guide</td></tr>
<tr><td>Mark Kyrnin</td><td>PC Hardware / Reviews Guide</td></tr>
<tr><td>Shasta</td><td>Moe</td></tr>
<tr><td>McKinley</td><td>Kinkin</td></tr>
</tbody>
</table>

Uses this CSS:

table { margin: 1em; border-collapse: collapse; }
td, th { padding: .3em; border: 1px #ccc solid; }
thead { background: #fc9; }
tbody { background: #9cf; }
#clickme tr.clicked { background: #ff0; }

Uses this JavaScript:

function tableHighlightRow() {
  if (document.getElementById && document.createTextNode) {
    var tables=document.getElementsByTagName('table');
    for (var i=0;i<tables.length;i++)
    {
      if(tables[i].className=='clickme') {
        var trs=tables[i].getElementsByTagName('tr');
        for(var j=0;j<trs.length;j++)
{
          if(trs[j].parentNode.nodeName=='TBODY') {
            trs[j].onclick=function(){this.className='clicked';return false}
            trs[j].ondblclick=function(){this.className='';return false}
          }
        }
      }
    }
  }
}
window.onload=function(){tableHighlightRow();}

Return to article

Discuss in my forum

• html tables
• examples