title: How to highlight the selected row in a table?
body: <p>Here is my table.. what should i add to let the selected row is highlighted?
  So it's more clear to see where my mouse at............................................................</p>
  
  <pre><code>&lt;style type ="text/css"&gt;
        table.imagetable {
            font-family: verdana,arial,sans-serif;
            font-size:15px;
            color:#333333;
            border-width: 1px;
            border-color: #999999;
            border-collapse: collapse;
            width:100%;
        }
        table.imagetable th {
            background:#b5cfd2 url('/static/cell-blue.jpg');
            border-width: 1px;
            padding: 12px;
            border-style: solid;
            border-color: #999999;
        }
        table.imagetable td {
            background:#dcddc0 url('/static/cell-grey.jpg');
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
        }
      &lt;/style&gt;
  
      &lt;table class="imagetable"&gt;
        &lt;tr&gt;
          &lt;th&gt;Time&lt;/th&gt;&lt;th&gt;Category&lt;/th&gt;&lt;th&gt;Filename&lt;/th&gt;
        &lt;/tr&gt;
          {% for (t,f,c,l, t2) in data %}
            &lt;tr&gt;
                &lt;td style = "padding:3px;"&gt;{{date}} {{t2}}&lt;/td&gt;
                &lt;td sytle = "padding:3px;"&gt;&lt;a href = "/report_category/{{c}}/"&gt;{{c}}&lt;/a&gt;&lt;/td&gt;
                &lt;!-- l is the relative location, we need absolute directory here.--&gt;
                &lt;td style = "padding:3px;"&gt;&lt;a href = "/{{l}}"&gt;{{f}}&lt;/a&gt;&lt;/td&gt;
             &lt;/tr&gt;
          {% endfor %}
      &lt;/table&gt;
  </code></pre>