asterion/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tabla</title>
    <style media="screen">
      .color0{ background-color: #ddd; }
      .color1{ background-color: teal; }
      .color2{ background-color: green; }
      .color3{ background-color: gold; }
      .color4{ background-color: peru; }
      .color5{ background-color: #ccc; }
    </style>
  </head>
  <body>
    <table id="mitabla">
      <thead>
        <tr>
          <th>name</th>
          <th>color</th>
        </tr>
      </thead>
    </table>
    <script type="text/javascript">
      function classCssName(id) {
        var name = '';

        switch (id) {
          case 0:
              name = 'color0';
            break;
          case 1:
              name = 'color1';
            break;
          case 2:
              name = 'color2';
            break;
          case 3:
              name = 'color3';
            break;
          case 4:
              name = 'color4';
            break;
          default:
              name = 'color5';
            break;
        }

        return name;
      }

      var data = [
        {name: 'zero', color: 0},
        {name: 'one', color: 1},
        {name: 'dos', color: 2},
        {name: 'tres', color: 3},
        {name: 'four', color: 4},
        {name: 'five', color: 5},
        {name: 'six', color: 6},
      ];

      for (var i = 0; i < data.length; i++) {
        tr = document.createElement("TR");

        tr.className = classCssName(data[i].color);

        td = document.createElement("TD");
        td.appendChild(document.createTextNode(data[i].name));
        tr.appendChild(td);

        td = document.createElement("TD");
        td.appendChild(document.createTextNode(data[i].color));

        tr.appendChild(td);

        document.getElementById("mitabla").appendChild(tr);
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Tabla</title>
	<style media="screen">
	.color0{ background-color: #ddd; }
	.color1{ background-color: teal; }
	.color2{ background-color: green; }
	.color3{ background-color: gold; }
	.color4{ background-color: peru; }
	.color5{ background-color: #ccc; }
	</style>
	</head>
	<body>
	<table id="mitabla">
	<thead>
	<tr>
	<th>name</th>
	<th>color</th>
	</tr>
	</thead>
	</table>
	<script type="text/javascript">
	function classCssName(id) {
	var name = '';

	switch (id) {
	case 0:
	name = 'color0';
	break;
	case 1:
	name = 'color1';
	break;
	case 2:
	name = 'color2';
	break;
	case 3:
	name = 'color3';
	break;
	case 4:
	name = 'color4';
	break;
	default:
	name = 'color5';
	break;
	}

	return name;
	}

	var data = [
	{name: 'zero', color: 0},
	{name: 'one', color: 1},
	{name: 'dos', color: 2},
	{name: 'tres', color: 3},
	{name: 'four', color: 4},
	{name: 'five', color: 5},
	{name: 'six', color: 6},
	];

	for (var i = 0; i < data.length; i++) {
	tr = document.createElement("TR");

	tr.className = classCssName(data[i].color);

	td = document.createElement("TD");
	td.appendChild(document.createTextNode(data[i].name));
	tr.appendChild(td);

	td = document.createElement("TD");
	td.appendChild(document.createTextNode(data[i].color));

	tr.appendChild(td);

	document.getElementById("mitabla").appendChild(tr);
	}
	</script>
	</body>
	</html>