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.

2 thoughts on “Apache directory listing with CSS”

  1. You can tell Apache to spit out tables instead of a pre element:
    http://httpd.apache.org/docs/2.2/mod/mod_autoindex.html.
    From there you can style whatever you want. And you can include nicer icons if you want.

  2. If I had to guess, I'd say that for the most part people don't use this feature too much, so any improvements on it are probably academic. However, it would be nice if the default html served by Apache was a good example of modern best-practices, both in terms of code style and server-side performance.

    If they were to update this feature, your suggested improvements are reasonable. I'd go a bit further and use CSS sprites for the images, and mark up the file modified dates with the datetime microformat. Also, I'd be inclined to make it possible to sort the listing by type.

Leave a Reply

Note: Only a member of this blog may post a comment.