Rpcz, Statsz, Tracez, and Traceconfigz page styling modifications (#1295)

9 files changed, 291 insertions, 141 deletions

diff --git a/contrib/zpages/screenshots/rpcz-example.png b/contrib/zpages/screenshots/rpcz-example.png
index 89122926..9d303fb1 100644
--- a/contrib/zpages/screenshots/rpcz-example.png
+++ b/contrib/zpages/screenshots/rpcz-example.png
diff --git a/contrib/zpages/screenshots/statsz-example-1.png b/contrib/zpages/screenshots/statsz-example-1.png
index c45dd217..503a05b2 100644
--- a/contrib/zpages/screenshots/statsz-example-1.png
+++ b/contrib/zpages/screenshots/statsz-example-1.png
diff --git a/contrib/zpages/screenshots/statsz-example-2.png b/contrib/zpages/screenshots/statsz-example-2.png
index 811b9db5..bb1229c8 100644
--- a/contrib/zpages/screenshots/statsz-example-2.png
+++ b/contrib/zpages/screenshots/statsz-example-2.png
diff --git a/contrib/zpages/screenshots/traceconfigz-example.png b/contrib/zpages/screenshots/traceconfigz-example.png
index 666cf548..54287683 100644
--- a/contrib/zpages/screenshots/traceconfigz-example.png
+++ b/contrib/zpages/screenshots/traceconfigz-example.png
diff --git a/contrib/zpages/screenshots/tracez-example.png b/contrib/zpages/screenshots/tracez-example.png
index 4abfdbbe..cfcf0f3c 100644
--- a/contrib/zpages/screenshots/tracez-example.png
+++ b/contrib/zpages/screenshots/tracez-example.png
diff --git a/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/RpczZPageHandler.java b/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/RpczZPageHandler.java
index c0ec5354..85207c8d 100644
--- a/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/RpczZPageHandler.java
+++ b/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/RpczZPageHandler.java
@@ -113,9 +113,9 @@ final class RpczZPageHandler extends ZPageHandler {
   private static final String RPCZ_URL = "/rpcz";
   private static final String SENT = "Sent";
   private static final String RECEIVED = "Received";
-  private static final String TITLE_COLOR = "\"#eeeeff\"";
-  private static final String TABLE_HEADER_COLOR = "\"#fff5ee\"";
-  private static final String TABLE_ROW_COLOR = "\"#eee5de\"";
+  private static final String TITLE_COLOR = "\"#FFF\"";
+  private static final String TABLE_HEADER_COLOR = "\"#A94442\"";
+  private static final String TABLE_ROW_COLOR = "\"#FFF\"";
   private static final double SECONDS_PER_MINUTE = 60.0;
   private static final double SECONDS_PER_HOUR = 3600.0;
   private static final double NANOS_PER_SECOND = 1e9;
@@ -224,6 +224,32 @@ final class RpczZPageHandler extends ZPageHandler {
     return RPCZ_URL;
   }
 
+  private static void emitStyle(PrintWriter out) {
+    out.write("<style>\n");
+    out.write(
+        "body{font-family:'Roboto',sans-serif;font-size:14px;" + "background-color:#F2F4EC;}\n");
+    out.write("h1{color:#3D3D3D;text-align:center; margin-bottom:20px;}\n");
+    out.write("p{padding:0 0.5em;color:#3D3D3D}\n");
+    out.write(
+        "table{width:100%;color:#FFF;overflow:hidden;" + "margin-bottom:30px;margin-top:0;}\n");
+    out.write("tr:nth-child(even){background-color:#F2F2F2;}\n");
+    out.write("tr.border-bottom td{border-bottom:1px solid #3D3D3D}\n");
+    out.write("td.border-right,th.border-right{border-right:1px solid #3D3D3D;}\n");
+    out.write("td.border-left{border-left:1px solid #3D3D3D}\n");
+    out.write("td{color:#3D3D3D;line-height:2.0;}\n");
+    out.write("p.title{margin-bottom:0;}\n");
+    out.write(
+        "p.header {font-family:'Open Sans',sans-serif;top:0;left:0;width:100%;"
+            + "height:60px;vertical-align:middle;color:#C1272D;font-size:22pt;}\n");
+    out.write(".header span{color:#3D3D3D;}\n");
+    out.write("img.oc {vertical-align:middle;}\n");
+    out.write(
+        "th.l1{border-left:1px solid #FFF;border-bottom:1px solid #FFF;" + "margin:0 10px;}\n");
+    out.write("td.l2{border-left:1px solid #3D3D3D;text-align:center;}\n");
+    out.write("th.border-bottom,td.border-bottom{border-bottom:1px solid #FFF;}\n");
+    out.write("</style>\n");
+  }
+
   @Override
   public void emitHtml(Map<String, String> queryMap, OutputStream outputStream) {
     PrintWriter out =
@@ -233,6 +259,12 @@ final class RpczZPageHandler extends ZPageHandler {
     out.write("<meta charset=\"utf-8\">\n");
     out.write("<title>RpcZ</title>\n");
     out.write("<link rel=\"shortcut icon\" href=\"//www.opencensus.io/favicon.ico\"/>\n");
+    out.write(
+        "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300\""
+            + "rel=\"stylesheet\">\n");
+    out.write(
+        "<link href=\"https://fonts.googleapis.com/css?family=Roboto\"" + "rel=\"stylesheet\">\n");
+    emitStyle(out);
     out.write("</head>\n");
     out.write("<body>\n");
     try {
@@ -247,6 +279,10 @@ final class RpczZPageHandler extends ZPageHandler {
 
   private void emitHtmlBody(PrintWriter out) {
     Formatter formatter = new Formatter(out, Locale.US);
+    out.write(
+        "<p class=\"header\">"
+            + "<img class=\"oc\" src=\"https://opencensus.io/img/logo-sm.svg\" />"
+            + "Open<span>Census</span></p>");
     out.write("<h1>RPC Stats</h1>");
     out.write("<p></p>");
     emitSummaryTable(out, formatter, /* isReceived= */ false);
@@ -255,41 +291,37 @@ final class RpczZPageHandler extends ZPageHandler {
 
   private void emitSummaryTable(PrintWriter out, Formatter formatter, boolean isReceived) {
     formatter.format(
-        "<p><table bgcolor=%s width=100%%><tr align=center><td><font size=+2>"
+        "<p class=\"title\"><table bgcolor=%s width=100%%><tr align=left><td><font size=+2>"
             + "%s</font></td></tr></table></p>",
         TITLE_COLOR, (isReceived ? RECEIVED : SENT));
-    formatter.format(
-        "<table bgcolor=%s frame=box cellspacing=0 cellpadding=2>", TABLE_HEADER_COLOR);
+    formatter.format("<table bgcolor=%s frame=box cellspacing=0 cellpadding=2>", TABLE_ROW_COLOR);
     emitSummaryTableHeader(out, formatter);
     Map<String, StatsSnapshot> snapshots = getStatsSnapshots(isReceived);
     for (Entry<String, StatsSnapshot> entry : snapshots.entrySet()) {
       emitSummaryTableRows(out, formatter, entry.getValue(), entry.getKey());
     }
     out.write("</table>");
+    out.write("<br />");
   }
 
   private static void emitSummaryTableHeader(PrintWriter out, Formatter formatter) {
     // First line.
-    formatter.format("<tr bgcolor=%s>", TABLE_ROW_COLOR);
+    formatter.format("<tr bgcolor=%s>", TABLE_HEADER_COLOR);
     out.write("<th></th><td></td>");
     for (String rpcStatsType : RPC_STATS_TYPES) {
-      formatter.format("<th class=\"l1\" colspan=3>%s</th><td></td>", rpcStatsType);
+      formatter.format("<th class=\"l1\" colspan=3>%s</th>", rpcStatsType);
     }
     out.write("</tr>");
 
     // Second line.
-    formatter.format("<tr bgcolor=%s>", TABLE_ROW_COLOR);
-    out.write("<th align=left>Method</th><td>&nbsp;&nbsp;&nbsp;&nbsp;</td>");
+    formatter.format("<tr bgcolor=%s>", TABLE_HEADER_COLOR);
+    out.write("<th class=\"border-bottom\" bgcolor=#A94442 align=left>Method</th>\n");
+    out.write("<td class=\"border-bottom\" bgcolor=#A94442>&nbsp;&nbsp;&nbsp;&nbsp;</td>");
     for (int i = 0; i < RPC_STATS_TYPES.size(); i++) {
-      out.write("<th align=right>Min.</th><th align=right>Hr.</th><th align=right>Tot.</th>");
-      if (i != RPC_STATS_TYPES.size() - 1) { // Add spaces between each column.
-        out.write("<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>");
-      }
+      out.write("<th class=\"l1\" bgcolor=#A94442 align=center>Min.</th>\n");
+      out.write("<th class=\"l1\" bgcolor=#A94442 align=center>Hr.</th>\n");
+      out.write("<th class=\"l1\" bgcolor=#A94442 align=center>Tot.</th>");
     }
-    out.write("</tr>");
-
-    // Empty line.
-    out.write("<tr><td colspan=33><font size=-2>&nbsp;</font></td></tr>");
   }
 
   private static void emitSummaryTableRows(
@@ -297,24 +329,24 @@ final class RpczZPageHandler extends ZPageHandler {
     out.write("<tr>");
     formatter.format("<td><b>%s</b></td>", method);
     out.write("<td></td>");
-    formatter.format("<td align=\"right\">%d</td>", snapshot.countLastMinute);
-    formatter.format("<td align=\"right\">%d</td>", snapshot.countLastHour);
-    formatter.format("<td align=\"right\">%d</td><td></td>", snapshot.countTotal);
-    formatter.format("<td align=\"right\">%.3f</td>", snapshot.avgLatencyLastMinute);
-    formatter.format("<td align=\"right\">%.3f</td>", snapshot.avgLatencyLastHour);
-    formatter.format("<td align=\"right\">%.3f</td><td></td>", snapshot.avgLatencyTotal);
-    formatter.format("<td align=\"right\">%.3f</td>", snapshot.rpcRateLastMinute);
-    formatter.format("<td align=\"right\">%.3f</td>", snapshot.rpcRateLastHour);
-    formatter.format("<td align=\"right\">%.3f</td><td></td>", snapshot.rpcRateTotal);
-    formatter.format("<td align=\"right\">%.3f</td>", snapshot.inputRateLastMinute);
-    formatter.format("<td align=\"right\">%.3f</td>", snapshot.inputRateLastHour);
-    formatter.format("<td align=\"right\">%.3f</td><td></td>", snapshot.inputRateTotal);
-    formatter.format("<td align=\"right\">%.3f</td>", snapshot.outputRateLastMinute);
-    formatter.format("<td align=\"right\">%.3f</td>", snapshot.outputRateLastHour);
-    formatter.format("<td align=\"right\">%.3f</td><td></td>", snapshot.outputRateTotal);
-    formatter.format("<td align=\"right\">%d</td>", snapshot.errorsLastMinute);
-    formatter.format("<td align=\"right\">%d</td>", snapshot.errorsLastHour);
-    formatter.format("<td align=\"right\">%d</td><td></td>", snapshot.errorsTotal);
+    formatter.format("<td class=\"l2\">%d</td>", snapshot.countLastMinute);
+    formatter.format("<td class=\"l2\">%d</td>", snapshot.countLastHour);
+    formatter.format("<td class=\"l2\">%d</td>", snapshot.countTotal);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.avgLatencyLastMinute);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.avgLatencyLastHour);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.avgLatencyTotal);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.rpcRateLastMinute);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.rpcRateLastHour);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.rpcRateTotal);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.inputRateLastMinute);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.inputRateLastHour);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.inputRateTotal);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.outputRateLastMinute);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.outputRateLastHour);
+    formatter.format("<td class=\"l2\">%.3f</td>", snapshot.outputRateTotal);
+    formatter.format("<td class=\"l2\">%d</td>", snapshot.errorsLastMinute);
+    formatter.format("<td class=\"l2\">%d</td>", snapshot.errorsLastHour);
+    formatter.format("<td class=\"l2\">%d</td>", snapshot.errorsTotal);
     out.write("</tr>");
   }
 
diff --git a/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/StatszZPageHandler.java b/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/StatszZPageHandler.java
index d2185c6d..8e7d682b 100644
--- a/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/StatszZPageHandler.java
+++ b/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/StatszZPageHandler.java
@@ -89,11 +89,10 @@ final class StatszZPageHandler extends ZPageHandler {
 
   @VisibleForTesting static final String QUERY_PATH = "path";
   private static final String STATSZ_URL = "/statsz";
-  private static final String TITLE_COLOR = "#eeeeff";
-  private static final String TABLE_BACKGROUND_COLOR = "#fff5ee";
-  private static final String TABLE_HEADER_COLOR = "#eee5de";
-  private static final String ALIGN_CENTER = "align=\"center\"";
-  private static final String TABLE_BORDER = "border=\"1\"";
+  private static final String TITLE_COLOR = "#FFF";
+  private static final String TABLE_BACKGROUND_COLOR = "#FFF";
+  private static final String TABLE_HEADER_COLOR = "#A94442";
+  private static final String ALIGN_LEFT = "align=\"left\"";
   private static final String CLASS_LARGER_TR = "directory-tr";
   private static final String TABLE_HEADER_VIEW = "View Name";
   private static final String TABLE_HEADER_DESCRIPTION = "Description";
@@ -147,6 +146,27 @@ final class StatszZPageHandler extends ZPageHandler {
 
   private static void emitStyles(PrintWriter out, Formatter formatter) {
     out.write("<style>");
+    out.write(
+        "body{font-family:'Roboto',sans-serif;font-size:14px;" + "background-color:#F2F4EC;}\n");
+    out.write("h1{color:#3D3D3D;text-align:center; margin-bottom:20px;}\n");
+    out.write("p.view{font-size:20px;margin-bottom:0;}\n");
+    out.write("h2{line-height:2.0;padding:0 0.5em;}\n");
+    out.write("h3{font-size:16px;padding:0 0.5em;margin-top:4px;margin-bottom:25px;}\n");
+    out.write("p{padding:0 0.5em;color:#3D3D3D}\n");
+    out.write("p.header{font-family:'Open Sans',sans-serif;top:0;left:0;width:100%;\n");
+    out.write("height:60px;vertical-align:middle;color:#C1272D;font-size:22pt;}\n");
+    out.write(".header span{color:#3D3D3D;}\n");
+    out.write("img.oc{vertical-align:middle;}\n");
+    out.write("table{color:#FFF;width:100%;margin-bottom:30px;}\n");
+    out.write("tr.border-bottom td{border-bottom:1px solid #3D3D3D}\n");
+    out.write("table.borders{border-left:1px solid #3D3D3D;border-right:1px solid #3D3D3D;}\n");
+    out.write("th{line-height:3.0;padding:0 0.5em;text-align:left;}\n");
+    out.write("tr:nth-child(even) {background-color:#F2F2F2;}\n");
+    out.write("td.border-left{border-left:1px solid #3D3D3D;}\n");
+    out.write("tr.smaller{font-size:16px;padding:0 0.5em;background-color:#F2F4EC;}\n");
+    out.write("td{color:#3D3D3D;line-height:2.0;padding:0 0.5em;text-align:left;}\n");
+    out.write("th.l1{border-left:1px solid #FFF}\n");
+    out.write("a{color:#A94442;}\n");
     formatter.format("h2{background-color: %s;}", TITLE_COLOR);
     formatter.format("table{background-color: %s;}", TABLE_BACKGROUND_COLOR);
     formatter.format("thead{background-color: %s;}", TABLE_HEADER_COLOR);
@@ -158,6 +178,16 @@ final class StatszZPageHandler extends ZPageHandler {
     synchronized (monitor) {
       groupViewsByDirectoriesAndGetMeasures(
           viewManager.getAllExportedViews(), root, measures, cachedViews);
+      out.write(
+          "<p class=\"header\">"
+              + "<img class=\"oc\" src=\"https://opencensus.io/img/logo-sm.svg\" />"
+              + "Open<span>Census</span></p>");
+      out.write(
+          "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300\""
+              + "rel=\"stylesheet\">\n");
+      out.write(
+          "<link href=\"https://fonts.googleapis.com/css?family=Roboto\""
+              + "rel=\"stylesheet\">\n");
       out.write("<h1><a href='?'>StatsZ</a></h1>");
       out.write("<p></p>");
       String path = queryMap.get(QUERY_PATH);
@@ -212,7 +242,7 @@ final class StatszZPageHandler extends ZPageHandler {
       /*@Nullable*/ String path,
       PrintWriter out,
       Formatter formatter) {
-    out.write("<h2>Views</h2>");
+    out.write("<h2 style=\"margin-bottom:0;\">Views</h2>");
     if (currentNode == null) {
       formatter.format(
           "<p><font size=+2>Directory not found: %s. Return to root.</font></p>", path);
@@ -222,14 +252,13 @@ final class StatszZPageHandler extends ZPageHandler {
       path = "";
     }
     emitDirectoryHeader(path, out, formatter);
-    out.write("<table frame=box cellspacing=0 cellpadding=2>");
+    out.write("<table cellspacing=0 cellpadding=0>");
     for (Entry<String, TreeNode> entry : currentNode.children.entrySet()) {
       TreeNode child = entry.getValue();
       String relativePath = entry.getKey();
       if (child.viewName == null) { // Directory node, emit a row for directory.
         formatter.format(
-            "<tr class=\"%s\"><td>Directory: <a href='?%s=%s'>%s</a> (%d %s)</td></tr>",
-            CLASS_LARGER_TR,
+            "<tr class=\"smaller\"><td>Directory: <a href='?%s=%s'>%s</a> (%d %s)</td></tr>",
             QUERY_PATH,
             path + '/' + relativePath,
             relativePath,
@@ -238,8 +267,8 @@ final class StatszZPageHandler extends ZPageHandler {
       } else { // View node, emit a row for view.
         String viewName = child.viewName.asString();
         formatter.format(
-            "<tr class=\"%s\"><td>View: <a href='?%s=%s'>%s</a></td></tr>",
-            CLASS_LARGER_TR, QUERY_PATH, path + '/' + relativePath, viewName);
+            "<tr class=\"smaller\"><td>View: <a href='?%s=%s'>%s</a></td></tr>",
+            QUERY_PATH, path + '/' + relativePath, viewName);
       }
     }
     out.write("</table>");
@@ -281,7 +310,7 @@ final class StatszZPageHandler extends ZPageHandler {
       formatter.format("<a href='?%s=%s'>%s</a>", QUERY_PATH, currentPath.toString(), dir + '/');
       currentPath.append('/');
     }
-    out.write("</h2>");
+    out.write("</h3>");
   }
 
   private static void emitViewData(
@@ -293,10 +322,9 @@ final class StatszZPageHandler extends ZPageHandler {
     }
     View view = viewData.getView();
     emitViewInfo(view, viewData.getWindowData(), out, formatter);
-    formatter.format(
-        "<p class=\"%s\">Stats for View %s</p>", CLASS_LARGER_TR, view.getName().asString());
-    out.write("<p></p>");
-    formatter.format("<table %s frame=box cellspacing=0 cellpadding=2>", TABLE_BORDER);
+    formatter.format("<p class=\"view\">Stats for View %s</p>", view.getName().asString());
+
+    formatter.format("<table class=\"borders\" cellspacing=0 cellpadding=0>");
     emitViewDataTableHeader(view, out, formatter);
     for (Entry<List</*@Nullable*/ TagValue>, AggregationData> entry :
         viewData.getAggregationMap().entrySet()) {
@@ -308,14 +336,14 @@ final class StatszZPageHandler extends ZPageHandler {
 
   private static void emitViewInfo(
       View view, ViewData.AggregationWindowData windowData, PrintWriter out, Formatter formatter) {
-    formatter.format("<table width=100%% %s>", TABLE_BORDER);
+    formatter.format("<table width=100%% class=\"borders\" cellspacing=0 cellpadding=0>");
     emitViewInfoHeader(out, formatter);
 
     out.write("<tbody>");
-    out.write("<tr>"); // One row that represents the selected view.
+    out.write("<tr class=\"border-bottom\">"); // One row that represents the selected view.
     formatter.format("<td>%s</td>", view.getName().asString());
-    formatter.format("<td>%s</td>", view.getDescription());
-    formatter.format("<td>%s</td>", view.getMeasure().getName());
+    formatter.format("<td class=\"border-left\">%s</td>", view.getDescription());
+    formatter.format("<td class=\"border-left\">%s</td>", view.getMeasure().getName());
     String aggregationType =
         view.getAggregation()
             .match(
@@ -337,13 +365,13 @@ final class StatszZPageHandler extends ZPageHandler {
                     throw new AssertionError();
                   }
                 });
-    formatter.format("<td>%s</td>", aggregationType);
+    formatter.format("<td class=\"border-left\">%s</td>", aggregationType);
     windowData.match(
         new Function<ViewData.AggregationWindowData.CumulativeData, Void>() {
           @Override
           public Void apply(ViewData.AggregationWindowData.CumulativeData arg) {
-            formatter.format("<td>%s</td>", toDate(arg.getStart()));
-            formatter.format("<td>%s</td>", toDate(arg.getEnd()));
+            formatter.format("<td class=\"border-left\">%s</td>", toDate(arg.getStart()));
+            formatter.format("<td class=\"border-left\">%s</td>", toDate(arg.getEnd()));
             return null;
           }
         },
@@ -365,12 +393,12 @@ final class StatszZPageHandler extends ZPageHandler {
   private static void emitViewInfoHeader(PrintWriter out, Formatter formatter) {
     out.write("<thead>");
     out.write("<tr>");
-    formatter.format("<th colspan=1 class=\"l1\">%s</th>", TABLE_HEADER_VIEW);
-    formatter.format("<th colspan=1 class=\"l1\">%s</th>", TABLE_HEADER_DESCRIPTION);
-    formatter.format("<th colspan=1 class=\"l1\">%s</th>", TABLE_HEADER_MEASURE);
-    formatter.format("<th colspan=1 class=\"l1\">%s</th>", TABLE_HEADER_AGGREGATION);
-    formatter.format("<th colspan=1 class=\"l1\">%s</th>", TABLE_HEADER_START);
-    formatter.format("<th colspan=1 class=\"l1\">%s</th>", TABLE_HEADER_END);
+    formatter.format("<th colspan=1 align=left>%s</th>", TABLE_HEADER_VIEW);
+    formatter.format("<th colspan=1 class=\"l1\" align=left>%s</th>", TABLE_HEADER_DESCRIPTION);
+    formatter.format("<th colspan=1 class=\"l1\" align=left>%s</th>", TABLE_HEADER_MEASURE);
+    formatter.format("<th colspan=1 class=\"l1\" align=left>%s</th>", TABLE_HEADER_AGGREGATION);
+    formatter.format("<th colspan=1 class=\"l1\" align=left>%s</th>", TABLE_HEADER_START);
+    formatter.format("<th colspan=1 class=\"l1\" align=left>%s</th>", TABLE_HEADER_END);
     out.write("</tr>");
     out.write("</thead>");
   }
@@ -379,7 +407,7 @@ final class StatszZPageHandler extends ZPageHandler {
     out.write("<thead>");
     out.write("<tr>");
     for (TagKey tagKey : view.getColumns()) {
-      formatter.format("<th class=\"l1\">TagKey: %s (string)</th>", tagKey.getName());
+      formatter.format("<th align=left>TagKey: %s (string)</th>", tagKey.getName());
     }
     String unit = view.getMeasure().getUnit();
     view.getAggregation()
@@ -387,33 +415,35 @@ final class StatszZPageHandler extends ZPageHandler {
             new Function<Sum, Void>() {
               @Override
               public Void apply(Sum arg) {
-                formatter.format("<th class=\"l1\">%s, %s</th>", TABLE_HEADER_SUM, unit);
+                formatter.format("<th class=\"l1\" align=left>%s, %s</th>", TABLE_HEADER_SUM, unit);
                 return null;
               }
             },
             new Function<Count, Void>() {
               @Override
               public Void apply(Count arg) {
-                formatter.format("<th class=\"l1\">%s</th>", TABLE_HEADER_COUNT);
+                formatter.format("<th class=\"l1\" align=left>%s</th>", TABLE_HEADER_COUNT);
                 return null;
               }
             },
             new Function<Distribution, Void>() {
               @Override
               public Void apply(Distribution arg) {
-                formatter.format("<th class=\"l1\">%s, %s</th>", TABLE_HEADER_MEAN, unit);
-                formatter.format("<th class=\"l1\">%s</th>", TABLE_HEADER_COUNT);
-                formatter.format("<th class=\"l1\">%s, %s</th>", TABLE_HEADER_MAX, unit);
-                formatter.format("<th class=\"l1\">%s, %s</th>", TABLE_HEADER_MIN, unit);
-                formatter.format("<th class=\"l1\">%s</th>", TABLE_HEADER_DEV);
-                formatter.format("<th class=\"l1\">%s</th>", TABLE_HEADER_HISTOGRAM);
+                formatter.format(
+                    "<th class=\"l1\" align=left>%s, %s</th>", TABLE_HEADER_MEAN, unit);
+                formatter.format("<th class=\"l1\" align=left>%s</th>", TABLE_HEADER_COUNT);
+                formatter.format("<th class=\"l1\" align=left>%s, %s</th>", TABLE_HEADER_MAX, unit);
+                formatter.format("<th class=\"l1\" align=left>%s, %s</th>", TABLE_HEADER_MIN, unit);
+                formatter.format("<th class=\"l1\" align=left>%s</th>", TABLE_HEADER_DEV);
+                formatter.format("<th class=\"l1\" align=left>%s</th>", TABLE_HEADER_HISTOGRAM);
                 return null;
               }
             },
             new Function<LastValue, Void>() {
               @Override
               public Void apply(LastValue arg) {
-                formatter.format("<th class=\"l1\">%s, %s</th>", TABLE_HEADER_LAST_VALUE, unit);
+                formatter.format(
+                    "<th class=\"l1\" align=left>%s, %s</th>", TABLE_HEADER_LAST_VALUE, unit);
                 return null;
               }
             },
@@ -426,8 +456,9 @@ final class StatszZPageHandler extends ZPageHandler {
                 // some
                 // deprecated RPC views.
                 if (arg instanceof Aggregation.Mean) {
-                  formatter.format("<th class=\"l1\">%s, %s</th>", TABLE_HEADER_MEAN, unit);
-                  formatter.format("<th class=\"l1\">%s</th>", TABLE_HEADER_COUNT);
+                  formatter.format(
+                      "<th class=\"l1\" align=left>%s, %s</th>", TABLE_HEADER_MEAN, unit);
+                  formatter.format("<th class=\"l1\" align=left>%s</th>", TABLE_HEADER_COUNT);
                   return null;
                 }
                 throw new IllegalArgumentException("Unknown Aggregation.");
@@ -442,10 +473,10 @@ final class StatszZPageHandler extends ZPageHandler {
       Entry<List</*@Nullable*/ TagValue>, AggregationData> entry,
       PrintWriter out,
       Formatter formatter) {
-    out.write("<tr>");
+    out.write("<tr class=\"border-bottom\">");
     for (/*@Nullable*/ TagValue tagValue : entry.getKey()) {
       String tagValueStr = tagValue == null ? "" : tagValue.asString();
-      formatter.format("<td %s>%s</td>", ALIGN_CENTER, tagValueStr);
+      formatter.format("<td class=\"border-left\" %s>%s</td>", ALIGN_LEFT, tagValueStr);
     }
     entry
         .getValue()
@@ -453,21 +484,23 @@ final class StatszZPageHandler extends ZPageHandler {
             new Function<SumDataDouble, Void>() {
               @Override
               public Void apply(SumDataDouble arg) {
-                formatter.format("<td %s>%.3f</td>", ALIGN_CENTER, arg.getSum());
+                formatter.format(
+                    "<td class=\"border-left\" %s>%.3f</td>", ALIGN_LEFT, arg.getSum());
                 return null;
               }
             },
             new Function<SumDataLong, Void>() {
               @Override
               public Void apply(SumDataLong arg) {
-                formatter.format("<td %s>%d</td>", ALIGN_CENTER, arg.getSum());
+                formatter.format("<td class=\"border-left\" %s>%d</td>", ALIGN_LEFT, arg.getSum());
                 return null;
               }
             },
             new Function<CountData, Void>() {
               @Override
               public Void apply(CountData arg) {
-                formatter.format("<td %s>%d</td>", ALIGN_CENTER, arg.getCount());
+                formatter.format(
+                    "<td class=\"border-left\" %s>%d</td>", ALIGN_LEFT, arg.getCount());
                 return null;
               }
             },
@@ -476,11 +509,17 @@ final class StatszZPageHandler extends ZPageHandler {
               public Void apply(DistributionData arg) {
                 checkArgument(
                     view.getAggregation() instanceof Distribution, "Distribution expected.");
-                formatter.format("<td %s>%.3f</td>", ALIGN_CENTER, arg.getMean());
-                formatter.format("<td %s>%d</td>", ALIGN_CENTER, arg.getCount());
-                formatter.format("<td %s>%.3f</td>", ALIGN_CENTER, arg.getMax());
-                formatter.format("<td %s>%.3f</td>", ALIGN_CENTER, arg.getMin());
-                formatter.format("<td %s>%.3f</td>", ALIGN_CENTER, arg.getSumOfSquaredDeviations());
+                formatter.format(
+                    "<td class=\"border-left\" %s>%.3f</td>", ALIGN_LEFT, arg.getMean());
+                formatter.format(
+                    "<td class=\"border-left\" %s>%d</td>", ALIGN_LEFT, arg.getCount());
+                formatter.format(
+                    "<td class=\"border-left\" %s>%.3f</td>", ALIGN_LEFT, arg.getMax());
+                formatter.format(
+                    "<td class=\"border-left\" %s>%.3f</td>", ALIGN_LEFT, arg.getMin());
+                formatter.format(
+                    "<td class=\"border-left\" %s>%.3f</td>",
+                    ALIGN_LEFT, arg.getSumOfSquaredDeviations());
                 emitHistogramBuckets(
                     ((Distribution) view.getAggregation()).getBucketBoundaries().getBoundaries(),
                     arg.getBucketCounts(),
@@ -492,14 +531,14 @@ final class StatszZPageHandler extends ZPageHandler {
             new Function<LastValueDataDouble, Void>() {
               @Override
               public Void apply(LastValueDataDouble arg) {
-                formatter.format("<td %s>%.3f</td>", ALIGN_CENTER, arg.getLastValue());
+                formatter.format("<td %s>%.3f</td>", ALIGN_LEFT, arg.getLastValue());
                 return null;
               }
             },
             new Function<LastValueDataLong, Void>() {
               @Override
               public Void apply(LastValueDataLong arg) {
-                formatter.format("<td %s>%d</td>", ALIGN_CENTER, arg.getLastValue());
+                formatter.format("<td %s>%d</td>", ALIGN_LEFT, arg.getLastValue());
                 return null;
               }
             },
@@ -508,8 +547,10 @@ final class StatszZPageHandler extends ZPageHandler {
               public Void apply(AggregationData arg) {
                 if (arg instanceof AggregationData.MeanData) {
                   AggregationData.MeanData meanData = (AggregationData.MeanData) arg;
-                  formatter.format("<td %s>%.3f</td>", ALIGN_CENTER, meanData.getMean());
-                  formatter.format("<td %s>%d</td>", ALIGN_CENTER, meanData.getCount());
+                  formatter.format(
+                      "<td class=\"border-left\" %s>%.3f</td>", ALIGN_LEFT, meanData.getMean());
+                  formatter.format(
+                      "<td class=\"border-left\" %s>%d</td>", ALIGN_LEFT, meanData.getCount());
                   return null;
                 }
                 throw new IllegalArgumentException("Unknown Aggregation.");
@@ -526,7 +567,7 @@ final class StatszZPageHandler extends ZPageHandler {
     checkArgument(
         bucketBoundaries.size() == bucketCounts.size() - 1,
         "Bucket boundaries and counts don't match");
-    out.write("<td>");
+    out.write("<td class=\"border-left\">");
     out.write("<table>");
     formatter.format(
         "<thead><tr><th>%s</th><th>%s</th></tr></thead>",
@@ -551,7 +592,7 @@ final class StatszZPageHandler extends ZPageHandler {
     out.write("<h2>Measures with Views</h2>");
     out.write("<p>Below are the measures used in registered views.</p>");
     out.write("<p></p>");
-    formatter.format("<table %s frame=box cellspacing=0 cellpadding=2>", TABLE_BORDER);
+    formatter.format("<table class=\"borders\" cellspacing=0 cellpadding=0>");
     emitMeasureTableHeader(out, formatter);
     out.write("<tbody>");
     for (Entry<String, Measure> entry : measures.entrySet()) {
@@ -565,25 +606,27 @@ final class StatszZPageHandler extends ZPageHandler {
   private static void emitMeasureTableHeader(PrintWriter out, Formatter formatter) {
     out.write("<thead>");
     out.write("<tr>");
-    formatter.format("<th colspan=1 class=\"l1\">%s</th>", TABLE_HEADER_MEASURE);
-    formatter.format("<th colspan=1 class=\"l1\">%s</th>", TABLE_HEADER_DESCRIPTION);
-    formatter.format("<th colspan=1 class=\"l1\">%s</th>", TABLE_HEADER_UNIT);
-    formatter.format("<th colspan=1 class=\"l1\">%s</th>", TABLE_HEADER_MEASURE_TYPE);
+    formatter.format("<th colspan=1>%s</th>", TABLE_HEADER_MEASURE);
+    formatter.format("<th colspan=1 class=\"l1\" align=\"left\">%s</th>", TABLE_HEADER_DESCRIPTION);
+    formatter.format("<th colspan=1 class=\"l1\" align=\"left\">%s</th>", TABLE_HEADER_UNIT);
+    formatter.format(
+        "<th colspan=1 class=\"l1\" align=\"left\">%s</th>", TABLE_HEADER_MEASURE_TYPE);
     out.write("</tr>");
     out.write("</thead>");
   }
 
   private static void emitMeasureTableRow(Measure measure, PrintWriter out, Formatter formatter) {
-    out.write("<tr>");
+    out.write("<tr class=\"border-bottom\">");
     formatter.format("<td><b>%s</b></td>", measure.getName());
-    formatter.format("<td align=\"left\">%s&nbsp;</td>", measure.getDescription());
-    formatter.format("<td align=\"left\">%s&nbsp;</td>", measure.getUnit());
+    formatter.format(
+        "<td class=\"border-left\" align=\"left\">%s&nbsp;</td>", measure.getDescription());
+    formatter.format("<td class=\"border-left\" align=\"left\">%s&nbsp;</td>", measure.getUnit());
     String measureType =
         measure.match(
             Functions.returnConstant("Double"),
             Functions.returnConstant("Long"),
             Functions.throwAssertionError());
-    formatter.format("<td align=\"left\">%s&nbsp;</td>", measureType);
+    formatter.format("<td class=\"border-left\" align=\"left\">%s&nbsp;</td>", measureType);
     out.write("</tr>");
   }
 
diff --git a/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/TraceConfigzZPageHandler.java b/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/TraceConfigzZPageHandler.java
index 0df86b96..71f7c931 100644
--- a/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/TraceConfigzZPageHandler.java
+++ b/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/TraceConfigzZPageHandler.java
@@ -53,32 +53,32 @@ final class TraceConfigzZPageHandler extends ZPageHandler {
   private static final String TRACECONFIGZ_FORM_BODY =
       "<form action=/traceconfigz method=get>%n"
           // Permanently changes table.
-          + "<table>%n"
-          + "<td colspan=\"3\"><b>Permanently change</b> "
+          + "<table class=\"margin-btm\" rules=\"all\" frame=\"border\">%n"
+          + "<td colspan=\"3\" class=\"col_head_red\">Permanently change "
           + "<input type=\"hidden\" name=\"%s\" value=\"%s\"></td>%n"
           + "<tr><td>SamplingProbability to</td> "
-          + "<td><input type=text size=10 name=%s value=\"\"></td> <td>(%s)</td>%n"
+          + "<td><input type=text size=15 name=%s value=\"\"></td> <td>(%s)</td>%n"
           + "<tr><td>MaxNumberOfAttributes to</td> "
-          + "<td><input type=text size=10 name=%s value=\"\"></td> <td>(%d)</td>%n"
+          + "<td><input type=text size=15 name=%s value=\"\"></td> <td>(%d)</td>%n"
           + "<tr><td>MaxNumberOfAnnotations to</td>"
-          + "<td><input type=text size=10 name=%s value=\"\"></td> <td>(%d)</td>%n"
+          + "<td><input type=text size=15 name=%s value=\"\"></td> <td>(%d)</td>%n"
           + "<tr><td>MaxNumberOfNetworkEvents to</td> "
-          + "<td><input type=text size=10 name=%s value=\"\"></td> <td>(%d)</td>%n"
+          + "<td><input type=text size=15 name=%s value=\"\"></td> <td>(%d)</td>%n"
           + "<tr><td>MaxNumberOfLinks to</td>"
-          + "<td><input type=text size=10 name=%s value=\"\"></td> <td>(%d)</td>%n"
+          + "<td><input type=text size=15 name=%s value=\"\"></td> <td>(%d)</td>%n"
           + "</table>%n"
           // Submit button.
-          + "<input type=submit value=Submit>%n"
+          + "<input class=\"button\" type=submit value=Submit>%n"
           + "</form>";
 
   private static final String RESTORE_DEFAULT_FORM_BODY =
       "<form action=/traceconfigz method=get>%n"
           // Restore to default.
-          + "<b>Restore default</b> %n"
+          + "<b class=\"title\">Restore default</b> %n"
           + "<input type=\"hidden\" name=\"%s\" value=\"%s\"></td>%n"
           + "</br>%n"
           // Reset button.
-          + "<input type=submit value=Reset>%n"
+          + "<input class=\"button\" type=submit value=Reset>%n"
           + "</form>";
 
   static TraceConfigzZPageHandler create(TraceConfig traceConfig) {
@@ -90,6 +90,32 @@ final class TraceConfigzZPageHandler extends ZPageHandler {
     return TRACE_CONFIGZ_URL;
   }
 
+  private static void emitStyle(PrintWriter out) {
+    out.write("<style>\n");
+    out.write(
+        "body{font-family:'Roboto',sans-serif;font-size:14px;" + "background-color:#F2F4EC;}\n");
+    out.write("h1{color:#3D3D3D;text-align:left;margin-left:20px;" + "margin-bottom:20px;}\n");
+    out.write("p{padding:0 0.5em;color:#3D3D3D}\n");
+    out.write(
+        "p.header{font-family:'Open Sans',sans-serif;top:0;left:0;width:100%;"
+            + "height:60px;vertical-align:middle;color:#C1272D;font-size:22pt;}\n");
+    out.write(".header span{color:#3D3D3D;}\n");
+    out.write("img.oc {vertical-align:middle;}\n");
+    out.write("table{width:40%;background-color:#FFF;margin-left:20px;}\n");
+    out.write("td{line-height:2.0;padding:0 0.5em;}\n");
+    out.write("td.col_head{font-size:16px;font-weight:bold;" + "line-height:3.0;color:#FFF;}\n");
+    out.write("td.col_head_red{background-color:#A94442;font-size:16px;\n");
+    out.write("font-weight:bold;line-height:3.0;color:#FFF;}\n");
+    out.write("b.title{margin-left:20px;font-weight:bold;line-height:2.0;}\n");
+    out.write("input.button{margin-left:20px;margin-top:4px;\n");
+    out.write("font-size:20px;width:80px;height:60px;}\n");
+    out.write("table.margin-btm{margin-bottom:30px;}\n");
+    out.write("table.borders{border-left:1px solid #3D3D3D;" + "border-right:1px solid #3D3D3D;\n");
+    out.write("border-bottom:1px solid #3D3D3D;}\n");
+    out.write("table.borders-all{border:1px solid #3D3D3D;}\n");
+    out.write("</style>\n");
+  }
+
   @Override
   @SuppressWarnings("deprecation")
   public void emitHtml(Map<String, String> queryMap, OutputStream outputStream) {
@@ -100,8 +126,20 @@ final class TraceConfigzZPageHandler extends ZPageHandler {
     out.write("<meta charset=\"utf-8\">\n");
     out.write("<title>TraceConfigZ</title>\n");
     out.write("<link rel=\"shortcut icon\" href=\"//www.opencensus.io/favicon.ico\"/>\n");
+    out.write(
+        "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300\""
+            + "rel=\"stylesheet\">\n");
+    out.write(
+        "<link href=\"https://fonts.googleapis.com/css?family=Roboto\"" + "rel=\"stylesheet\">\n");
+    emitStyle(out);
     out.write("</head>\n");
     out.write("<body>\n");
+    out.write(
+        "<p class=\"header\">"
+            + "<img class=\"oc\" src=\"https://opencensus.io/img/logo-sm.svg\" />"
+            + "Open<span>Census</span></p>");
+    out.write("<h1>Trace Configuration</h1>");
+    out.write("<p></p>");
     try {
       // Work that can throw exceptions.
       maybeApplyChanges(queryMap);
@@ -174,11 +212,11 @@ final class TraceConfigzZPageHandler extends ZPageHandler {
   @SuppressWarnings("deprecation")
   private static void emitTraceParamsTable(TraceParams params, PrintWriter out) {
     out.write(
-        "<b>Active tracing parameters:</b><br>\n"
-            + "<table rules=\"all\" frame=\"border\">\n"
-            + "  <tr style=\"background: #eee\">\n"
-            + "    <td><b>Name</b></td>\n"
-            + "    <td><b>Value</b></td>\n"
+        "<b class=\"title\">Active tracing parameters:</b><br>\n"
+            + "<table class=\"margin-btm\" rules=\"all\" frame=\"border\">\n"
+            + "  <tr style=\"background:#A94442;border=1\">\n"
+            + "    <td class=\"col_head\">Name</td>\n"
+            + "    <td class=\"col_head\">Value</td>\n"
             + "  </tr>\n");
     out.printf(
         "  <tr>%n    <td>Sampler</td>%n    <td>%s</td>%n  </tr>%n",
diff --git a/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/TracezZPageHandler.java b/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/TracezZPageHandler.java
index 91f1a4a3..b0cf579c 100644
--- a/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/TracezZPageHandler.java
+++ b/contrib/zpages/src/main/java/io/opencensus/contrib/zpages/TracezZPageHandler.java
@@ -109,9 +109,9 @@ final class TracezZPageHandler extends ZPageHandler {
   private static final String TRACEZ_URL = "/tracez";
   private static final Tracer tracer = Tracing.getTracer();
   // Color to use for zebra-striping.
-  private static final String ZEBRA_STRIPE_COLOR = "#eee";
+  private static final String ZEBRA_STRIPE_COLOR = "#F2F2F2";
   // Color for sampled traceIds.
-  private static final String SAMPLED_TRACE_ID_COLOR = "blue";
+  private static final String SAMPLED_TRACE_ID_COLOR = "#C1272D";
   // Color for not sampled traceIds
   private static final String NOT_SAMPLED_TRACE_ID_COLOR = "black";
   // The header for span name.
@@ -153,6 +153,33 @@ final class TracezZPageHandler extends ZPageHandler {
     return TRACEZ_URL;
   }
 
+  private static void emitStyle(PrintWriter out) {
+    out.write("<style>\n");
+    out.write(
+        "body {font-family:'Roboto',sans-serif;font-size:14px;" + "background-color:#F2F4EC;}\n");
+    out.write("h1{color:#3D3D3D;text-align:center; margin-bottom:20px;}\n");
+    out.write("p{padding:0 0.5em;color: #3D3D3D}\n");
+    out.write(
+        "p.header{font-family:'Open Sans',sans-serif;top:0;left:0;width:100%;"
+            + "height:60px;vertical-align:middle;color:#C1272D;font-size:22pt;}\n");
+    out.write(".header span{color:#3D3D3D;}\n");
+    out.write("img.oc{ vertical-align:middle;}\n");
+    out.write(
+        "table{color:#FFF;background-color:#FFF;overflow:hidden;"
+            + "width:100%;margin-bottom:30px;}\n");
+    out.write("th{line-height:3.0;padding:0 0.5em;}\n");
+    out.write("tr.border td{border-bottom:1px solid #3D3D3D;}\n");
+    out.write("tr.bgcolor_red{background-color:#A94442;}\n");
+    out.write("td.column_head{text-align:center;color:#FFF;line-height:3.0;}\n");
+    out.write("td{color:#3D3D3D;line-height:2.0;padding:0 0.5em;}\n");
+    out.write("a{color:#A94442;}\n");
+    out.write("td.border-right{border-right:1px solid #FFF;}\n");
+    out.write("td.border-left{border-left:1px solid #FFF;}\n");
+    out.write("td.border-left-blk{border-left:1px solid #000}\n");
+    out.write("td.border-right-blk{border-right:1px solid #000}\n");
+    out.write("</style>\n");
+  }
+
   @Override
   public void emitHtml(Map<String, String> queryMap, OutputStream outputStream) {
     PrintWriter out =
@@ -162,8 +189,20 @@ final class TracezZPageHandler extends ZPageHandler {
     out.write("<meta charset=\"utf-8\">\n");
     out.write("<title>TraceZ</title>\n");
     out.write("<link rel=\"shortcut icon\" href=\"//www.opencensus.io/favicon.ico\"/>\n");
+    out.write(
+        "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300\""
+            + "rel=\"stylesheet\">\n");
+    out.write(
+        "<link href=\"https://fonts.googleapis.com/css?family=Roboto\"" + "rel=\"stylesheet\">\n");
+    emitStyle(out);
     out.write("</head>\n");
     out.write("<body>\n");
+    out.write(
+        "<p class=\"header\">"
+            + "<img class=\"oc\" src=\"https://opencensus.io/img/logo-sm.svg\" />"
+            + "Open<span>Census</span></p>");
+    out.write("<h1>TraceZ Summary</h1>\n");
+
     try {
       emitHtmlBody(queryMap, out);
     } catch (Throwable t) {
@@ -403,24 +442,25 @@ final class TracezZPageHandler extends ZPageHandler {
     RunningSpanStore.Summary runningSpanStoreSummary = runningSpanStore.getSummary();
     SampledSpanStore.Summary sampledSpanStoreSummary = sampledSpanStore.getSummary();
 
-    out.write("<table style='border-spacing: 0'>\n");
+    out.write("<table style='border-spacing: 0;\n");
+    out.write("border-left:1px solid #3D3D3D;border-right:1px solid #3D3D3D;'>\n");
     emitSummaryTableHeader(out, formatter);
 
     Set<String> spanNames = new TreeSet<>(runningSpanStoreSummary.getPerSpanNameSummary().keySet());
     spanNames.addAll(sampledSpanStoreSummary.getPerSpanNameSummary().keySet());
     boolean zebraColor = true;
     for (String spanName : spanNames) {
-      out.write("<tr>\n");
+      out.write("<tr class=\"border\">\n");
       if (!zebraColor) {
-        out.write("<tr>\n");
+        out.write("<tr class=\"border\">\n");
       } else {
-        formatter.format("<tr style=\"background: %s\">%n", ZEBRA_STRIPE_COLOR);
+        formatter.format("<tr class=\"border\" style=\"background: %s\">%n", ZEBRA_STRIPE_COLOR);
       }
       zebraColor = !zebraColor;
       formatter.format("<td>%s</td>%n", htmlEscaper().escape(spanName));
 
       // Running
-      out.write("<td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>");
+      out.write("<td class=\"border-right-blk\">&nbsp;&nbsp;&nbsp;&nbsp;</td>");
       RunningSpanStore.PerSpanNameSummary runningSpanStorePerSpanNameSummary =
           runningSpanStoreSummary.getPerSpanNameSummary().get(spanName);
 
@@ -439,7 +479,7 @@ final class TracezZPageHandler extends ZPageHandler {
           sampledSpanStoreSummary.getPerSpanNameSummary().get(spanName);
 
       // Latency based samples
-      out.write("<td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>");
+      out.write("<td class=\"border-left-blk\">&nbsp;&nbsp;&nbsp;&nbsp;</td>");
       Map<LatencyBucketBoundaries, Integer> latencyBucketsSummaries =
           sampledSpanStorePerSpanNameSummary != null
               ? sampledSpanStorePerSpanNameSummary.getNumbersOfLatencySampledSpans()
@@ -459,7 +499,7 @@ final class TracezZPageHandler extends ZPageHandler {
       }
 
       // Error based samples.
-      out.write("<td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>");
+      out.write("<td class=\"border-right-blk\">&nbsp;&nbsp;&nbsp;&nbsp;</td>");
       if (sampledSpanStorePerSpanNameSummary != null) {
         Map<CanonicalCode, Integer> errorBucketsSummaries =
             sampledSpanStorePerSpanNameSummary.getNumbersOfErrorSampledSpans();
@@ -480,31 +520,28 @@ final class TracezZPageHandler extends ZPageHandler {
   }
 
   private static void emitSummaryTableHeader(PrintWriter out, Formatter formatter) {
-    out.write(
-        "<tr><td colspan=25 align=\"center\"><font size=\"5\"><b>TraceZ "
-            + "Summary</b></font></td></tr>\n");
     // First line.
-    out.write("<tr>\n");
-    out.write("<td colspan=1 align=\"center\"><b>Span Name</b></td>\n");
-    out.write("<td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>");
-    out.write("<td colspan=1 align=\"center\"><b>Running</b></td>\n");
-    out.write("<td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>");
-    out.write("<td colspan=9 align=\"center\"><b>Latency Samples</b></td>\n");
-    out.write("<td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>");
-    out.write("<td colspan=1 align=\"center\"><b>Error Samples</b></td>\n");
+    out.write("<tr class=\"bgcolor_red\">\n");
+    out.write("<td colspan=1 class=\"column_head\"><b>Span Name</b></td>\n");
+    out.write("<td class=\"border-right\">&nbsp;&nbsp;&nbsp;&nbsp;</td>");
+    out.write("<td colspan=1 class=\"column_head\"><b>Running</b></td>\n");
+    out.write("<td class=\"border-left\">&nbsp;&nbsp;&nbsp;&nbsp;</td>");
+    out.write("<td colspan=9 class=\"column_head\"><b>Latency Samples</b></td>\n");
+    out.write("<td class=\"border-right\">&nbsp;&nbsp;&nbsp;&nbsp;</td>");
+    out.write("<td colspan=1 class=\"column_head\"><b>Error Samples</b></td>\n");
     out.write("</tr>\n");
     // Second line.
-    out.write("<tr>\n");
+    out.write("<tr class=\"bgcolor_red\">\n");
     out.write("<td colspan=1></td>\n");
-    out.write("<td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>");
+    out.write("<td class=\"border-right\">&nbsp;&nbsp;&nbsp;&nbsp;</td>");
     out.write("<td colspan=1></td>\n");
-    out.write("<td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>");
+    out.write("<td class=\"border-left\">&nbsp;&nbsp;&nbsp;&nbsp;</td>");
     for (LatencyBucketBoundaries latencyBucketsBoundaries : LatencyBucketBoundaries.values()) {
       formatter.format(
-          "<td colspan=1 align=\"center\"><b>[%s]</b></td>%n",
+          "<td colspan=1 align=\"center\" style=\"color:#FFF\"><b>[%s]</b></td>%n",
           LATENCY_BUCKET_BOUNDARIES_STRING_MAP.get(latencyBucketsBoundaries));
     }
-    out.write("<td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>");
+    out.write("<td class=\"border-right\">&nbsp;&nbsp;&nbsp;&nbsp;</td>");
     out.write("<td colspan=1></td>\n");
     out.write("</tr>\n");
   }