<style>
  .result {
    width: 35px;
    height: 35px;
  }

  .col-header, .row-header {
    font-weight: bold;
  }

  .col-header {
    text-align: center;
  }

  .row-header {
    text-align: right;
  }

  .dark {
    background-color: #EEE;
  }

  .result.true.dark {
    background-color: #0D0;
  }

  .result.true.light {
    background-color: #0F0;
  }

  .result.false.dark {
    background-color: #D00;
  }

  .result.false.light {
    background-color: #F00;
  }

</style>

<script>
var totest = [true, false, 1, 0, -1, "1", "0", "-1", "", "javascript", null,
              undefined, [], {}, [[]], [0], [1], parseFloat("nan")];

function map(f, x) {
  var result = [];
  for (var i = 0; i < x.length; i += 1)
    result.push(f(x[i]));
  return result;
}

function repr(x) {
  if (typeof(x) === "string")
    return '"' + x.replace('"', '\\"') + '"';

  if (x && x.constructor === Array)
    return "[" + map(repr, x).join(", ") + "]";

  if (x && typeof(x) === "object")
    return "{}";

  return String(x);
}

function rowcolcls(i, j) {
  return (i % 2)? "dark" : "light";
}

function buildTable() {
  var tableHtml = ["<table><tr><td></td>"];
  for (var i = 0; i < totest.length; i += 1) {
    tableHtml.push("<td class='col-header " + rowcolcls(0, i) + "'>");
    tableHtml.push(repr(totest[i]));
    tableHtml.push("</td>");
  }
  tableHtml.push("</tr>");

  for (var i = 0; i < totest.length; i += 1) {
    tableHtml.push("<tr><td class='row-header " + rowcolcls(i, j) + "'>");
    tableHtml.push(repr(totest[i]));
    tableHtml.push("</td>");
    for (var j = 0; j < totest.length; j += 1) {
      var result = totest[i] == totest[j];
      tableHtml.push("<td class='result " + result + " " + rowcolcls(i, j) + "'></td>");
    }
    tableHtml.push("</tr>");
  }
  tableHtml.push("</table>");
  return tableHtml.join("");
}

document.write(buildTable());
</script>