Efficiently generating HTML CSS table using Java I am trying to generate an HTML table using Java. I have an object which I am iterating to make an HTML table.

StringBuilder sb = new StringBuilder();
sb.append("&lt;html&gt;");
sb.append("&lt;head&gt;");
sb.append("&lt;/head&gt;");
sb.append("&lt;table&gt;");
sb.append("&lt;th style = \"background: #333; color: white; font-weight: bold; padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; ClientName");
sb.append("&lt;/th&gt;");
sb.append("&lt;th style = \"background: #333; color: white; font-weight: bold; padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; SyncCount");
sb.append("&lt;/th&gt;");
sb.append("&lt;th style = \"background: #333; color: white; font-weight: bold; padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; SyncPercentile");
sb.append("&lt;/th&gt;");
sb.append("&lt;th style = \"background: #333; color: white; font-weight: bold; padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; SyncAvg");
sb.append("&lt;/th&gt;");
sb.append("&lt;th style = \"background: #333; color: white; font-weight: bold; padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; SyncMax");
sb.append("&lt;/th&gt;");
sb.append("&lt;th style = \"background: #333; color: white; font-weight: bold; padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; AsyncCount");
sb.append("&lt;/th&gt;");
sb.append("&lt;th style = \"background: #333; color: white; font-weight: bold; padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; AsyncPercentile");
sb.append("&lt;/th&gt;");
sb.append("&lt;th style = \"background: #333; color: white; font-weight: bold; padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; AsyncAvg");
sb.append("&lt;/th&gt;");

for (DataMetrics metrics : dataMetricsList) {
    sb.append("&lt;tr&gt;");
    sb.append("&lt;td style = \"padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; " + metrics.getName());
    sb.append("&lt;/td&gt;");
    sb.append("&lt;td style = \"padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; " + metrics.getSyncCall());
    sb.append("&lt;/td&gt;");
    sb.append("&lt;td style = \"padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; " + metrics.getSyncPercent());
    sb.append("&lt;/td&gt;");
    sb.append("&lt;td style = \"padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; " + metrics.getSyncAvg());
    sb.append("&lt;/td&gt;");
    sb.append("&lt;td style = \"padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; " + metrics.getSyncMax());
    sb.append("&lt;/td&gt;");
    sb.append("&lt;td style = \"padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; " + metrics.getAsyncCall());
    sb.append("&lt;/td&gt;");
    sb.append("&lt;td style = \"padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; " + metrics.getAsyncPercent());
    sb.append("&lt;/td&gt;");
    sb.append("&lt;td style = \"padding: 6px; border: 1px solid #ccc; text-align: left;\"&gt; " + metrics.getAsyncAvg());
    sb.append("&lt;/td&gt;");
    sb.append("&lt;/tr&gt;");
}
sb.append("&lt;/table&gt;");
sb.append("&lt;/body&gt;");
sb.append("&lt;/html&gt;");

System.out.println(sb.toString());


Somehow, the code looks pretty ugly to me in the way HTML and CSS are being used within StringBuilder. I am opting for code review to see whether we can improve anything here.  Is there any better way of writing this code?
How about extracting the style=""s into the head?

sb.append("&lt;style&gt;" +
"td { padding: 6px; border: 1px solid #ccc; text-align: left; }" + 
"th { background: #333; color: white; font-weight: bold; padding: 6px; border: 1px solid #ccc; text-align: left;}" +
"&lt;/style&gt;");

You should write helper methods, that do the 'heavy lifting' for you:

void appendTag(StringBuilder sb, String tag, String contents) {
    sb.append('&lt;').append(tag).append('&gt;');
    sb.append(contents);
    sb.append("&lt;/").append(tag).append('&gt;');
}
void appendDataCell(StringBuilder sb, String contents) {
    appendTag(sb, "td", contents);
}
void appendHeaderCell(StringBuilder sb, String contents) {
    appendTag(sb, "th", contents);
}



Please note, that if you are using StringBuilder you should not concatenate strings with +.  You want to get rid of string concatenation, not do it.



If you want to get even more expressive you should take a look at existing template engines. They are optimized and mostly easy to use.

Suggesting mustache:

If you are using mustache, you can write a template like this:

&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Table&lt;/title&gt;
    &lt;style&gt;...&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table&gt;
     &lt;tr&gt;&lt;th&gt;....&lt;/th&gt;&lt;/tr&gt;
    {{#metrics}}
      &lt;tr&gt;
        &lt;td&gt;{{getName}}&lt;/td&gt;
        ...
      &lt;/tr&gt;
    {{/metrics}}
  &lt;/body&gt;
&lt;/html&gt;


and then render it via e.g.

public static void main(String[] args) throws IOException {
    HashMap&lt;String, Object&gt; scopes = new HashMap&lt;String, Object&gt;();
    scopes.put("metrics", dataMetricsList);

    Writer writer = new OutputStreamWriter(System.out);
    MustacheFactory mf = new DefaultMustacheFactory();
    Mustache mustache = mf.compile(new StringReader(getTemplateCodeFromAbove()), "example");
    mustache.execute(writer, scopes);
    writer.flush();
}


It depends on your use case, of course. If all you ever want is to render a single table, you are fine with StringBuilder. But if you find yourself repeating this, get an external library for it.