Report the duration using html

Another problem about creating automatic reports in html. In this case, we need to show the duration of cetain events graphically. It is expressed in a percentange of a total. The first idea is to use a progress bar as defined by html5:

def printProgress2 (percent):
    progStr = str(percent) + " "
    progStr += '<progress value="' + \
               str(percent) + '" max="100"></progress>'
    return progStr

And the result is something like:

33 <progress value="33" max="100"></progress>

This is not to bad but I don't totally like the animations that show some navigators. So my next approach is to use a html5 rectangle. This is the function:

def printProgress1 (percent):
    progStr = " "
    v = percent * 150 / 100
    progStr += '<svg width="160" height="25">'
    progStr += '<rect x="5" y="3" width="' + \
               str(v) + '" height="19" style="fill:rgb(148, 148, 210)"/>'
    progStr += '<text x="6" y="20">' + str (percent) + "%</text>"
    progStr += '<,/svg>'
    return progStr

And the result is something like:

<svg width="160" height="25"><rect x="5" y="3" width="4" height="19" 
   style="fill:rgb(148, 148, 210)"/><text x="6" y="20">3%</text></svg>

This is not bad but now the problem is that not all the navigators like html5 and outlook does not like it either. So the idea I came out with is to use the width of the table cells and change their background color to show the duration:

def getDurationHtml (self, percent):
        """ This function returns the contents of the duration cell based in the percentage. """
        durationStr = '<td><table><tr><td width="45">' + str (percent) + '%</td>'
        first = percent
        second = 100 - first
        durationStr += '<td width="' + str (first) + '" bgcolor="#7070C0"></td>'
        if second > 0:
            durationStr += '<td width="' + str (second) + '"></td>'
        durationStr += '</tr></table>'
        return durationStr

And this is the result:

<table><tr><td width="45">33%</td><td width="33" bgcolor="#7070C0"></td>
  <td width="67"> </td></tr></table>