Table Time

This seems to be a popular post, so I'm upgrading it to a "WOW". I've also added links to all my WOWs in the sidebar... after adding site statistics, I discovered someone actually googled "noricum WOW". All I can say is "wow". ;)



Table based progress bars

Here's a little tutorial on the progress bars I use. I'm going to make this pretty basic so that everyone can understand. If you're already familiar with html, just cut & paste & make the appropriate changes. Ignore my long rambling instructions. ;)

My progress bars are simple html tables, but the html can look a bit scary if you don't know what's going on. Here's the example progress bar I'll use:

10%

primary socks

Nice, simple little table, right? Here's the scary html:

<table border="0" cellspacing="0" cellpadding="0" frame="void" align="center">
  <tr>
    <td align="left" valign="middle">
      <table border="1" cellspacing="0" frame="border" align="left">
        <tr>
          <td align="left" valign="middle">
            <table border="0" cellspacing="0" cellpadding="0" frame="void" align="center">
              <tr>
                <td width="10" height="10" align="center" valign="middle" bgcolor="#99CCFF">
                </td>
                <td width="90" height="10" align="center" valign="middle">
                  10%
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle">
      primary socks
    </td>
  </tr>
</table>

Okay... let's start with the pieces. Html stands for "HyperText Markup Language", and is how we communicate with the browser. We tell the browser what we want by using formatting "tags". These tags are enclosed in angle brackets ("<>") so the browser can recognize them. The tag that tells the browser we want a table is called "table" (see... it is straightforward, when broken down). To start the table, we use <table>, and to end the table, we use </table>. You'll notice that the vast majority of html tags have matching open and close tags, where the close tag is the tag with the "/" character. The extra stuff in the open tag specifies how we want the table to look. Border specifies the size of the border in pixels, cellspacing is the amount of space between cells, and cellpadding is the amount of space between the contents of the cell and the border of the cell. (Assuming I didn't get the last two mixed up.) "Frame" specifies what kind of border we want.

A table is broken down into a set of rows (<tr>, short for table row), which, among other things, can have a horizontal alignment (align) and vertical alignment (valign).

A table row is then broken down into a set of cells (<td>, short for table data). We can specify the cell width, height, horizontal and vertical alignments, and background colour (bgcolor), among other things. In the above example, I set the background colour of the "percent done" bar to be light blue, which, in hexadecimal (base 16 numbers, rather than base 10), is 99CCFF. The "#" character indicates that the number should be read as hexidecimal. This number represents the amount of red, green, and blue to use for the colour, where 00 is the least, and FF (=255) is the most. If you are unfamiliar with specifying colours in this format, you can find some web safe colours here. (These tables are everywhere... this is a random one that google gave me when I searched.)

Oops... it's past my bedtime now... I'll finish this post up later. (Hmmm... I'll figure out the funky vertical spacing then too..)

Whee... I figured out the vertical spacing thing... I remembered last night that blogger "helpfully" adds <br> tags at each line break... and thus my table was filled with these tags, which, in this case, weren't very helpful. I'll finish this post later... I have stuff to do, and this is a long post to finish.

Continuing on...

You'll notice from the html that I have tables nested within tables. I do this to achieve the exact formatting I want. Let me turn on all the borders, so you can see where all these tables are:

10%

primary socks

The innermost table consists of the two cells representing the progress, 10% done, and 90% not done. Since the 90% box is larger, I've added the text "90%" to this box, so that the 10% doesn't get "stretched" by the text it contains. Note that when you specify the size, you only specify the minimum size, and the box will stretch to fit the text it contains. This also explains why the 10% box is taller than it is wide, even though I specify each should be 10 pixels. The text in the row (contained in the 90% box) is taller than 10 pixels, and thus the row height is stretched to accomodate this.

The "middle" table exists to add a border around the progress bar. I do not use the border feature on the innermost table, because that, as illustrated, includes a line separating the "done" and "not done" areas, which is an effect I do not want.

The outer table is to make sure the progress bar and associated text are formatted nicely with respect to each other. HTML interpreters automatically add space around tables, and thus, if I didn't have both elements in a table, the text for the progress bar would be separated from the progress bar by more space than I want. The easiest way for me to control the space without affecting other tables is to do as I have done. It is probably also possible to use css, but I'm more familiar with tables.

Now we know what the different tables are, we can figure out how to change the alignment of different elements. Setting the table alignment to left, center, or right, controls how the table is aligned within the element that contains it. Thus, having the outer table set to have center alignment centers the table within the area of the browser that it is displayed. I prefer to have my progress bars in the sidebar left justified. Setting the cell alignment controls the alignment of the contents of the cell. So, by having the progress bar left justified, and the text centered, if the text is narrower than the progress bar, it is centered underneath the progress bar, otherwise the left hand sides of the text and progress bar are aligned. If you center your progress bar in the sidebar, it will look better if both the progress bar and text cells are set to be centered.