Apache directory listing with CSS

An Apache directory listing made with CSS is a useful style exercise. Usually an Apache directory listing looks like this:

The main problem with this kind of layout is that Apache uses a pre element to wrap the entire content of the listing. Of course this is non-semantical and should be avoided. We can use a semantical markup like this, for example:

<table summary="Directory listing of /directory">
<tr>
<th scope="col">Name</th>
<th scope="col">Last Modified</th>
<th scope="col">Size</th>
<th scope="col">Description</th>
</tr>

<tr>
<td class="parent bordertop"><a href="#" title="Parent Directory">Parent Directory</a></td>
<td class="bordertop">22-Dec-2007 05:55</td>
<td class="bordertop">-</td>
<td class="bordertop">-</td>
</tr>

<tr>
<td class="text"><a href="#">file.html</a></td>
<td>22-Dec-2007 16:22</td>
<td>15K</td>
<td>-</td>
</tr>

<!-- more items -->

</table>

<address>My Server at <a href="#">www.mysite.com</a> Port 80</address>

Using a table for tabular data: this is a recommended best practice. In this case, the contents of our listing are a perfect example of tabular data, because they're divided into columns (name, last modified, etc.) and rows. What we need now are some CSS styles which mimic the original layout of an Apache directory listing. They're as follows:

body {
 background: #fff;
 color: #000;
}

a:link, a:visited {
 color: blue;
 background: transparent;
}

table {
 font-family: monospace;
 border: none;
 width: 90%;
 border-collapse: collapse;
}

td, th {
 width: 25%;
 vertical-align: top;
 padding-top: 0.3em;
 padding-bottom: 0.3em;
}

th {
 font-weight: normal;
 text-align: left;
}

.bordertop {
 border-top: 2px outset #ccc;
}

.borderbottom {
 border-bottom: 2px outset #ccc;
}


.parent, .text, .pdf, .image, .compressed, .sound, .dir {
 padding-left: 24px;
 height: 1.5em;
}

.parent {
 background: transparent url("img/back.gif") no-repeat top left;
}

.text {
 background: transparent url("img/text.gif") no-repeat top left;
}

.pdf {
 background: transparent url("img/pdf.gif") no-repeat top left;
}

.image {
 background: transparent url("img/image.gif") no-repeat top left;
}

.compressed {
 background: transparent url("img/compressed.gif") no-repeat top left;
}

.sound {
 background: transparent url("img/sound.gif") no-repeat top left;
}

.dir {
 background: transparent url("img/dir.gif") no-repeat top left;
}


address {
 margin: 0;
 padding: 0.5em 0;
}

.parent, .text, .pdf, .image, .compressed, .sound, .dir {
 padding-left: 1.8em;
}

As you can see, we stick to browser default styles for fonts and link colors. Instead, we use background images to recreate file icons without embedding img elements into our markup. You can see the final result here.