Beautify list tables

1 files changed, 19 insertions, 17 deletions

diff --git a/web/views/reports/characters_in_keys.erb b/web/views/reports/characters_in_keys.erb
index c2bb497..52e5595 100644
--- a/web/views/reports/characters_in_keys.erb
+++ b/web/views/reports/characters_in_keys.erb
@@ -5,35 +5,37 @@ case latin letters (a-z) and the underscore (_) are used, sometimes the colon
 (:) is added as a separator character.</p>
 
 <table class="list">
-    <tr>
+    <tr><th></th><th>Count</th><th>Fraction</th><th>Description</th><th></th></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_plain') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_plain') * 100.0 / @db.stats('num_keys') %>%</td>
-        <td>Plain keys (only latin lowercase letters (a-z) and underscore (_), first and last characters are letters).</td>
-    </tr>
-    <tr>
+        <td>Only latin lowercase letters (<span class="char">a</span> to <span class="char">z</span>) and underscore (<span class="char">_</span>), first and last characters are letters.</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_colon') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_colon') * 100.0 / @db.stats('num_keys') %>%</td>
-        <td>Like plain keys but with one or more colons (:) inside.</td>
-    </tr>
-    <tr>
+        <td>Like above but with one or more colons (<span class="char">:</span>) inside.</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_letters') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_letters') * 100.0 / @db.stats('num_keys') %>%</td>
-        <td>Like plain keys but with uppercase latin letters or letters from other alphabets (and possibly with colons).</td>
-    </tr>
-    <tr>
+        <td>Like above but with uppercase latin letters or letters from other alphabets.</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_space') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_space') * 100.0 / @db.stats('num_keys') %>%</td>
-        <td>Contains whitespace (space, tab, new line, carriage return, or whitespace characters from other alphabets).</td>
-    </tr>
-    <tr>
+        <td>Contain whitespace (space, tab, new line, carriage return, or whitespace characters from other alphabets).</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_problem') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_problem') * 100.0 / @db.stats('num_keys') %>%</td>
-        <td>Contains possibly problematic characters (=+/&amp;&lt;&gt;;'"?%#@\,) or control characters.</td>
-    </tr>
-    <tr>
+        <td>Contain possibly problematic characters <span class="char">=+/&amp;&lt;&gt;;'"?%#@\,</span>.</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_rest') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_rest') * 100.0 / @db.stats('num_keys') %>%</td>
         <td>Everything else.</td>
-    </tr>
+    <td class="border"></td></tr>
+    <tr><th colspan="5"/></tr>
 </table>