Doc: htmlify roles table to allow easier modification

site/roles.md

Index: site/roles.md
diff --git a/site/roles.md b/site/roles.md
index 97d48cb1e5b8831c810baa7fb48c4dc5589d72ac..9cdec696519cb18bfc81af34bc3ba01ef1606878 100644
--- a/site/roles.md
+++ b/site/roles.md
@@ -9,4 +9,59 @@ parties can assume.
 For more information on ways to get involved in Skia development, see the
 [Contributing to Skia page](/dev/contrib/).
 
-  ![roles.png](roles.png)
+<div>
+<style scoped><!--
+#rolestable {border-collapse:collapse;}
+#rolestable tr th, #rolestable tr td {border-right:white 2px solid;padding:0 5px;}
+#rolestable tr td {height:10ex;}
+#rolestable tr td p {margin:5px 0; padding:0;}
+--></style>
+<table id="rolestable">
+ <tr>
+  <th></th>
+  <th>Source Code &amp; Documentation</th>
+  <th>Code Reviews</th>
+  <th>Bug Tracker</th>
+  <th></th>
+ </tr>
+ <tr style="background-color:#e6b8af;color:black;">
+  <th>Committer</th>
+  <td>
+    <p>force-commit</p>
+  </td>
+  <td>
+    <p>approve changes</p>
+  </td>
+  <td></td>
+ </tr>
+ <tr style="background-color:#ffe599;color:black;">
+  <th>Contributor<br>(and above)</th>
+  <td></td>
+  <td>
+    <p>launch try jobs</p>
+  </td>
+  <td>
+    <p>change bug status</p>
+    <p>edit bug labels</p>
+    <p>own bugs</p>
+  </td>
+ </tr>
+ <tr style="background-color:#d0e0e3;color:black;">
+  <th>Developer<br>(and above)</th>
+  <td>
+    <p>download</p>
+    <p>view history</p>
+  </td>
+  <td>
+    <p>commit changes (once approved)</p>
+    <p>upload changes for approval</p>
+    <p>view</p>
+  </td>
+  <td>
+    <p>add comments to existing bugs</p>
+    <p>file new bugs</p>
+    <p>view bugs</p>
+  </td>
+ </tr>
+</table>
+</div>