Tuesday, March 15, 2005

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". ;)

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.

30 comments:

Daph said...

I've been wondering how to do progress bars, but even with your explanation I'm just SURE I would mess it up. They're cool, though, so maybe one day I will be brave enough to try them!

noricum said...

Well, I'll be explaining this further. I'll say what all the bits do, and then explain what bits you need to change if you want to cut & paste. Hopefully my final explanation will be pretty straightforward... if it isn't, just let me know. ;)

Rudbeckia Hirta said...

I'm so glad that Jeff and Suresh pointed us here, as I have now learned how to make progress bars! Thank you!

noricum said...

Welcome. ;)

Brenda said...

This is fabulous, thanks!

April said...

Thanks for the tutorial. I ended up cutting and pasting first and then changing each bit untill I figured it all out. Though your explanation was great!

PBnJ said...

this is wonderful thank so much for sharing your sweet lil' secret, heh. they're incredibly simple and very effective!

Mandy said...

I love your blog! I have a question about these tables I have them and I can't get the color to move as my progress moves what am I doing wrong??Thank you for your time:)

noricum said...

Thanks Mandy! You need to change the cell width manually.

angie said...

Can you tell me how i change the color of the bar to the appropiate %

noricum said...

angie... do you want to change the colour or the width? To change the colour, change the background colour value from

bgcolor="#99CCFF"

to whatever you want. There's a list of six digit hexadecimal colour codes here.

To change the width, change both

td width="10"

values... they should add up to 100. The first one represents the amount of progress, and the second how much is left.

angie said...

Thanks noricum i got it now :)

noricum said...

Welcome!

Bad Amy said...

Finally I can make these puppies! THANK YOU!!!

Sarah Jane said...

Thanks so much! I'll be adding these to my blog when I get out of work!

Anonymous said...

Thank you, thank you, thank you! I put the bars on my blog, and I love them. : )

Big Cray said...

Nice use of tables! If you add an element ID to your innermost tr tag, you could use JavaScript and the innerHTML attribute to extend the progress bars technique to change them dynamically within a single page load triggered by whatever event(s) you please. Of course, you likely don't have an application for anything like that, but it sounds pretty interesting, doesn't it?

noricum said...

Interesting! No, I can't think of an application for that.

Sarebear said...

When my text below the progress bar wraps to the next line, it makes the progress bar left aligned. It'd look better if it was center like my other ones . . . how do I fix this?

noricum said...

Hmmm... I think in the third line, change:
td align="left"
to:
td align="center"

Ria said...

Thank you! This is going to come in really handy on my blog! :D

Candy said...

Thanks so much for the help!!!

Love the tables :-)

Kath said...

I know this is one of your old posts but I just wanted to leave you a quick note to say thank you!
I was looking for simple, basic html code to make progress bars and you gave me exactly what I needed! Wonderful!

noricum said...

Welcome!

Gwen said...

Thank you so much! These are cute and easy. I've been trying to find some simple bars and everything was too much work. These are just what I need!

Layna said...

Thanks so much for taking the time to create this HTML code. I would have never thought to do it this way. I will post my progress bars as soon as possible. I was playing around in Notepad and when ahead and changed my progress bar's color and tweaked it slightly to display the percentage above the bar.

Stitch N Locks said...

So on point! Thanks 1,000,000 for sharing with the rest of us.

Shelley Noble said...

I love that you shared this and I appreciate your html explanation, it helps tremendously.

I've read through carefully but can't catch how (where in the code) I can change the percentage done?

I'm subscribing here in case you follow up...
Thank you!

Shelley Noble said...

Couldn't subscribe but--I fingered it out! Thank you again, plus now I can subscribe to your feed! yay!

noricum said...

Shelley: Sorry I didn't get back to you earlier... I've been away on vacation. I'm glad you figured it out!