title: Using d3js to build table with multiple rows in thead where some cells have mixed colspan widths
body: <p>I am using d3noob's "Add a Table" tutorial to get most of the table, but I can't figure out how to get the thead cells laid out the way I want.</p>
  
  <p>I'm pretty sure I'm screwing up on the first thead.append block, but if I remove ".data(columns)," I just get a white page.</p>
  
  <p>Thanks for the help!</p>
  
  <hr>
  
  <pre><code>var parseDate = d3.time.format("%d-%b-%y").parse;
  
  // Get the data
  d3.tsv("data/data2.tsv",function(error,data) {
  
  data.forEach(function(d) {
      d.date1 = parseDate(d.date);
      d.close = +d.close;
      d.open = +d.open;
      d.diff = Math.round(( d.close - d.open ) * 100 ) / 100;
  });
  
  // Time to make the tables
  function tabulate(data, columns) {
      var table = d3.select("body").append("table").attr("class", "graph-key"),
          thead = table.append("thead"),
          tbody = table.append("tbody");
  
          // What the hell?
          thead.append("tr")
          .selectAll("th")
          .data(columns)
          .enter()
          .append("th")
          .attr("colspan", "2")
          .text("Stuff Here");
  
          // Append the header row
          thead.append("tr")
          .selectAll("th")
          .data(columns)
          .enter()
          .append("th")
          .text(function (column) {
              return column;
          });
  
      // Create a row for each object in the data
      var rows = tbody.selectAll("tr")
          .data(data)
          .enter()
          .append("tr");
  
      // Create a cell in each row for each column
      var cells = rows.selectAll("td")
          .data(function(row) {
              return columns.map(function(column) {
                  return {
                      column: column,
                      value: row[column]
                  };
              });
          })
          .enter()
          .append("td")
          .html(function(d) {
              return d.value;
          });
          return table;
  }
  
  // Render the table
  var peopleTable = tabulate(data, ["date", "close", "open", "diff"]);
  });
  </code></pre>