diff --git a/gitinspector/html/html.header b/gitinspector/html/html.header
index 93a2d11..6ab9b01 100644
--- a/gitinspector/html/html.header
+++ b/gitinspector/html/html.header
@@ -267,12 +267,12 @@
 				border: 1px solid #bbb;
 				cursor: hand;
 			}}
-			div#responsibilities div, div#responsibilities div div {{
+			div#responsibilities div, div#responsibilities div div, div#metrics div, div#metrics div div {{
 				min-height: 0px;
 				padding: 0.5em 0.2em;
 				width: auto;
 			}}
-			div#responsibilities div.odd {{
+			div#responsibilities div.odd, div#metrics div.odd {{
 				background-color: #dbdbdb;
 			}}
 			div#responsibilities p {{
@@ -293,13 +293,17 @@
 				width: 32px;
 				height: 32px;
 			}}
-			h3 {{
+			h3, h4 {{
 				border-radius: 8px 8px 8px 8px;
 				-moz-border-radius: 8px 8px 8px 8px;
 				background-color: #ddcece;
 				margin-bottom: 0.2em;
 				margin-top: 0.6em;
 			}}
+			h4 {{
+				margin-top: 0.2em;
+				padding: 0.5em;
+			}}
 			div.button, div#responsibilities div.button {{
 				border-radius: 8px 8px 8px 8px;
 				-moz-border-radius: 8px 8px 8px 8px;
diff --git a/gitinspector/metrics.py b/gitinspector/metrics.py
index 81d5186..6f8bdb0 100644
--- a/gitinspector/metrics.py
+++ b/gitinspector/metrics.py
@@ -142,25 +142,31 @@ class Metrics(Outputable):
 
 	def output_html(self):
 		metrics_logic = MetricsLogic()
-		metrics_xml = "<div><div class=\"box\">"
+		metrics_xml = "<div><div class=\"box\" id=\"metrics\">"
 
 		if not metrics_logic.eloc and not metrics_logic.cyclomatic_complexity and not metrics_logic.cyclomatic_complexity_density:
 			metrics_xml += "<p>" + _(METRICS_MISSING_INFO_TEXT) + ".</p>"
 
 		if metrics_logic.eloc:
-			metrics_xml += "<p>" + _(ELOC_INFO_TEXT) + ".</p>"
-			for i in sorted(set([(j, i) for (i, j) in metrics_logic.eloc.items()]), reverse = True):
-				metrics_xml += "<p>" + _("{0} ({1} estimated lines of code)").format(i[1], str(i[0])) + "</p>"
+			metrics_xml += "<div><h4>" + _(ELOC_INFO_TEXT) + ".</h4>"
+			for n, i in enumerate(sorted(set([(j, i) for (i, j) in metrics_logic.eloc.items()]), reverse = True)):
+				metrics_xml += "<div" + (" class=\"odd\">" if n % 2 == 1 else ">") + \
+				               _("{0} ({1} estimated lines of code)").format(i[1], str(i[0])) + "</div>"
+			metrics_xml += "</div>"
 
 		if metrics_logic.cyclomatic_complexity:
-			metrics_xml += "<p>" +  _(CYCLOMATIC_COMPLEXITY_TEXT) + ".</p>"
-			for i in sorted(set([(j, i) for (i, j) in metrics_logic.cyclomatic_complexity.items()]), reverse = True):
-				metrics_xml += "<p>" + _("{0} ({1} in cyclomatic complexity)").format(i[1], str(i[0])) + "</p>"
+			metrics_xml += "<div><h4>" +  _(CYCLOMATIC_COMPLEXITY_TEXT) + "</h4>"
+			for n, i in enumerate(sorted(set([(j, i) for (i, j) in metrics_logic.cyclomatic_complexity.items()]), reverse = True)):
+				metrics_xml += "<div" + (" class=\"odd\">" if n % 2 == 1 else ">") + \
+				               _("{0} ({1} in cyclomatic complexity)").format(i[1], str(i[0])) + "</div>"
+			metrics_xml += "</div>"
 
 		if metrics_logic.cyclomatic_complexity_density:
-			metrics_xml += "<p>" +  _(CYCLOMATIC_COMPLEXITY_DENSITY_TEXT) + ".</p>"
-			for i in sorted(set([(j, i) for (i, j) in metrics_logic.cyclomatic_complexity_density.items()]), reverse = True):
-				metrics_xml += "<p>" + _("{0} ({1} in cyclomatic complexity density)").format(i[1], str(i[0])) + "</p>"
+			metrics_xml += "<div><h4>" +  _(CYCLOMATIC_COMPLEXITY_DENSITY_TEXT) + "</h4>"
+			for n, i in enumerate(sorted(set([(j, i) for (i, j) in metrics_logic.cyclomatic_complexity_density.items()]), reverse = True)):
+				metrics_xml += "<div" + (" class=\"odd\">" if n % 2 == 1 else ">") + \
+				               _("{0} ({1} in cyclomatic complexity density)").format(i[1], i[0]) + "</div>"
+			metrics_xml += "</div>"
 
 		metrics_xml += "</div></div>"
 		print(metrics_xml)