Showing Progress

This weekend, I added a "Currently Reading" module to my book review blog. Noting that the space looked remarkably bare this morning, I decided to add a progress bar.

A quick Google search yielded only instructions using block level containers, or <div> tags. As a proponent of efficiency and parsimony, however, I was bothered by what seemed like an excessive amount of code for so simple an object. I gave it some thought and decided to devise my own method instead. The obvious choice was to base it off of a two-cell table.

I started off by figuring out the width of the table. To do this, I eyeballed the percentage of the module that the progress bar would occupy, increased it by five percent, and whittled that value down one percent at a time until the bar was no longer forced below the book cover.

The next step was to set the border width, along with eliminating spaces between cells and padding within cells. I set both to zero.

Two columns were set up within one row. I only needed to set the width of the left-most cell to match my progress, since the second cell will adjust automatically. Instead of using a plain background color to "fill in" the bar, I used CSS tags to insert my blog's background image.

(Note: The percentage used for columns are based on the total width of the table. For instance, if <table width="50%">, and <td width="50%">, then the width of the column will be equal to 50% of the table width but only 25% of the total space. In other words, no conversions are necessary. If you've made "x" amount of progress, then <td width="x%">)

The resulting code ended up looking like this:

<table margin="0" width="58%" border="1" cellpadding="0" cellspacing="0">
<tbody><tr><td style="background-image: url('image url');" width="10%">
</td><td>10%</td></tr></tbody></table>

Eventually, the right-hand cell will be too small for me to type in the percentage completed thus far. To compensate for this, I placed the text in the left-hand cell and colored it white so that it shows up against the dark background. This is the updated code:

<table margin="0" width="58%" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr><td style="background-image: url('image url');" width="90%" align="right">
<font color=#FFFFFF>90%</font>
</td><td>
</td></tr></tbody></table>

And there you have it: progress bars made easy. Please leave a comment and let me know what you think!