Styling tables with CSS

Q: How hard is it to style a table and specific cells a certain way with CSS?

A: How hard? Styling tables via CSS is easy!

The Challenge

The table in the screen capture below is styled using HTML. How can it be converted to using only CSS for the styling?

Simple CSS Method

Using CSS to style a table is easy, and greatly simplifies the markup. This method is rendered as desired in current browsers with CSS2 support (Opera, Mozilla, Netscape 6+). Take a look at the style sheet and markup displayed below.

Using classes for broader support

Unfortunately, Internet Explorer for Windows (as of version 6) does not support CSS2 selectors. Therefore, we have to resort to using classes to give style in IE. Take a look at the style sheet and markup displayed below.

Style sheets and markup

Simple CSS Method

table {
	font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 320px;
	}

th {
	padding: 0 0.5em;
	text-align: left;
	}

tr.yellow td {
	border-top: 1px solid #FB7A31;
	border-bottom: 1px solid #FB7A31;
	background: #FFC;
	}

td {
	border-bottom: 1px solid #CCC;
	padding: 0 0.5em;
	}

td:first-child {
	width: 190px;
	}

td+td {
	border-left: 1px solid #CCC;
	text-align: center;
	}

<table>
  <tr>
    <th colspan="3">GoldenLine Installation Manuals</th>
  </tr>
  <tr class="yellow"> 
    <td>Name of Manual</td>
    <td>Format</td>
    <td>Size</td>
  </tr>
  <tr> 
    <td><a href="">Installation Manual (Complete)</a></td>
    <td>pdf</td>
    <td>2.5 MB</td>
  </tr>
  <tr> 
    <td><a href="">Installation &#149; Casement</a></td>
    <td>pdf</td>
    <td>1.6 MB</td>
  </tr>
  <tr> 
    <td><a href="">Installation &#149; Fixed</a></td>
    <td>pdf</td>
    <td>1.6 MB</td>
  </tr>
  <tr> 
    <td><a href="">Installation &#149; Hinged</a></td>
    <td>pdf</td>
    <td>1.8 MB</td>
  </tr>
  <tr> 
    <td><a href="">Installation &#149; Tilt &amp; Glide</a></td>
    <td>pdf</td>
    <td>2.0 MB</td>
  </tr>
  <tr> 
    <td><a href="">Installation &#149; Tilt &amp; Turn</a> </td>
    <td>pdf</td>
    <td>1.8 MB</td>
  </tr>
</table>

Using classes for broader support

table {
	font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 320px;
	}

th {
	padding: 0 0.5em;
	text-align: left;
	}

tr.yellow td {
	border-top: 1px solid #FB7A31;
	border-bottom: 1px solid #FB7A31;
	background: #FFC;
	}

td {
	border-bottom: 1px solid #CCC;
	padding: 0 0.5em;
	}

td.width {
	width: 190px;
	}

td.adjacent {
	border-left: 1px solid #CCC;
	text-align: center;
	}

<table>
  <tr>
    <th colspan="3">GoldenLine Installation Manuals</th>
  </tr>
  <tr class="yellow"> 
    <td class="width">Name of Manual</td>
    <td class="adjacent">Format</td>
    <td class="adjacent">Size</td>
  </tr>
  <tr> 
    <td><a href="">Installation Manual (Complete)</a></td>
    <td class="adjacent">pdf</td>
    <td class="adjacent">2.5 MB</td>
  </tr>
  <tr> 
    <td><a href="">Installation &#149 Casement</a></td>
    <td class="adjacent">pdf</td>
    <td class="adjacent">1.6 MB</td>
  </tr>
  <tr> 
    <td><a href="">Installation &#149 Fixed</a></td>
    <td class="adjacent">pdf</td>
    <td class="adjacent">1.6 MB</td>
  </tr>
  <tr> 
    <td><a href="">Installation &#149 Hinged</a></td>
    <td class="adjacent">pdf</td>
    <td class="adjacent">1.8 MB</td>
  </tr>
  <tr> 
    <td><a href="">Installation &#149 Tilt &amp; Glide</a></td>
    <td class="adjacent">pdf</td>
    <td class="adjacent">2.0 MB</td>
  </tr>
  <tr> 
    <td><a href="">Installation &#149 Tilt &amp; Turn</a> </td>
    <td class="adjacent">pdf</td>
    <td class="adjacent">1.8 MB</td>
  </tr>
</table>